javascript - How to configure CSP-headers with expressnode.js? - Stack Overflow

admin管理员组

文章数量:1319001

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

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.

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();
});

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

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:*/*"

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>

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

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

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'));

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 :)

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

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.

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();
});

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

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:*/*"

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>

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

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

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'));

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 :)

• javascript
• node.js
• express
• http-headers
• content-security-policy

Share Improve this question Follow edited May 17, 2019 at 18:03 Majuskel asked May 17, 2019 at 17:54 MajuskelMajuskel 13111 gold badge11 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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:

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 :)

本文标签： javascriptHow to configure CSPheaders with expressnodejsStack Overflow