vite-react-csp
v1.1.5
Published
A npm package/plugin that generate Content Security Policy for vite react app. Fork of react-csp
Downloads
214
Maintainers
Readme
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
- Github: @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