react-csp
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

    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"
      }
    }
    

    Custom file name

    react-csp dev --filename=any.html or react-csp dev --f=any.html

    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

    Install

    npm i react-csp

    DownloadsWeekly Downloads

    656

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    33.8 kB

    Total Files

    26

    Last publish

    Collaborators

    • yizhuang