Chrome是否违反了内容安全策略？

Question

我已经为Chrome和Firefox制作了浏览器扩展程序。 Firefox使用Web Extension APIs开发，因此这两个扩展程序之间的代码差异很小。 作为扩展程序中的重要功能，一些HTML元素通过内容脚本成为网页的一部分。 这也涉及加载托管在某些服务器上并通过https提供的图像。 现在，在Twitter和GitHub上运行扩展程序时，这些图像在Chrome中正常加载。 但是，有趣的是，在Firefox中，当相应的扩展程序在Twitter和GitHub上运行时，根本不会加载图像。 更有趣的是，Twitter在其响应头中设置的内容脚本策略禁止了该图像加载，因此Firefox的行为是正确的。 所以，我的问题基本上是：Chrome是否在这里违反了CSP？

附上Twitter设置的CSP-- https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://graph.facebook.com https://twitter.com 'unsafe-eval' https://.twimg.com https://api.twitter.com https://analytics.twitter.com https://publish.twitter.com https://ton.twitter.com https://syndication.twitter.com https://www.google.com https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com 'self'; frame-ancestors 'self'; font-src https://twitter.com https://.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://twitter.com https://.twimg.com https://ton.twitter.com blob: 'self'; connect-src https://graph.facebook.com https://.giphy.com https://.twimg.com https://pay.twitter.com https://analytics.twitter.com https://media.riffsy.com https://upload.twitter.com https://api.mapbox.com 'self'; style-src https://fonts.googleapis.com https://twitter.com https://.twimg.com https://translate.googleapis.com https://ton.twitter.com 'unsafe-inline' https://platform.twitter.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; object-src https://twitter.com https://pbs.twimg.com; default-src 'self'; frame-src https://staticxx.facebook.com https://twitter.com https://.twimg.com https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-static.ak.facebook.com 'self' https://donate.twitter.com; img-src https://graph.facebook.com https://.giphy.com https://twitter.com https://.twimg.com data: https://fbcdn-profile-a.akamaihd.net https://www.facebook.com https://ton.twitter.com https://.fbcdn.net https://syndication.twitter.com https://media.riffsy.com https://www.google.com https://stats.g.doubleclick.net https://*.tiles.mapbox.com https://www.google-analytics.com blob: 'self'; report-uri https://twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;

该代码块规定了脚本、字体、媒体、连接、样式、对象和图片的来源。其中包括Facebook、Google Analytics、Twitter等网站，以及自身网站。此外还规定了一些其他限制，如禁止使用eval()函数等。

请注意其中的“img-src”。还有一个困扰我的问题是，扩展程序在清单文件中也指定了自己的内容脚本策略。这两个策略如何共同发挥作用？

- discoverAnkit

Answer 1

如果扩展程序确实想要这样做，它们可以覆盖页面的 CSP，但是假设没有这样的响应头手术，页面的 CSP 仍然被大多数尊重。

我最近回答了有关扩展程序中的 CSP的问题，并在此部分进行复制：

扩展中有3个CSP在起作用：

- `content_security_policy` 指令仅适用于扩展自己的页面（例如后台页面）。如果未指定，则默认为 `script-src 'self'; object-src 'self'`，并且对其进行修改有一些限制。 - 内容脚本上下文不受此CSP的限制。`unsafe-eval` 是无限制的（因为您可以使用任意代码执行 `executeScript`），但是内联脚本和远程脚本限制不适用于内容脚本，因为： - 页面DOM中的任何脚本，无论是内联脚本还是 `` 标签，都在页面本身的上下文中执行，并受到页面本身的CSP的限制。有一个例外，向页面注入 `` 将绕过内联代码限制以进行立即执行。

请注意，这些都涉及到脚本。我不确定图像会受到何种影响。我不知道有哪些文档涵盖了这些内容。

总的来说，扩展可以覆盖某些 Web 安全功能，例如 CORS。

- Xan

---

是的。我在这里阅读了所有相关内容 - https://developer.chrome.com/extensions/contentSecurityPolicy#interactions - discoverAnkit

响应头手术？我们可以更改响应头吗？ - discoverAnkit

@ankitG chrome.webRequest.onHeadersReceived 可以重写 CSP 标头。 - Xan

这是非常强大的，因此也很危险。伴随着巨大的力量而来的是巨大的责任（和安装时的警告）。关键在于你如何使用它。有一些专门的扩展可以操作CSP作为它们的功能，这是非常好的。但是，如果您的扩展程序肆意覆盖CSP以提供无关的功能，那么这可能是鲁莽的过度杀伤。或者，也许这是它能够正常运行的唯一方式 - 但责任在你自己身上。 - Xan

我向您保证它可以工作并且您可以进行修改。至少在Chrome浏览器中是这样的。这里提供了一个示例链接：https://github.com/PhilGrayson/chrome-csp-disable/blob/master/background.js。 - Xan