Cross-кадр Cross-Site Scripting - создание веб-страницы перегружатель/сторожевого

Question

Установка:

Есть дистанционные измерительные станции, есть централизованный сбор/обработка/представление сервера (с веб-сервера), и есть станции наблюдения которые должны отображать собранные данные для клиентов.

Эти наблюдательные станции состоят из простых костей простого встроенного компьютера, оснащенного веб-браузером, работающим в режиме киоска, отображающим одну конкретную веб-страницу с центрального сервера. Эта веб-страница обновляется с помощью AJAX, отображающего последние измерения данной измерительной станции. Подключенные к стационарному монитору, эти станции должны работать почти без обслуживания в течение многих лет.

Теперь мы разработали большинство изломов, но есть вопрос: что делать, если веб-сервер выходит из строя? Браузер загрузит «недостижимые», «404», «Разрешенные отказы», ​​«500» или любой другой способ отказа, который сервер взял на тот момент, и останется там до тех пор, пока кто-то вручную не перезагрузит станцию ​​наблюдения.

Общее решение, с которым я столкнулся, заключается в том, чтобы установить домашнюю страницу браузера не на наблюдаемую страницу, а на всегда доступный локальный файл HTML, который будет выполнять периодические проверки, если удаленная страница была загружена и обновлена ​​правильно, и перезагрузите если он не может выполнить по какой-либо причине.

Проблема:

проблема заключается в кросс-кадров сценариев. Я предполагаю, что целевой веб-странице придется загружать как фрейм, iframe, объект типа text/HTML или какой-либо другой способ, который заставит его отображаться без удаления/отключения локального файла «container». Несколько лет назад я написал страницу с несколькими кадрами, и обход мер безопасности был непростым. С тех пор безопасность должна быть затянута.

Таким образом, страница, загруженная с удаленного сервера, содержит часть javascript, которая запускается периодически (некоторые setInterval), если все прошло хорошо или нет, если что-то было сломано. Периодическое прибытие этого сигнала в рамку контейнера заставляет его сбросить свой тайм-аут и не предпринимать никаких других действий.

В случае, если сигнал не поступает, по истечении времени ожидания контейнер начинает периодически обновлять загруженную веб-страницу до тех пор, пока сервер не будет установлен и не будет загружен надлежащий контент, что сигнализирует об этом загрузчику.

Как получить удаленную страницу для передачи «живой» (скажем, установки переменной) на локальную (контейнерную) страницу, загруженную из файла: // URL каждый раз при срабатывании определенной функции?

Answer 1

Метод межкадровой межсетевой связи использует postMessage.

Содержащийся кадр, на каждом правильном исполнении должен выполнять:

window.top.postMessage('tyrp', '*'); 

Документ контейнер должен содержать:

window.onmessage = function(e) 
{ 
    if (e.data == 'tyrp') { 
     //reset timeout here 
    } 
}; 

Answer 2

Существует библиотека называется porthole, который в основном делает то, что ответ НФ. но в более формальной форме. Я просто написал веб-страницу, чтобы переключить отображение одного из двух iframe. На веб-странице верхнего уровня у меня есть

var windowProxy; 
windowProxy = new Porthole.WindowProxy(baseURL + '/porthole/proxy.html', frameId); 
windowProxy.addEventListener(onMessage); 
... 
function onMessage(messageEvent) { 
    if (messageEvent.origin !== baseURL) { 
     $log.error(logPrefix + ': onMessage: invalid origin'); 
     console.dir(messageEvent); 
     return; 
    } 
    if (messageEvent.data.pong) { 
     pongReceived(); 
     return; 
    } 
    $log.log(logPrefix + ': onMessage: unknown message'); 
    console.dir(messageEvent); 
} 
... 
var sendPing = function() { 
    $log.log(logPrefix + ': ping to ' + baseURL); 
    ... 
    windowProxy.post({ 'ping': true }); 
}; 

плюс дополнительная логика управления.В детской веб-странице следующее все, что я должен добавить (плюс вызов portholeService.init() от контроллера):

// This service takes care of porthole (https://github.com/ternarylabs/porthole) 
// communication if this is invoked from a parent frame having this web page 
// as a child iframe. Usage of porthole is completely optional, and should 
// have no impact on anything outside this service. The purpose of this 
// service is to enable some failover service to be build on top of this 
// using two iframes to switch between. 
services.factory('portholeService', ['$rootScope', '$log', '$location', function ($rootScope, $log, $location) { 
    $log.log('Hello from portholeService'); 

    function betterOffWithFailover() { 
     ... 
    } 

    function onMessage(messageEvent) { 
     $rootScope.$apply(function() { 
      if (messageEvent.origin !== baseUrl) { 
       $log.error('onMessage: invalid origin'); 
       console.dir(messageEvent); 
       return; 
      } 

      if (!messageEvent.data.ping) { 
       $log.error('unknown message'); 
       console.dir(messageEvent.data); 
       return; 
      } 

      if (betterOffWithFailover()) { 
       $log.log('not sending pong'); 
       return; 
      } 

      windowProxy.post({ 'pong': true }); 
     }); 
    } 

    var windowProxy; 
    var baseUrl; 
    function init() { 
     baseUrl = $location.protocol() + '://' + $location.host() + ':' + $location.port(); 
     windowProxy = new Porthole.WindowProxy(baseUrl + '/porthole/proxy.html'); 
     windowProxy.addEventListener(onMessage); 
    } 

    return { 
     init: init 
    }; 
}]); 

---

Для справки эти страницы с помощью AngularJS в случае $rootScope.$apply и т.д. был незнаком вам.