README
react-static-plugin-csp-meta-tags
This plugin adds a CSP meta tag to your html files, adding hashes for inline script and style tags. You also have the option to pass a custom policy in, which will be merged with the auto generated.
Installation
In an existing react-static site run:
$ yarn add -D react-static-plugin-csp-meta-tags
Then add the plugin to your static.config.js
:
export default {
plugins: [
[
'react-static-plugin-csp-meta-tags',
{
// example configuration
overwriteExisting: true,
hashingMethod: 'sha512'
}
]
]
};
Default policy
The default policy currently looks like this:
{
'base-uri': ["'self'"],
'object-src': ["'none'"],
'script-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"]
}
You can pass in your own policy and overwrite the default one.
Options
In your static.config.js
, you may optionally pass configuration options to the plugin.
overwriteExisting: boolean
Default value: false
Set to true to overwrite a, for whatever reason, already existing CSP meta tag.
hashExternal: boolean
Default value: false
Set to true to create hashes not just for inline script tags, but for external script files as well.
hashingMethod: 'sha256' | 'sha384' | 'sha512'
Default value: sha256
policy: object
With this you can pass in your own custom policy, which will overwrite the default policy. Note that you can pass in either a string or an array of strings to each key in the policy object.
crossorigin: 'anonymous' | 'use-credentials'
Default value: undefined
You may pass in an optional crossorigin attribute for the scripts tags which will have integrity
attributes appended to them. This is useful if your site is behind Basic Authorization, for example. By default, no crossorigin
attribute is added at all!
reportOnly: boolean
Default value: false
You may set this to true
to insert a Content-Security-Policy-Report-Only
instead of a Content-Security-Policy
meta tag.