如何使用express/node.js配置CSP标头？

Question

我尝试让标签在express/node.js环境中工作，但不知何故它们总是被内容安全策略阻止。

\n\n

我已经尝试使用多个节点模块，例如express-csp-header或csp-header，但它们都没有成功。所以我又回到了“正常”的声明。

\n\n

这是我的 server.ts 脚本的顶部：

\n\n

app.use((req: any, res: any, next: any) => {\n    res.set({\n        "Access-Control-Allow-Origin": "*",\n        "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",\n        "Access-Control-Allow-Methods": "GET, POST, PATCH, DELETE, OPTIONS",\n        "Content-Security-Policy": "default-src *",\n        "X-Content-Security-Policy": "default-src *",\n        "X-WebKit-CSP": "default-src *"\n    })\n    next();\n});\n

\n\n

它由 webpack 编译，node 运行在 localhost 上，端口为 3000。

\n\n

它不适用于仅“default-src *”或类似的。我什至尝试单独声明每种内容类型，例如

\n\n

"default-src * \'self\' \'unsafe-inline\' \'unsafe-eval\'; script-src * \'self\' \'unsafe-inline\' \'unsafe-eval\' localhost:*/*"\n

\n\n

这是 html 页面的 body 标记之后的脚本部分：\n（将其放在 head 部分也没有改变任何内容）

\n\n

<script src="scripts/loginFunctions.js"></script>\n

\n\n

也许有一些重要的事情：\nHTML 输出由 squirrelly（express 的模板引擎）提供

\n\n

app.get(\'/\', (req: any, res: any) => {\n    res.render(\'login\');\n})\n

\n\n

使用元标记在 head-section 中声明标头也不起作用。\n我想要引用的脚本的原始文件夹由 Express 提供服务：

\n\n

app.use(express.static(\'public\'));\n

\n\n

奇怪的是，这并没有发生在我的工作环境中，一切都按预期进行。\n以下是来自浏览器 (Firefox 66.0.5) 控制台的错误消息：

\n\n

Loading failed for the <script> with source \xe2\x80\x9chttp://localhost:3000/scripts/loginFunctions.js\xe2\x80\x9d.\nContent Security Policy: The page\'s settings blocked the loading of a resource at http://localhost:3000/scripts/loginFunctions.js ("script-src").\nContent Security Policy: The page\'s settings blocked the loading of a resource at inline ("script-src").\n

\n\n

是的，我知道风险，但这将一直在本地运行，即使有一天会部署......我只是希望在开发过程中一切顺利运行（或根本运行）。\n有关如何运行的任何帮助解决这个问题将不胜感激:)

\n

Answer 1

好吧，我终于自己弄清楚了。这是我的具体问题的答案，以防万一有人遇到同样的问题：

似乎插件 NoScript 在通过脚本或<meta>HTML 文件的标记应用它们后添加了阻止标头条目。禁用它解决了问题:)