【发布时间】：2020-10-12 15:12:51
【问题描述】：
我在 Firefox、Safari、IE11 和旧版 Edge 上收到以下错误。
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). 2 36bedd2677c04ba9cb34.js:5084:96245
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).
Error: An error occurred. See https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/errors.md#10 for more information.
在 localhost 上运行时，一切都适用于所有浏览器，但在发布时会引发上述错误。
样式组件错误是指安装了多个版本的样式组件。我确认所有版本都是相同的，它们都是由 lerna 管理的。我也尝试只安装一个顶级版本的软件包，但这也没有解决任何问题。
CSP 政策如下：
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https:; style-src 'none'; style-src-elem 'unsafe-inline' https:;">
鉴于这些是政策，该网站不应该始终有效吗？由于styled-components，它需要不安全的内联。
在用于运行 react-app 的 html 文件中还有少量内联代码/样式。
【问题讨论】：
-
不是真正的答案，而是：Chrome 规则！当我编写代码时，我只在 Chrome 上编写和测试它。如果有人说：“但我正在使用 ie！” （例如），我回答：“为什么？”和“Chrome 规则！”... :) 您可以运行浏览器检测，如果不是 Chrome 会说：“切换到唯一的浏览器：Chrome”... :) 我确定您必须使其适用于“其他“浏览器 - 以为你会从我的评论中得到笑声……
-
我同意上述观点。目的是在浏览器兼容的情况下显示使用更好浏览器的消息，但至少，firefox 应该可以工作，Edge 可以（因为它现在是基于 chromium 构建的）和 safari 不幸的是。
标签： javascript html cross-browser styled-components content-security-policy