Vite Plugin CSP Guard
Introducing the Vite Plugin CSP Guard, your ultimate solution for effortlessly implementing a Content Security Policy (CSP) in your Vite-powered Single Page Application (SPA). CSPs are crucial for protecting your site against XSS attacks, but setting them up correctly can be complex and time-consuming. Our plugin eliminates these challenges with a straightforward, effective approach.
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. - Automated Hashing: Unlike traditional methods that rely on nonces (which aren't feasible for SPAs), we support hashing.
- Real-Time CSP Validation: Avoid the risk of shipping code that gets blocked in production. Our plugin runs your CSP in Vite dev mode, providing immediate feedback and ensuring your CSP policies are correct before deployment.
- 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