gatsby-plugin-csp
Advanced tools
Content Security Policy (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 <head> of each page.
npm i gatsby-plugin-csp
or
yarn add gatsby-plugin-csp
// 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).
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.
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-csp`,
options: {
disableOnDev: true,
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
}
}
}
]
};
FAQs
Adds Content Security Policy to your Gatsby app.
The npm package gatsby-plugin-csp receives a total of 1,401 weekly downloads. As such, gatsby-plugin-csp popularity was classified as popular.
We found that gatsby-plugin-csp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.