A fullstack Nuxt developer owns both halves of the attack surface: the browser, where XSS, CSRF and leaked tokens live, and the Nitro server, where injection, SSRF and broken authorisation live. Interviewers rarely ask for exploits; they ask what you do by default, what you check in review, and what you would say to a product manager who wants to render user-provided HTML. This section is that default posture.

Know

• Think in trust boundaries. Untrusted input enters from the URL, request bodies and headers, cookies, uploaded files, third-party APIs and webhooks, storage, postMessage, and your own database when it holds user content. Every boundary needs validation on entry and encoding on exit.
• What the browser gives you: the same-origin policy and CORS (protecting users' data from other sites), SameSite cookies (most CSRF), HttpOnly (XSS cannot read the session), CSP (limits what injected code can do), HTTPS with HSTS. What it does not give you: authorisation, input validation, protection from your own dependencies.
• What Vue and Nuxt give you: template interpolation and attribute binding are escaped; the payload is serialised safely; runtimeConfig keeps secrets server-side; readValidatedBody validates inputs; nuxt-auth-utils seals sessions; production error pages hide stack traces. What they do not give you: safety in v-html, javascript: URLs, user templates, or any server route you forget to protect.
• OWASP Top 10 (2025 edition) is the shared vocabulary: broken access control, security misconfiguration, software supply chain failures (new), cryptographic failures, injection, insecure design, authentication failures, software and data integrity failures, logging and alerting failures, and mishandling of exceptional conditions (new). Two of the ten are about how you build and operate, not about code.
• Defence in depth and least privilege: validate and encode and set CSP; scope tokens and API keys minimally; run CI with least-privilege permissions; assume one layer will fail.
• Security is a process: dependency updates on a cadence, security releases applied quickly (Nuxt shipped several on the 4.4 and 4.5 lines), threat modelling for new features, a way for researchers to report issues, logs that let you notice an incident.

How the pages fit

How it works

The security checklist applied to one Nitro route:

import { z } from 'zod'
import DOMPurify from 'isomorphic-dompurify'

const body = z.object({
  postId: z.string().uuid(),
  html: z.string().max(5_000), // bounded input: DoS via 50 MB comments is a validation problem
})

export default defineEventHandler(async (event) => {
  const { user } = await requireUserSession(event)                   // authentication
  const input = await readValidatedBody(event, body.parse)          // validation at the boundary (400 on failure)
  const post = await useDb().posts.find(input.postId)
  if (!post || !post.allowsComments) throw createError({ status: 404, statusText: 'Not found' }) // object-level authorisation
  await assertRateLimit(event, `comments:${user.id}`, { max: 10, windowSec: 60 }) // abuse control

  const safe = DOMPurify.sanitize(input.html, { ALLOWED_TAGS: ['b', 'i', 'a', 'p', 'code'], ALLOWED_ATTR: ['href'] }) // encode/sanitise on the way in
  const comment = await useDb().comments.create({ postId: post.id, authorId: user.id, html: safe })
  log.info({ event: 'comment.created', userId: user.id, commentId: comment.id }) // audit trail, no content or PII
  return comment
})

Exercise

Be able to say