违反内容安全策略指令

Question

在我的全栈项目(服务器端呈现)中，我使用一个简单的脚本标记将bundle.js文件包含在我的基本HTML文件中，但是在尝试呈现页面和使用JS功能时，它给出了违反内容安全策略的错误

这是我收到的错误

​

​

我在这里找到了几个关于堆栈溢出的解决方案：Refused to load the script because it violates the following Content Security Policy directive

然而，给定的解决方案似乎都不能解决这个问题。请告诉我如何解决这个问题

Answer 1

试试这个：

// Download helmet
npm install helmet

const helmet = require('helmet')

app.use(helmet());

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      "default-src": ["'self'"],
      "connect-src": ["'self'", "'unsafe-inline'"],
      "img-src": ["'self'", "data:"],
      "style-src-elem": ["'self'", "data:"],
      "script-src": ["'unsafe-inline'", "'self'"],
      "object-src": ["'none'"],
    },
  })
);

请添加更多代码，以便我可以为您提供更多帮助

Answer 2

我猜你甚至没有在你的项目中使用内容安全策略，并且非常惊讶地得到了相关的错误。

您的bundle.js创建了websocket连接(在8769行)，并向在服务器中没有路由的URL发出一些XMLHttpRequest()或fetch()请求(在7655行)。

对于不存在的页面(404未找到)，执行finalhandler，默认发布default-src 'self'策略(您使用旧软件的方式，默认是2019年5月之后的finalhandler uses default-src 'none' )。

你的请求掉到了404not found页面，其中没有请求的内容，而且所有的内容都被CSP default-src 'self'阻止了。

因此，您需要设置正确的静态路由，我认为here是您正确的主题。

PS:这是因为Express在默认情况下不提供根文件夹。它完全解决了favicon.ico被CSP锁在蓝天之外的问题。