CSP By App significantly cuts down on CSP policy management by specifying common APIs by name.
It doesn't implement CSP in node. It just significantly cuts down on:
- the amount of CSP research needed
- the amount of CSP management
For your app. For example:
var cspByApp = require('csp-by-app')
var basePolicy = {
defaultSrc: [CSP_SELF],
scriptSrc: [CSP_SELF],
styleSrc: [CSP_SELF, CSP_UNSAFE_INLINE],
fontSrc: [],
imgSrc: [CSP_SELF, 'data:'],
connectSrc: [CSP_SELF],
frameSrc: [],
reportUri: "/csp-violation",
reportOnly: true
}
var policy = cspByApp(basePolicy, ['twitter', 'mixpanel', 'googleFonts', 'stripe', 'typekit', 'ractive'])
Then use that policy with an existing node CSP implementation like Helmet or express-csp.
For example, using Express and Helmet:
var helmet = require('helmet');
app.use(helmet.contentSecurityPolicy(policy));
Included policies
This package itself knows the required CSP policies for:
twitter
Twitter oembed APImixpanel
MixpanelgoogleFonts
Google Fontsstripe
Striperactive
Ractivetypekit
Typekit
Official policies are used wherever they're made available, and all are tested in a production app.
Add more policies! Send a pull request to add more policies. Include a reference to an official policy if it exists, or state that there is no official policy if none exists.
Note
Some of these are just general notes about CSP, but you'll still find them useful
script-src
unsafe-inline
:
Avoiding use of You will likely need to move the content of inline scripts (<script>
tags without a src
) to a seperate <script src="">
tag on your server.
To include server variables in the browser without using inline JavaScript, make a non-executable <script>
tag, eg:
In your server-side template:
{{# serverVars }}
<script class="server-vars" type="application/x-configuration">
{{{ . }}}
</script>
{{/ serverVars }}
Then in a script tag on your server:
var serverVarsElement = document.getElementsByClassName('server-vars')[0]
if ( serverVarsElement ) {
window.serverVars = JSON.parse(serverVarsElement.textContent);
}
Extra meta tag needed for Twitter oembed API
For Twitter, you'll also need this meta tag - see https://dev.twitter.com/web/embedded-tweets/faq:
<meta name="twitter:widgets:csp" content="on">
TODO
simple-csp currently produces a merged, sorted, non-redundant policy.
It would be clever to merge eg 'example.com' and '*.example.com' intelligently.
However all CSP options for apps already use explicit domains.