https://github.com/bejamas/gatsby-plugin-csp

A Gatsby plugin which adds strict Content Security Policy to your project.
https://github.com/bejamas/gatsby-plugin-csp

content-security-policy csp gatsby-plugin gatsby-plugin-csp

Last synced: 2 months ago
JSON representation

A Gatsby plugin which adds strict Content Security Policy to your project.

• Host: GitHub
• URL: https://github.com/bejamas/gatsby-plugin-csp
• Owner: bejamas
• License: mit
• Created: 2019-02-18T09:19:00.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T19:21:35.000Z (almost 2 years ago)
• Last Synced: 2024-09-19T04:38:34.093Z (4 months ago)
• Topics: content-security-policy, csp, gatsby-plugin, gatsby-plugin-csp
• Language: JavaScript
• Homepage:
• Size: 662 KB
• Stars: 38
• Watchers: 5
• Forks: 15
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gatsby-plugin-csp

[Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/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 `` of each page.

## Install

`npm i gatsby-plugin-csp`

or

`yarn add gatsby-plugin-csp`

## How to use

```javascript

// 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`).

## Options

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.

```javascript

// 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' www.google-analytics.com",

          "style-src": "'self' 'unsafe-inline'",

          "img-src": "'self' data: www.google-analytics.com"

          // you can add your directives or override defaults

        }

      }

    }

  ]

};

```

## Further reading

- [Improving Security of Gatsby Websites and Apps by Implementing a Strict CSP](https://bejamas.io/blog/content-security-policy-gatsby-websites/)