Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
strict-csp-html-webpack-plugin
Advanced tools
A webpack plugin that adds a hash-based strict CSP to help protect your site against XSS attacks.
Weekly downloads
Readme
⚠️ This is experimental. Make sure to check what's not supported. Keep in mind that the Report-Only
mode is not supported here since the policy is added via a meta tag (Content-Security-Policy-Report-Only
is unfortunately not supported in meta tags).
💡 Not using webpack? Head over to strict-csp instead. It's the bundler-agnostic library this webpack plugin is based on, and it enables you to easily set a strict CSP.
Cross-site scripting (XSS)—the ability to inject malicious scripts into a web application—has been one of the biggest web security vulnerabilities for over a decade.
strict-csp-html-webpack-plugin helps protect your single-page application against XSS attacks. It does so by configuring a strict Content-Security-Policy (CSP) for your web application.
A strict CSP, added in the form of an HTML meta
tag, looks as follows:
<meta
http-equiv="Content-Security-Policy"
content="script-src 'sha256-3uCZp...oQxI=' 'strict-dynamic'; style-src 'self' 'unsafe-inline'">
</meta>
npm i --save strict-csp-html-webpack-plugin@beta
(or with yarn
)
In your site's or app's webpack.config.js
:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StrictCspHtmlWebpackPlugin = require('strict-csp-html-webpack-plugin');
module.exports = function (webpackEnv) {
return {
// ...
plugins: [
new HtmlWebpackPlugin(
Object.assign(
{}
// ... HtmlWebpackPlugin config
)
),
new StrictCspHtmlWebpackPlugin(HtmlWebpackPlugin),
],
};
};
⚠️ If you have a React app created with create-react-app, you'll need to eject
in order to configure and use this plugin (because you need access to the webpack config).
meta
HTML tag has been added to the application's index.html
, and that one inline script now loads all scripts.✨ Your app is now protected from many XSS attacks.
By default, strict-csp-html-webpack-plugin will set up a valid, strict, hash-based CSP.
You can use additional options to configure the plugin:
Option | Default | What it does |
---|---|---|
enabled | true | When true , activates the plugin. |
enableTrustedTypes | false | When true , enables trusted types for additional protections against DOM XSS attacks. |
enableUnsafeEval | false | When true , enables unsafe-eval in case you cannot remove all uses of eval() . |
A CSP offers an extra layer of security (also called "defense-in-depth" technique) to mitigate XSS attacks. It's not a replacement for properly escaping user-controlled data and sanitizing user input.
Now, this plugin sets a hash-based strict CSP. While this does remove several common XSS attack surfaces, it doesn't guarantee that your application is XSS-free.
To cover most of the XSS attack surface, we recommend to also enable Trusted Types (DOM XSS).
This plugin is best-suited for use in single-page applications that are served statically. If you are rendering HTML on the server-side, you will also have to consider stored and reflected XSS. In this case we recommend using a nonce-based strict CSP instead.
This plugin strict-csp-html-webpack-plugin focuses on one thing: it mitigates XSS vulnerabilities. It does so by setting up a strict CSP, that is, an efficient defense-in-depth mechanism against XSS attacks. It automatically sets up a secure CSP and frees you from manual configurations.
csp-html-webpack-plugin on the other hand, has a numbers of options to choose from. If you're using a CSP for other purposes than XSS mitigation, check out csp-html-webpack-plugin. Note that at the moment, static nonces risk making csp-html-webpack-plugin's CSP bypassable, though this may be resolved in the future.
*An allowlist CSP looks as follows: default-src https://cdn.example https://site1.example https://site2.example;
.
It depends.
If you're using your allowlist CSP purely to load scripts coming from a certain origin, you can keep using it.
But if you're relying on your allowlist CSP for XSS protection: migrate to the more secure strict CSP approach, and consider using this plugin to help you do so.
Allowlist-based CSP are not recommended anymore for XSS protection, because don't efficiently protect sites against XSS attacks: research has shown that they can be bypassed. 🥲 They're also harder to maintain!
Instead, strict CSPs are now recommended, because they're both more secure and easier to maintain than allowlist-based CSPs.
This plugin automatically adds a strict CSP to your application.
See issue #15.
SRI can be used to ensure the integrity of scripts, e.g. to protect your site in case your CDN gets compromised. However, SRI will not mitigate XSS caused by an injection vulnerability in your own site.
A strict hash-based CSP allows certain scripts based on their hash. However, Firefox (bug) and Safari (bug) do not support hashes for externally-sourced scripts⏤only for inline scripts. Because this plugin aims at setting a CSP that helps protect your users in all browsers, it first transforms your externally-sourced scripts into an inline script.
strict-csp-webpack-plugin uses the strict-csp custom library to form a strict CSP and hooks into HtmlWebpackPlugin
to set up this CSP as a meta
HTML tag.
Learn more about what the strict-csp library exactly does here.
TL;DR: this library automates the steps to add a hash-based strict CSP to your site.
FAQs
A webpack plugin that adds a hash-based strict CSP to help protect your site against XSS attacks.
The npm package strict-csp-html-webpack-plugin receives a total of 1,297 weekly downloads. As such, strict-csp-html-webpack-plugin popularity was classified as popular.
We found that strict-csp-html-webpack-plugin 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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.