Skip to content
A npm package/plugin that generates Content Security Policy for create-react-app without eject or rewired.
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
src
.gitattributes
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
contributing.md
index.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

Welcome to react-csp 👋

Package Quality npm version Documentation Maintenance License: MIT

A npm package/plugin that generates Content Security Policy for create-react-app without eject or rewired.

🏠 Homepage

Install

npm install react-csp --save-dev
Or
npm install react-csp -g

Prerequisite

  1. Make sure you have nodejs 8+ installed.
  2. Your react is generated with create-react-app
  3. index.html should be located in public/index.html

Usage

Create a file named either csp.json or csp.js in the root directory of your project.

React folder structure:

root:
  csp.js
  .gitignore
  package.json
  public/index.html
  src/index.js
  rest of the files...

The content in the file should be similar to the following:

csp.js

module.exports = {
  dev: {
  "default-src": ["'self'"],
  "style-src": [
    "'self'",
    "https://*.google.com",
  ]
  },
  prod: {
  "default-src": "'self'",  // can be either a string or an array.
  "style-src": [
    "'self'",
    "https://*.facebook.com",
  ],
  "connect-src": [
    "'self'",
    "https://mybackend.com"
  ]
  }
}

Or csp.json

{
  dev: {
  "default-src": ["'self'"],
  "style-src": [
    "'self'",
    "https://*.google.com",
  ]
  },
  prod: {
  "default-src": "'self'",  // can be either a string or an array.
  "style-src": [
    "'self'",
    "https://*.facebook.com",
  ],
  "connect-src": [
    "'self'",
    "https://mybackend.com"
  ]
  }
}

For more config, please refer to MDN.

For dev environment:

Run react-csp dev in the command line.

For prod environment:

Run react-csp prod in the command line.

The recommented approach is to put the following in your package.json so that CSP in only generated when deploying to production/staging:

{
  "scripts": {
    "build": "react-csp dev && react-scripts build"
  }
}

Run tests

npm run test

Author

👤 YIZHUANG

Show your support

Give a ⭐️ if this project helped you!


This Project including README, LICENSE, package.json, contributing etc was generated with ❤️ by git-repo-npm-bootster

You can’t perform that action at this time.