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中的应用为我的网站提供了有价值的功能。但是，它会吸引我想要控制的外部资源（即阻止），例如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内容注入/修改/阻止的最可靠，无缝的方法。

Wikipedia page指出：

反向代理是一种代理服务器，它代表一个客户端从一个或多个服务器检索资源。然后，这些资源会返回给客户端，好像它们来自代理服务器本身一样。

由于反向代理是第三方应用程序和您的网站之间的中介，因此它可以透明地修改响应以删除不需要的脚本。在本示例中，我将使用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编写自己的代理。此类Web应用程序（任何Origin，All Origins等）都可以绕过跨域策略限制，但是由于它们是第三方，因此您不能再假定该Web应用程序的任何数据都是私有的。在应用程序与其父服务器之间正确通信任何数据传输的问题仍然存在。

摘要

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

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

Answer 2

您目前无法按照自己的方式进行操作。正如评论中提到的，CSP：EE尚待实现。

不过，您可以尝试代理请求并从服务器端或客户端的主体中删除不必要的脚本，例如：

1）通过XMLHTTPRequest获取所需的页面

2）删除不需要的

3）插入页面上的iframe

此方法的“可操作性”完全取决于外部应用程序功能。即如果上述应用需要最终用户的注册/授权才能使用，则该功能将无法正常工作，但这仍然适用于某些简单情况。

P.S .：您可以实施一种解决方法，以通过浏览器扩展程序使此类功能正常工作，但是我确定这不是您想要的。

如何只允许列入白名单的资源（脚本，像素等）在沙盒iframe中运行？

2 个答案:

内容安全政策

反向代理

代理脚本

摘要