使用Helmet中间件后下拉菜单失效 控制台报CSP脚本加载错误

默认配置下调用app.use(helmet())时，Helmet会自动为站点配置严格的内容安全策略（CSP）响应头，其中默认的script-src规则仅允许加载当前站点同域（即'self'）下的脚本资源。你引用的Bootstrap交互脚本托管在jsdelivr CDN域名下，属于外域资源，会被默认CSP规则直接拦截，导致Bootstrap的下拉菜单相关逻辑没有加载执行，控制台抛出的就是对应的CSP拦截错误。

优先推荐通过自定义CSP规则放行你用到的可信CDN资源，既保留Helmet的安全防护能力，又不影响正常功能运行：

• 修改Helmet的CSP配置，将你用到的CDN域名加入对应资源类型的允许列表，示例配置如下：

const helmet = require('helmet');

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        "script-src": [
          "'self'", // 保留默认的同域脚本放行规则
          "https://cdn.jsdelivr.net" // 放行jsdelivr CDN的脚本资源
        ],
        // 如果同时通过CDN加载Bootstrap的样式、字体资源，需要同步添加对应规则
        "style-src": ["'self'", "'unsafe-inline'", "https://cdn.jsdelivr.net"],
        "font-src": ["'self'", "https://cdn.jsdelivr.net"]
      }
    }
  })
)

注意：Bootstrap默认会使用部分内联样式，因此style-src配置中添加了'unsafe-inline'放行内联样式，如果你的项目已经将所有样式抽离为独立外部文件，可以根据实际情况移除该配置，进一步提升安全性。

• 如果你暂时不需要CSP防护（生产环境强烈不推荐该操作），可以直接关闭Helmet的CSP模块：

const helmet = require('helmet');

app.use(
  helmet({
    contentSecurityPolicy: false
  })
)

配置修改完成后重启服务，清空浏览器缓存后刷新页面验证即可。

内容的提问来源于stack exchange，提问作者Adildo