如何正确设置 hellem.js 来解决 CSP 问题？

Question

当我启动 Express 应用程序时，浏览器会出现以下错误：

Refused to load the script 'http://localhost:1337/main.js' because it violates
the following Content Security Policy directive: "script-src unsafe-eval".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

在我的 index.js 文件中，我已经像这样设置了头盔：

// Set Content Security Policies
const scriptSources = ["'self'", "'unsafe-inline'", "'unsafe-eval'"];
const styleSources = ["'self'", "'unsafe-inline'"];
const connectSources = ["'self'"];

app.use(
  helmet.contentSecurityPolicy({
    defaultSrc: ["'self'"],
    scriptSrc: scriptSources,
    scriptSrcElem: scriptSources,
    styleSrc: styleSources,
    connectSrc: connectSources,
    reportUri: '/report-violation',
    reportOnly: false,
    safari5: false  
  })
);
app.use(helmet({
  contentSecurityPolicy: false,
}));

我的 index.html 正在加载到 .js 文件中，如下所示：

<script type="module" src="./main.js"></script>

这是我的 GitHub 存储库：https ://github.com/jgonzales394/fsn.pw

Answer 1

这里是头盔维护员。发生这种情况是因为您的指令需要嵌套在directives属性下。

例如：

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: scriptSources,
      // ...
    },
  })
)