头盔中间件禁用下拉操作，并在控制台中创建错误。

Question

为什么当我将头盔中间件添加到我的应用程序中时，下拉菜单停止工作，并在控制台中得到以下错误：

Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我就是这样把头盔添加到我的应用程序中的：

const helmet = require('helmet');
...
app.use(helmet())

Answer 1

头盔维修工在这里。

之所以会发生这种情况，是因为有一种叫做内容安全策略()的东西，在默认情况下它会设置头盔。为了解决您的问题，您需要配置头盔的CSP。

MDN有一个关于CSP的好文档。是我推荐的背景读物。然后，看看头盔自导，看看如何配置它的CSP组件。

为了给出一些针对这个问题的帮助，让我们看一看您看到的一个错误：

Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

此错误告诉您，CSP的script-src指令不允许JavaScript从cdn.jsdelivr.net加载，因此被阻塞。

有几种方法可以解决这个问题：

1. 更新您的CSP以允许从此域加载JavaScript。你会做这样的事 app.use(头盔({ contentSecurityPolicy：{ useDefaults: true，指令：{ "script-src"：“self”，"cdn.jsdelivr.net"，} )；
2. 重构您的应用程序，以避免从该域加载JavaScript。可能不可能，但这是一个可用的解决方案。
3. 禁用CSP。这是最危险的选择，所以我不推荐。 app.use(头盔({ contentSecurityPolicy: false，} )；

总之:要解决你的问题，你需要告诉头盔配置你的CSP。