content security policy implementation in nodejs / reactjs SPA? - node.js

Question

Greeting All ,
i have just started implementing CSP in my website development.
i have Nodejs/express server that serves react js with redux and react router 4
i have used create react app for frontend
i found that in nodejs there is a module called helmet and csp that i have implemented them
and i managed to get the response header as shown in the image below
but nothing happend in the frontend app unless i add the meta tag
<meta http-equiv="Content-Security-Policy" content=" frame-src 'none'">
by this meta tag i was able successfully not to load any iframe in the page but could not manage to do that without the tag
so here is my questions
is there a need for nodejs helmet module in my app ?
if so then how to integrate the nodejs helmet module with my react app
is using the meta tag of CSP in the index.html the preferred way to do it
any help is appreciated thanks

Answer 1

In your example, the header set by helmet: x-frame-options has the value 'SAMEORIGIN', in your meta tag it's 'none'. They just have different values, that's why the different behaviour.
Just change the config:
// ... code to create your express instance here
app.use(helmet({
frameguard: {
action: 'deny'
}
// other helmet settings...
}));
// other app middleware and starting express here...
Always use the HTTP headers rather than the meta tag. Meta tags are just DOM elements, hence can be tampered with. Not so easily with headers and by using headers you ask browsers to comply with your CSP.
RFC 7034:
Furthermore, X-Frame-Options must be sent as an HTTP header field and
is explicitly ignored by user agents when declared with a meta
http-equiv tag.