javascript - Cross-frame cross-site scripting - 创建网页重新加载器/看门狗

Question

设置:

有远程测量站，有集中收集/处理/呈现服务器(带有网络服务器)，还有观测站，为客户显示收集到的数据。

这些观测站由简单的嵌入式计算机组成，配备网络浏览器，以信息亭模式工作，每个观测站显示来自中央服务器的一个特定网页。此网页使用 AJAX 更新，显示给定测量站的最新测量值。连接到固定监视器后，这些站应该可以几乎免维护地运行多年。

现在我们已经解决了大部分问题，但问题是:如果网络服务器出现故障怎么办？浏览器将加载“无法访问”、“404”、“权限被拒绝”、“500”或服务器当时出现的任何故障模式，并保持在那里直到有人手动重新启动观察站。

我想出的一般解决方案是将浏览器的主页设置为不是观察页面，而是始终可用的本地 HTML 文件，该文件将定期检查远程页面是否已正确加载和更新，并重新加载它如果它因任何原因无法执行。

问题:

问题在于跨框架脚本。我猜想目标网页必须作为框架、iframe、文本/HTML 类型的对象或其他某种方式加载，使其在不删除/禁用本地“容器”文件的情况下显示。几年前我写了一个跨框架脚本页面，绕过安全对策并不容易。从那时起，安全措施肯定已经加强。

因此，如果一切顺利，从远程服务器加载的页面包含一段定期启动的 javascript(一些 setInterval)，如果出现问题则不会。此信号定期到达容器框架，使其重置其超时并且不采取任何其他操作。

如果信号没有到达，当超时到期时，容器开始定期刷新加载的网页，直到服务器修复并加载正确的内容，并向加载器发送信号。

每次触发特定功能时，如何让远程页面向从 file://URL 加载的本地(容器)页面发出“事件”信号(例如，设置变量)？

Answer 1

有一个图书馆叫porthole它基本上按照 SF.'s answer 描述的方式进行，但形式更正式。我刚刚写了一个网页来切换显示两个 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 });
};

加上一些额外的控制逻辑。在子网页中，以下是我必须添加的所有内容(加上从 Controller 调用 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 等。