javascript - 如何只允许白名单资源(脚本、像素等)在沙盒 iframe 中运行？

Question

我正在寻找一种方法，只允许白名单脚本在沙盒 iframe 中运行。我正在考虑一个 iframe-sandbox 指令，它只允许在 iframe 中运行列入白名单的脚本。类比是内容安全策略中的 script-src 指令。

问题:

<iframe sandbox="allow-same-origin allow-scripts" src="https://app.thirdparty.com" width="100%" height="800" frameBorder="0"></iframe>

iframe 中的应用程序为我的网站提供了有值(value)的功能。但是，它会引入我想要控制(即阻止)的外部资源，例如 AnalyticsJavaScript.com 和 TrackingPixel.com。我想允许来自 app.thirdparty.com 的脚本，但阻止 AnalyticsJavaScript.com 和 TrackingPixel.com。

任何帮助表示赞赏。

Answer 1

不幸的是，这个问题的答案很复杂。随着 iframe 沙箱的出现，这个问题似乎很简单，但是您正在寻找的规范仍在进行中。因此，如果您想要体面的浏览器支持，问题将涉及如何修改 iframe 的内容，这通常涉及某种代理。

内容安全政策

您真正需要的规范 is the CSP .最简单的情况是，您将允许具有 iframe 属性的特定脚本 csp="..." .

<iframe ...
        src=""
        csp="script-src https://app.thirdparty.com/"
        ...></iframe>

响应中不允许来自未指定域的任何脚本(即问题中的跟踪脚本)。请注意，将脚本限制为来自指定来源的脚本确实依赖于与第三方应用程序服务器的合作。如果服务器没有通知用户代理它将遵守 CSP 限制，则响应将被阻止。

CSP 仍然是一个工作草案，将来可能会改变。如评论中所述，Chrome 61 和 Opera 48 have implemented CSP 规范，但在现阶段，Firefox、Edge 或 Safari 没有迹象表明他们也会实现它。除非您能保证您的用户将只使用支持该规范的浏览器，否则大部分用户仍会看到跟踪脚本。

其余的建议都涉及修改 iframe 的内容以删除有问题的脚本。

反向代理

创建一个反向代理来阻止 iframe 中的几个跟踪脚本，就矫枉过正而言，可能相当于使用核弹头点燃营火。但是，如果您能够将服务器配置到这种程度，它是我发现的最可靠和无缝的 iframe 内容注入(inject)/修改/阻止方法。

Wikipedia page状态:

A reverse proxy is a type of proxy server that retrieves resources on behalf of a client from one or more servers. These resources are then returned to the client, appearing as if they originated from the proxy server itself.

因为反向代理是第三方应用程序和您的站点之间的中介，它可以透明地修改响应以删除不需要的脚本。我将在本示例中使用 Apache，但您的实现实际上取决于您已经使用的服务器。

您需要一个指向您的服务器 IP 的代理的子域，例如proxywebapp.yourdomain.com .在您的服务器上，您将在 httpd.conf 中创建一个使用 Apache mod_proxy 的虚拟主机。模块。然后，在您的虚拟主机配置中，您将使用空白替换对 AnalyticsJavaScript.com 和 TrackingPixel.com 的脚本调用。如果第三方应用程序必须使用 HTTPS，则反向代理会变得更加棘手，因为您需要 SSL 虚拟主机和代理 FQDN 的 SSL 证书。

<VirtualHost *:*>
    ServerName        proxywebapp.yourdomain.com
    ProxyPreserveHost On
    ProxyPass         "/" "http://app.thirdparty.com/"
    ProxyPassReverse  "/" "http://app.thirdparty.com"

    # in case any URLs have the original domain hard coded
    Substitute        "s|app.thirdparty.com/|proxywebapp.yourdomain.com/|i"
    # replace the undesired scripts with blanks
    Substitute        "s|AnalyticsJavaScript/| /|i"
    Substitute        "s|TrackingPixel/| /|i"
</VirtualHost>

然后您的 iframe 将指向 proxywebapp.yourdomain.com .

<iframe ... src="proxywebapp.yourdomain.com" ...></iframe>

再次:完全矫枉过正，但应该透明地工作。

代理脚本

要考虑的第三个选项是在 iframe 和第三方应用程序之间的服务器上实现代理脚本。您可以将功能添加到代理脚本中，以便在不需要的脚本到达 iframe 之前搜索并删除它们。此外，代理意味着 iframe 的内容将验证同源策略，因此您可以改为在前端使用 JavaScript 删除不需要的内容，尽管这可能无法保证脚本在删除之前不会运行。有许多在线代理脚本可用于各种后端(PHP、Node.js 等。令人作呕)。您可能会安装脚本并将其添加为 iframe 的 src，例如 <iframe ... src="proxy.php?https://app.thirdparty.com/" ...> .

除非为所有情况正确配置，否则代理可能无法在第三方应用程序与其父服务器之间正确传输数据。将需要进行测试。

编写您自己的服务器端代理以从 iframe 中删除几个脚本可能有点过分。

如果您无法访问后端，则可以使用 JavaScript 和 CORS 或 JSONP Web 应用程序抓取 Web 应用程序的内容，并对其进行修改以删除脚本。本质上是用 JavaScript 制作你自己的代理。此类网络应用程序(Any Origin、All Origins 等)允许您绕过跨域策略限制，但由于它们是第三方，您不能再假定任何网络应用程序的数据是私密的。在应用程序与其父服务器之间正确通信任何数据传输的问题仍然存在。

概括

广泛支持的纯前端解决方案目前不可行。但是有很多方法可以给猫剥皮，甚至还有更多方法可以修改 iframe 的内容，而不管跨域限制。

内容安全策略确实看起来很有希望并且正是您所要求的，但目前它缺乏广泛的支持意味着它只能在非常小众的情况下使用。修改内容的反向代理可能需要大量配置，在这种情况下就像在 Hot Wheels 轨道上驾驶全尺寸半挂车，但可能会无缝运行。来自转发代理的内容修改实现起来稍微简单一些，但可能会中断与第三方应用程序的父服务器的通信。