Vite Plugin CSP Guard
Simplify CSP setup for your Vite SPA with Vite Plugin CSP Guard! Say goodbye to the hassle of managing Content Security Policies and hello to an easy way to protect your app from XSS attacks.
Why Choose Vite Plugin CSP Guard?
- Effortless Integration: Simply declare your CSP inside your
vite.config.tsfile and you're ready to go. No complex setup, no hassle. - Good DX: Avoid the risk of shipping code that gets blocked in production. Our plugin runs your CSP in Vite dev mode.
- SRI (opens in a new tab) Support: More security for the code you ship
- Designed for SPAs: Tailored specifically for Single Page Applications, our plugin addresses the unique challenges they present.
Supported Technologies
Here is a quick overview of the technologies we support, categorized by the level of configuration required:
Frameworks/Libraries
| Framework/Library | Support Level | Notes |
|---|---|---|
| React | ✅ Out of the Box | |
| Vue | ⚙️ Small Extra Config | Requires outlierSupport: ["vue"] in config |
| Svelte | ✅ Out of the Box | |
| Solid | ✅ Out of the Box | |
| Quik | ❌ Not Supported | We are actively working on a solution for this. |
| Lit | ❌ Not Supported | |
| Remix | ❌ Not Supported | |
| Remix SPA Mode | ❌ Not Supported | We are working on a solution for this. |
| Nuxt (Vue) | ❌ Not Supported | |
| Astro | ❌ Not Supported |
CSS Solutions
| CSS Solution | Support Level | Notes |
|---|---|---|
| CSS | ✅ Out of the Box | |
| Tailwind | ⚙️ Small Extra Config | Requires outlierSupport: ["tailwind"] in config |
| SCSS | ⚙️ Small Extra Config | Requires outlierSupport: ["scss"] in config |
| SASS | ⚙️ Small Extra Config | Requires outlierSupport: ["sass"] in config |
| LESS | ⚙️ Small Extra Config | Requires outlierSupport: ["less"] in config |
| STYLUS | ⚙️ Small Extra Config | Requires outlierSupport: ["stylus"] in config |
| Emotion | ⚠️ Partial Support | Read about this here |
| MUI | ⚠️ Partial Support | Read about this here |
| Styled Components | ⚠️ Partial Support | Read about this here |
Getting Started
Ready to secure your SPA with ease? Follow our comprehensive guide to get started:
Advice for Multi Page Applications (MPAs)
While our plugin is specifically designed for Single Page Applications (SPAs) and does not support Multi Page Applications (MPAs) due to architectural differences, we understand that developers may still need guidance for implementing CSPs in MPAs.
Our MPA guide is a good place to start:
Creating your policy
Need some help building your CSP policy? Check out our guide for creating a custom policy