When building modern web applications with Nuxt, security should never be an afterthought. One of the most effective ways to protect your app from malicious attacks—especially Cross-Site Scripting (XSS)—is to implement a Content Security Policy (CSP).
In this article, we’ll explore:
- What Content Security Policy is and why it matters
- How to manually configure CSP in Nuxt
- How to enable CSP using the Nuxt Security module
- Upcoming first-class CSP support in Nuxt core
Enjoy!
🤔 What Is Content Security Policy (CSP)?
Content Security Policy (CSP) is an HTTP response header that defines where the browser is allowed to load resources from. Instead of trusting everything, you specify rules such as:
- Which domains can execute JavaScript
- Which images can be displayed
- Whether inline scripts are allowed
- Whether frames and iframes can load external sites
- Whether dynamic eval-like operations are permitted
For example:
Content-Security-Policy: default-src 'self'; script-src 'self';
If a malicious attacker injects a
