Heroku 上 ReactJS 应用程序中的内容安全策略答案

【问题标题】：Content Security Policy in ReactJS app on HerokuHeroku 上 ReactJS 应用程序中的内容安全策略
【发布时间】：2022-01-08 17:18:55
【问题描述】：

现在我遇到了这样一个耗时的错误。我的 CSP 策略包含错误，我试图删除它们，但都是徒劳的。它是一个在 expressjs 应用程序下运行在 Heroku 上的 reactjs。所以我的文件夹结构是；

ExpressApp
       |-client_folder
           |-Reactjs-App

我使用react-csp npm-package 来设置 CSP 策略，并且实际上确认它在 heroku post-build 上编写策略。 React-csp 告诉我们创建一个 csp.json 文件，我的看起来如下。

{
    "prod": {
            "default-src": "'self'", 
            "script-src" : ["'self'"],
            "font-src":["'self'", "*" ],
            "style-src": [ "'self'", "https://*.googleapis.com", "'unsafe-line'" ],
            "connect-src": ["'self'",  "*"],
            "img-src" : ["'self'",  "*"]
        }
}

在我使用 git push heroku master 上传应用程序并访问该站点后，我看到它加载时没有任何样式。当我检查控制台时，我看到了这个快照。我在我的项目中使用Material-UI 以及它的所有字体，但它似乎无法在 CSP 策略中包含我需要的所有内容。我真的需要帮助，因为我已经被这个问题困扰了一段时间了

【问题讨论】：

标签： reactjs express heroku material-ui content-security-policy

【解决方案1】：

是unsafe-inline 不是unsafe-line

【讨论】：

我刚刚尝试过，但控制台中仍然出现错误。
我尝试的基本上是将“'unsafe-line'”更改为“unsafe-line”。所以这是“style-src”：[“'self'”，“https://*.googleapis.com”，“unsafe-line”]，但我仍然得到相同的错误列表
是unsafe-inline 不是unsafe-line
@Alghazali505 你真的认为发布一个完全错误的答案是正确的，然后根据我的答案spoof it，使用你的答案更早的事实吗？在我指出你的回答绝对错误之后。
@Alghazali505 这不是真的。在 8:21，SO 向您展示了一条关于发布我的答案的消息，这是一个内置的 SO 功能。正如您的评论所示，您仅在 8 点 25 分“注意到错误”，在我指出您给出错误答案的回答之后。好吧，即使你在 cmets 中帮助了 Hakim Marley，但问题是：你为什么通过重复我的答案来欺骗你的真实答案？

【解决方案2】：

您显示的控制台中的错误表明您在 style-src 指令中使用了错误的令牌 'unsafe-line'。换成'unsafe-inline'。

请注意，'self' 和 'unsafe-inline' 必须使用单引号。

【讨论】：