如何使用express / node.js配置CSP标头？ [英] How to configure CSP-headers with express/node.js?

问题描述

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

I try to get the tags working in an express/node.js environment but somehow they always get blocked by the content security policy.

我已经尝试使用多个诸如express-csp-header或csp-header之类的节点模块，但没有一个能解决问题。所以我回到了正常声明。

I already tried using multiple node-modules like express-csp-header or csp-header but none of them did the trick. So I went back to 'normal' declaration.

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

This is at the top of my server.ts script:

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

由webpack编译的节点运行在本地主机上，端口为3000。

Which gets compiled by webpack, node is running on localhost with port 3000.

它仅与 default-src *或类似版本不兼容。我什至尝试自行声明每种内容类型，例如

It didn't work with just "default-src *" or similar. I even tried to declare every content type on its own, e.g.

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

以下是html页面的body标记之后的脚本部分：
（将其放在头部也没有任何改变）

Here is the script part after the body tag of the html page: (placing it in the head section didn't change something either)

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

也许重要的事情：
HTML输出由squirrelly提供（express的模板引擎）

Maybe something important: The HTML output gets served by squirrelly (template engine for express)

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

在标题中声明标题-带有元标记的部分也不起作用。
我要引用的脚本的原始文件夹由express提供：

Declaring the header in the head-section with meta tags also didn't work. The origin folder of the script on which I want to refer gets served by express:

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

奇怪的是，这在我的工作环境中没有发生，在此环境下一切正常。
这是我从浏览器（Firefox 66.0.5）控制台发出的错误消息：

Strange thing is that this didn't occure on my work environment where everything worked as expected. Here are my error messages from the browser's (Firefox 66.0.5) console:

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

是的，我知道存在的风险，但这将始终在本地运行，即使它将有一天部署...我只希望在开发过程中一切都运行平稳（或完全运行）。
关于解决此问题的任何帮助将不胜感激：）

And yes I'm aware about the risks but this will be running local all the time and even if it will deploy some day... I just want everything running smooth (or run at all) during development. Any help on how to fix this will be appreciated :)

推荐答案

好，我终于在我的计算机上弄清楚了拥有。这是我的特定问题的答案，以防万一有人遇到相同的问题：

Ok, I finally figured it out on my own. Here is the answer for my specific problem, just in case somebody runs into the same problem:

似乎Noon插件在被应用后添加了阻塞头条目通过脚本或在HTML文件的< meta> 标记中。禁用它可以解决问题：）

It seems that the addon NoScript was adding the blocking header entries after they get applied by script or in the <meta> tag of the HTML file. Disabling it fixed the issue :)

这篇关于如何使用express / node.js配置CSP标头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！