使用 "Content-Security-Policy" 时 chrome 控制台中的异常

Question

我在我的网页上使用 Content-Security-Policy:default-src 'self' header。

当我在启用 "Grammarly" chrome 扩展名的情况下加载此页面时，Chome 在控制台中抛出错误：

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAIt0ABEAAAABQDwAAQABAAAAAAAAAAAAAAAAAAAAA…CwKGBmIIpVWLACJWGwAUVjI2KwAiNEswkKAwIrswsQAwIrsxEWAwIrWbIEKAZFUkSzCxAEAisA' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

我认为其他插件也可能发生这种情况。

你使用什么策略？

在控制台看到错误的页面是一种糟糕的体验。用户不会关心这是实际的页面问题还是他们 "loved extension"。

据我所知，这个 header 没有被广泛使用。

Answer 1

策略是保持原样。用户很少阅读控制台甚至打开开发工具。您需要保持 CSP 处于启用状态，这样嵌入和扩展程序就不会从您的网站泄露用户信息，并声称这些信息来自您的网站。

您可以通过 window.performance.getEntriesByType("resource") 查找请求并查找您知道自己没有创建的资源（例如 CSP 报告）

来主动提醒用户存在 CSP 违规行为

Answer 2

添加font-src以使用data:，例如：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data:;">

如果您使用 CDN，请根据需要添加，例如对于 fonts.gstatic.com:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">

更多示例在 https://content-security-policy.com/

使用 "Content-Security-Policy" 时 chrome 控制台中的异常

Exceptions in the chrome console when "Content-Security-Policy" is used

google-chrome

google-chrome-extension

content-security-policy