Security headers are the cheapest defence you can ship and the most common gap in a "we use a framework" codebase. Interviewers ask "which headers do you set" as a quick competence check, and "how would you roll out CSP" as the follow-up that separates people who have done it from people who have read about it.

Know

• Content Security Policy tells the browser which sources may load and execute. Key directives: default-src (fallback), script-src, style-src, img-src, font-src, connect-src (fetch/XHR/WebSocket/EventSource targets), frame-src, frame-ancestors (who may embed you; replaces X-Frame-Options), base-uri (stops <base> hijacking of relative URLs), form-action, object-src 'none', upgrade-insecure-requests, report-to/report-uri.
• Scripts: nonces, hashes or strict-dynamic. 'unsafe-inline' defeats the purpose. A nonce (script-src 'nonce-abc123') is a per-request random value the server puts on every legitimate <script>; hashes ('sha256-…') allow specific inline scripts and suit static sites; 'strict-dynamic' lets nonce-approved scripts load further scripts without listing every CDN. A strict policy is script-src 'nonce-…' 'strict-dynamic'; object-src 'none'; base-uri 'self'.
• Nuxt specifics: the payload is a <script type="application/json"> that browsers never execute, so it needs no nonce; Nuxt's module scripts and any inline scripts (useHead inline, onPrehydrate, third-party tags) do. Per-request nonces require SSR (a static prerender cannot vary the nonce; use hashes there, or Content-Security-Policy via meta with hashes). The nuxt-security module generates a nonce per request (useNonce()), injects it into Nuxt's scripts and useHead entries, sets sensible defaults for every other header, and offers hash-based CSP for SSG (ssg.hashScripts).
• Rollout: start with Content-Security-Policy-Report-Only and a reporting endpoint (report-to with a Reporting-Endpoints header, or report-uri to your own /api/csp-report); fix violations (third-party tags, inline handlers, style-src for inline styles from UI libraries); then enforce. Expect style-src to be the painful one: Tailwind and Nuxt UI are fine, but inline style="" attributes need 'unsafe-inline' for styles or a hash strategy; style-src-attr and style-src-elem allow separating them.
• HSTS: Strict-Transport-Security: max-age=63072000; includeSubDomains; preload forces HTTPS for future visits; only enable once every subdomain works over HTTPS; preload is a one-way door.
• X-Content-Type-Options: nosniff stops MIME sniffing (scripts served as text stay text, uploads do not become HTML). Referrer-Policy: strict-origin-when-cross-origin (the browser default now; set it explicitly) keeps paths and query strings from leaking to other origins. Permissions-Policy disables features you do not use (camera=(), microphone=(), geolocation=(), interest-cohort=()). X-Frame-Options: DENY for old browsers, superseded by frame-ancestors. X-XSS-Protection is obsolete and should be removed.
• Cross-origin isolation: Cross-Origin-Opener-Policy: same-origin (protects against tab-nabbing and enables isolation), Cross-Origin-Embedder-Policy: require-corp (needed for SharedArrayBuffer; breaks third-party embeds without CORP/CORS), Cross-Origin-Resource-Policy: same-origin (stops other sites from loading your resources).
• Subresource Integrity: integrity="sha384-…" on third-party <script>/<link> with crossorigin="anonymous", so a compromised CDN file fails to load; irrelevant for your own hashed assets served from the same origin.
• Cookies are headers too: Secure, HttpOnly, SameSite, __Host- prefix (fetch, CORS and cookies).
• Where to set them: routeRules headers in nuxt.config, a Nitro plugin on beforeResponse for dynamic values (nonces), the nuxt-security module, or the CDN (Cloudflare Transform Rules, _headers files for static hosts, as this app does for caching). Test with securityheaders.com, Google's CSP Evaluator, and the browser console's violation reports.

How it works

A strict, nonce-based CSP for a server-rendered Nuxt app with the nuxt-security module:

export default defineNuxtConfig({
  modules: ['nuxt-security'],
  security: {
    nonce: true, // per-request nonce injected into Nuxt's scripts and useHead entries
    headers: {
      contentSecurityPolicy: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'nonce-{{nonce}}'", "'strict-dynamic'"],
        'style-src': ["'self'", "'unsafe-inline'"], // inline style attributes from UI libraries; tighten with hashes if you can
        'img-src': ["'self'", 'data:', 'https://images.example.com'],
        'font-src': ["'self'"],
        'connect-src': ["'self'", 'https://api.example.com', 'wss://realtime.example.com'],
        'frame-ancestors': ["'none'"],
        'base-uri': ["'self'"],
        'form-action': ["'self'"],
        'object-src': ["'none'"],
        'upgrade-insecure-requests': true,
        'report-to': 'csp',
      },
      strictTransportSecurity: { maxAge: 63072000, includeSubdomains: true, preload: true },
      xContentTypeOptions: 'nosniff',
      referrerPolicy: 'strict-origin-when-cross-origin',
      permissionsPolicy: { camera: [], microphone: [], geolocation: [] },
      crossOriginOpenerPolicy: 'same-origin',
      crossOriginResourcePolicy: 'same-origin',
      xFrameOptions: 'DENY',
    },
  },
  routeRules: {
    // Report-only for a new policy on part of the site while it is being tuned
    '/beta/**': { security: { headers: { contentSecurityPolicy: false } } },
  },
})

Using the nonce for a third-party script and collecting violation reports:

<script setup lang="ts">
const nonce = useNonce() // from nuxt-security
useHead({
  script: [{ src: 'https://analytics.example.com/tag.js', nonce, async: true }],
})
</script>

export default defineEventHandler(async (event) => {
  const reports = await readBody<{ body?: { blockedURL?: string, effectiveDirective?: string, documentURL?: string } }[]>(event)
  for (const r of Array.isArray(reports) ? reports : [reports]) {
    console.warn('[csp]', r.body?.effectiveDirective, r.body?.blockedURL, r.body?.documentURL)
  }
  setResponseStatus(event, 204)
})

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('beforeResponse', (event) => {
    setResponseHeader(event, 'Reporting-Endpoints', 'csp="/api/csp-report"')
  })
})

Static hosting without SSR (this app's model): hashes instead of nonces, headers from the host:

/*
  Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()
  Cross-Origin-Opener-Policy: same-origin
  Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-<hash-of-inline-script>'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'

Exercise

Be able to say