违反内容安全政策指令答案

【问题标题】：Violation of Content Security Policy directive违反内容安全政策指令
【发布时间】：2021-03-14 09:10:20
【问题描述】：

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

这是我收到的错误

我在 Stack Overflow 上找到了几个解决方案：Refused to load the script because it violates the following Content Security Policy directive

但是，给定的解决方案似乎都无法解决该问题。请告诉如何解决这个问题

【问题讨论】：

标签： javascript node.js express compiler-errors content-security-policy

【解决方案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'"],
    },
  })
);

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

【讨论】：

【解决方案2】：

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

问题是您的 bundle.js 创建 websocket 连接（在第 8769 行）并向在服务器中没有路由的 URL 发出一些 XMLHttpRequest() 或 fetch() 请求（在第 7655 行）。
对于不存在的页面（404 Not found），执行finalhandler，默认发布default-src 'self'策略（顺便说一下你使用旧软件的方式，finalhandler在2019年5月之后usesdefault-src 'none'默认）。

您的请求属于 404 Not found 页面，该页面没有请求的内容，另外所有内容都被 CSP default-src 'self' 阻止。

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

PS：事实上，Express 默认不提供根文件夹。 Here 解决了与 Favicon.ico 被 CSP 从蓝天锁定的完全相同的问题。

【讨论】：