是否可以阻止远程脚本在 iframe 中加载

Is it possible to block remote scripts from loading inside iframe?

本文关键字：脚本 iframe 加载 程脚本 是否      更新时间：2023-09-26

我正在动态创建 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

我想阻止不是来自 iframe 源的脚本

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

传统上，您需要服务器在提供页面时发送Content-Security-Policy响应标头。但是，如果您无法控制服务器发送的响应标头（但可以控制页面内容），则可以使用<meta>标记来模拟HTTP响应标头，如下所示：

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

您可以通过编程方式注入此内容（但请继续阅读以了解问题）：

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

但是，这种基于脚本的注入可能不适合您，因为只有在从 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://地址。

相关文章：