Skip to content
A Gatsby plugin which adds strict Content Security Policy to your project.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Adding reportOnly option May 21, 2019
.babelrc initial commit Feb 18, 2019
.gitignore initial commit Feb 18, 2019
.npmignore initial commit Feb 18, 2019
LICENSE Create LICENSE Feb 21, 2019 Remove UTMs from link Jun 30, 2019
index.js initial commit Feb 18, 2019
package-lock.json 1.1.3 Jun 30, 2019
package.json 1.1.3 Jun 30, 2019


Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware.

gatsby-plugin-csp by default creates strict policy, generates script and style hashes then adds Content-Security-Policy meta tag to the <head> of each page.


npm i gatsby-plugin-csp


yarn add gatsby-plugin-csp

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-csp`]

Default Policy:

base-uri 'self';
default-src 'self';
script-src 'self' 'sha256-iF/...GM=' 'sha256-BOv...L4=';
style-src 'self' 'sha256-WCK...jU=';
object-src 'none';
form-action 'self';
font-src 'self' data:;
connect-src 'self';
img-src 'self' data:;

sha256 for every inline script and style is generated automatically during the build process and appended to its directive (script-src or style-src).


Strict CSP can break a lot of things you use on your website, especially 3rd party scripts like Google Analytics. To allow your 3rd party scripts running, you can adjust the policy through the plugin options.

// In your gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-plugin-csp`,
      options: {
        disableOnDev: true,
        reportOnly: false, // Changes header to Content-Security-Policy-Report-Only for csp testing purposes
        mergeScriptHashes: true, // you can disable scripts sha256 hashes
        mergeStyleHashes: true, // you can disable styles sha256 hashes
        mergeDefaultDirectives: true,
        directives: {
          "script-src": "'self'",
          "style-src": "'self' 'unsafe-inline'",
          "img-src": "'self' data:"
          // you can add your directives or override defaults

Further reading

You can’t perform that action at this time.