Vue Academy · Lesson

Content Security Policy (CSP) with Vue

CSP headers, nonce-based scripts, hash-based policies, Vite CSP configuration.

Content Security Policy (CSP) with Vue is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is CSP

Content Security Policy is an HTTP response header that tells the browser which sources of scripts, styles, images, and connections are allowed. It is a strong second line of defense against XSS - even injected scripts are blocked if their source is not allowed.

The Header

CSP is delivered via the Content-Security-Policy response header. Each directive lists allowed sources for a resource type.

Content-Security-Policy: default-src 'self'; script-src 'self';

Restricting Script Sources

The script-src directive controls where scripts may load from. Limiting it to 'self' blocks inline and third-party scripts an attacker might inject.

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

Avoiding unsafe-inline

'unsafe-inline' permits inline scripts and event-handler attributes - exactly what XSS exploits. A strong policy omits it so injected inline code will not run.

Avoiding unsafe-eval

'unsafe-eval' allows eval and the Function constructor. The Vue 3 runtime build does not need it (templates are precompiled), so you can and should leave it out.

Nonce-Based Inline Scripts

When you truly need an inline script, give it a random per-response nonce and list that nonce in the policy. Only scripts carrying the matching nonce execute.

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

Why Nonces Beat unsafe-inline

A nonce is unpredictable and changes every response, so an attacker who injects a script cannot guess it. This keeps inline scripts working without the blanket risk of unsafe-inline.

CSP and Vue Styles

Vue and many UI libs inject styles at runtime. Either allow them via style-src with a nonce/hash or extract CSS to files so style-src 'self' suffices.

Content-Security-Policy: style-src 'self';

Vite CSP Nonce Plugin for Dev

Vite's dev server injects scripts, which can clash with strict CSP. A CSP nonce plugin stamps a matching nonce on Vite-injected tags during development.

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

connect-src for APIs

Lock down where the app may fetch with connect-src, so injected code cannot exfiltrate data to an attacker-controlled domain.

Content-Security-Policy: connect-src 'self' https://api.example.com;

Report-Only Mode

Roll out CSP safely with Content-Security-Policy-Report-Only, which reports violations without blocking, so you can tune the policy before enforcing it.

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

Quick Check

Which CSP directive value should you avoid to keep XSS protection strong?

Recap

CSP is an HTTP header restricting allowed script, style, and connection sources, blocking injected code even if XSS slips through. Avoid unsafe-inline and unsafe-eval; use per-response nonces for required inline scripts and a Vite CSP nonce plugin in development. Roll out with Report-Only mode before enforcing.

Frequently asked questions

Is the “Content Security Policy (CSP) with Vue” lesson free?

Yes — the full text of “Content Security Policy (CSP) with Vue” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Content Security Policy (CSP) with Vue”?

CSP headers, nonce-based scripts, hash-based policies, Vite CSP configuration. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Content Security Policy (CSP) with Vue” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy