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

Question

现在我运行陷入如此耗时的错误。我的 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 策略中需要的所有内容。我真的需要帮助，因为我已经被这个问题困扰了一段时间

Answer 1

是unsafe-inline不是unsafe-line

Answer 2

您在控制台中显示的错误表示您在 style-src 指令中使用了错误的标记 'unsafe-line'。更改为 'unsafe-inline'。

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

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

Content Security Policy in ReactJS app on Heroku

heroku

express

content-security-policy

reactjs

material-ui