javascript - 是否可以阻止远程脚本在 iframe 内加载？

Question

我正在动态创建 iframe，并且我想阻止不是源自 iframe 来源的脚本。这可能吗(通过 JavaScript/jQuery)？例如，如果我的页面从 example.com 加载一个 iframe，其内容为:

<script src="http://example.com/foo.js"></script>
<script src="http://something-else.com/bar.js"></script>

我希望 example.com 脚本运行，但我希望 something-else.com 脚本被阻止而不运行。

我正在使用NW.js (以前称为 Node-Webkit)，因此我对 iframe 的内容拥有完全的读写访问权限，就好像它们是同源的一样。

我尝试过使用插件(比如那些在图片中引入 CORS 并带有白名单的插件)，但我尝试过的任何方法都不起作用。

理想的解决方案还允许我将除 iframe 来源之外的特定其他来源列入白名单。

编辑:

这是我的浏览器项目，我正在尝试在: https://github.com/IdeasNeverCease/Aries 中实现它

以下是 iframe 加载完成的代码部分:https://github.com/IdeasNeverCease/Aries/blob/master/app.nw/resources/scripts/aries.js#L376-L687

Answer 1

I want to prevent scripts that don't originate from the iframes' source

这正是 Content Security Policy 的意思(CSP) 是为了。 CSP 可以指定允许脚本、插件、样式、媒体等使用哪些源。您需要使每个 iframe 都有一个 CSP，以防止脚本加载到当前源之外；这可以通过简单的策略 script-src 'self' 'unsafe-inline'; 来完成(unsafe-inline 允许 iframe 具有内联脚本，self 限制仅加载同源资源)

传统上，您需要服务器发送 Content-Security-Policy提供页面时的响应 header 。但是，如果您无法控制服务器发送的响应 header (但可以控制页面内容)，您可以使用 <meta> 来模仿 HTTP 响应 header 。像这样的标签:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">

您可以通过编程方式注入(inject)(但请继续阅读以了解问题):

var m = document.createElement("meta");
m.httpEquiv = "content-security-policy";
m.content = "script-src 'self' 'unsafe-inline';";
iframeElem.contentDocument.documentElement.appendChild(m);

但是，这种基于脚本的注入(inject)可能不适合您，因为在从 HTML 源解析 DOM 后，您只能使用 DOM。当时，以及来自任何(非 async )<script> 的脚本元素已经被获取并运行。您可能需要直接操作 HTML，但我对 NW.js 的了解还不够，无法告诉您执行此操作的最佳方法。

如果您想禁止所有外部脚本资源(甚至来自同一来源的资源)，您可以使用 script-src 'none' 'unsafe-inline'; 。要禁止所有脚本，包括加载的脚本和内联脚本，请使用 script-src 'none';

为了将特定来源列入白名单，只需将它们添加为 CSP 中未加引号的项目即可:

Content-Security-Policy: script-src 'self' *.twitter.com https://api.facebook.com

领先*.允许所有子域，以及前导 https://限制该域的白名单以保护 https://仅地址。