内容安全策略阻止将浏览器扩展样式注入到 firefox 中的页面中

Question

我正在开发一个扩展，它将使用内容脚本将一些元素注入到网页中。

我使用react/webpack来构建扩展。但是当我尝试使用该扩展时，在一些网站（例如 secure.login.gov）中，样式没有被注入。我在控制台中收到以下错误。

Content-Security-Policy：页面的设置阻止应用内联样式 (style-src-elem)，因为它违反了以下指令：“style-src 'self' https://secure.login.gov '随机数-83e27ef5530a894f4f0ee9c5323940ea'

在 chrome/edge 中我使用清单 v3 没有问题，而在 Firefox 中我使用清单 v2。

我尝试了此处的说明https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy。但这看起来将应用于扩展页面而不是实际的网页

对此的任何帮助将不胜感激。

Answer 1

答案是没有答案。 CSP 不应应用于扩展，这是 Firefox 中长期存在的错误。这不是 v2 与 v3 的问题。这是 Firefox 与 Chrome 的对比。 （FWIW，我也感到痛苦。）

页面 CSP 不应应用于内容脚本

覆盖内容脚本的页面 CSP

当您将 CSP 上的 MDN 浏览器扩展页面解释为扩展适用于自身的 CSP（即保护扩展完整性）时，您是正确的。但是，由于该错误，网页 CSP 也适用于扩展。

在您的示例中，样式必须从页面源（“self”）加载或从 secure.login.gov 加载或具有指定的随机数。

当随机数脚本或样式标签加载到 DOM 中时，随机数将被剥离，因此恶意代码（和善意的开发人员）无法从 DOM 获取随机数。我还没有尝试过，但您应该能够侦听响应标头以解析 CSP 标头以获取随机数，然后将该随机数包含在要插入的标签中。这不是一个在任何地方都适用的解决方案，因为不同的站点可能有不同的限制性 CSP。

我刚刚在 secure.login.gov 的内容上下文中尝试的是插入一个没有随机数的标签，让 CSP 违规找到随机数的值，然后使用该随机数再次尝试。就这么多了。

// nothing fancy
( function () {
  var
    style = document.createElement( 'style' );

  document.head.appendChild( style ); // fails
  style.nonce = '03ab2ecf4cdea6878b43dfe91fbfb0db';
  document.head.appendChild( style ); // succeeds
} () );