Socket
Book a DemoInstallSign in
Socket

react-csp

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-csp

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

1.1.3
latest
Source
npmnpm
Version published
Weekly downloads
2K
-26.43%
Maintainers
1
Weekly downloads
 
Created
Source

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

  • Make sure you have nodejs 8+ installed.
  • Your react is generated with create-react-app
  • 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

Keywords

Cli tool

FAQs

Package last updated on 03 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.