https://github.com/maccuaa/vite-plugin-csp
Vite CSP / SRI Plugin for Node.js and Bun
https://github.com/maccuaa/vite-plugin-csp
Last synced: about 1 month ago
JSON representation
Vite CSP / SRI Plugin for Node.js and Bun
- Host: GitHub
- URL: https://github.com/maccuaa/vite-plugin-csp
- Owner: maccuaa
- License: mit
- Created: 2024-12-20T21:48:19.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-01-11T14:59:25.000Z (10 months ago)
- Last Synced: 2025-01-11T15:05:16.146Z (10 months ago)
- Language: TypeScript
- Homepage:
- Size: 153 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vite - vite-plugin-csp - Content Security Policy (CSP) for SPA. Automatically calculates asset hashes (SRI), detects Google Fonts. Support `Bun` and `Node.js` runtimes. (Plugins / Framework-agnostic Plugins)
- fucking-awesome-vite - vite-plugin-csp - Content Security Policy (CSP) for SPA. Automatically calculates asset hashes (SRI), detects Google Fonts. Support `Bun` and `Node.js` runtimes. (Plugins / Framework-agnostic Plugins)
README
# Content Security Policy Helpers
Packages for adding a Content Security Policy to your SPA applications:
| Library | Version |
| --------------------- | ---------------------------------------------------------------- |
| `vite-plugin-bun-csp` |  |
| `csp-bun-cli` |  |
## Features
- ✨ Automatically calculates Subresource Integrity (SRI) hashes of JavaScript and CSS assets and adds them to the meta Content Security Policy (CSP) directive in your HTML.
- 📚 Automatically detects and handles Google Fonts.
- 🏎 Fast and lightweight. Packages contain 0 dependencies.
## Documentation
- [Vite Plugin](https://github.com/maccuaa/vite-plugin-csp/tree/main/packages/vite-bun)
- [CLI](https://github.com/maccuaa/vite-plugin-csp/tree/main/packages/cli-bun)
## Library / Framework Specific Guidance
### Emotion CSS
If you are using the [Emotion](https://emotion.sh/) CSS library, which [MUI](https://mui.com/) uses by default, then you can add the SHA-256 hash of an empty string `'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='` to your CSP rather than setting `'unsafe-inline'` in your `style-src` directive.
```ts
generateCspPlugin({
policy: {
"style-src": ["'self'", "'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='"],
},
}),
```
Source: https://github.com/emotion-js/emotion/issues/2996#issuecomment-1440609591
#### Links
- https://web.dev/articles/strict-csp
- https://csp-evaluator.withgoogle.com/
- https://www.w3.org/TR/CSP3/
- https://html.spec.whatwg.org/multipage/semantics.html
- https://nuxt-security.vercel.app/advanced/strict-csp
- https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
- https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
## License
MIT