如何只允许列入白名单的资源（脚本、像素等）在沙盒 iframe 中 运行？
How to allow only whitelisted resources (scripts, pixels etc.) to run within a sandboxed iframe?
我正在寻找一种只允许列入白名单的脚本在沙盒 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。
感谢任何帮助。
您不能按照您想要的方式执行此操作（目前）。正如评论中提到的 CSP:EE 是未来的事情。
但是您可以尝试代理请求并从服务器端或客户端的正文中删除不必要的脚本，例如：
1) 通过XMLHTTPRequest
获取需要的页面
2) 删除不需要的
3) 注入页面上的iframe
此方法的 "Workability" 完全取决于外部应用程序功能。 IE。如果上述应用程序需要 registration/authorisation 最终用户才能工作，它将无法工作，但是这仍然适用于一些简单的情况。
P.S.: 你可以通过浏览器扩展实现一个变通方法来让这样的东西工作，但是我确定这不是你想要的。
不幸的是，这个问题的答案很复杂。随着 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 内容 injection/modification/blocking 最可靠和无缝的方法。
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 网络应用程序抓取网络应用程序的内容，并对其进行修改以删除脚本。本质上是在 JavaScript 中创建您自己的代理。此类 Web 应用程序（Any Origin、All Origins 等）允许您绕过跨域策略限制，但由于它们是第三方，您不能再假设任何 Web 应用程序的数据都是私有的。在应用程序与其父服务器之间正确通信任何数据传输的问题仍然存在。
总结
目前广泛支持的纯前端解决方案不可行。但是有很多方法可以给猫蒙皮，甚至可以有更多的方法来修改 iframe 的内容，而不管跨域限制。
内容安全策略看起来很有前途并且正是您所要求的，但目前它缺乏广泛的支持意味着它只能在非常小众的情况下使用。修改内容的反向代理可能需要大量配置，在这种情况下就像在 Hot Wheels 轨道上驾驶全尺寸半挂车，但可能会无缝运行。从转发代理修改内容更容易实现，但可能会中断与第三方应用程序的父服务器的通信。
我正在寻找一种只允许列入白名单的脚本在沙盒 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。
感谢任何帮助。
您不能按照您想要的方式执行此操作（目前）。正如评论中提到的 CSP:EE 是未来的事情。
但是您可以尝试代理请求并从服务器端或客户端的正文中删除不必要的脚本，例如：
1) 通过XMLHTTPRequest
获取需要的页面2) 删除不需要的
3) 注入页面上的iframe
此方法的"Workability" 完全取决于外部应用程序功能。 IE。如果上述应用程序需要 registration/authorisation 最终用户才能工作，它将无法工作，但是这仍然适用于一些简单的情况。
P.S.: 你可以通过浏览器扩展实现一个变通方法来让这样的东西工作，但是我确定这不是你想要的。
不幸的是，这个问题的答案很复杂。随着 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 内容 injection/modification/blocking 最可靠和无缝的方法。
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 网络应用程序抓取网络应用程序的内容，并对其进行修改以删除脚本。本质上是在 JavaScript 中创建您自己的代理。此类 Web 应用程序（Any Origin、All Origins 等）允许您绕过跨域策略限制，但由于它们是第三方，您不能再假设任何 Web 应用程序的数据都是私有的。在应用程序与其父服务器之间正确通信任何数据传输的问题仍然存在。
总结
目前广泛支持的纯前端解决方案不可行。但是有很多方法可以给猫蒙皮，甚至可以有更多的方法来修改 iframe 的内容，而不管跨域限制。
内容安全策略看起来很有前途并且正是您所要求的，但目前它缺乏广泛的支持意味着它只能在非常小众的情况下使用。修改内容的反向代理可能需要大量配置，在这种情况下就像在 Hot Wheels 轨道上驾驶全尺寸半挂车，但可能会无缝运行。从转发代理修改内容更容易实现，但可能会中断与第三方应用程序的父服务器的通信。