All 5 Security Best Practices in Next.js questions
More in Security Best Practices in Next.js
Why is it important to never expose sensitive information like API keys inside client components? How do you set security related HTTP headers, such as Content Security Policy, in a Next.js application? How would you protect server actions from being called with malicious or unauthorized data, since they can be invoked directly from the client? What steps should you take to keep dependencies and the Next.js framework itself secure over time?
Advertisement
Back to results for “Security”
Next.js › Security Best Practices in Next.js

How do you protect a Next.js application against cross site scripting attacks?

Intermediate

Answer

React automatically escapes content rendered inside JSX, which prevents most cross site scripting attacks by default, but you should still avoid using dangerouslySetInnerHTML with untrusted content, and always validate and sanitize any user submitted data before storing or displaying it.
// React automatically escapes this, protecting against XSS
function Comment({ text }) {
  return <p>{text}</p>;
}

// Avoid this unless the content is trusted and sanitized
<div dangerouslySetInnerHTML={{ __html: userInput }} />
Real-world example A comment section on a blog safely displays user submitted text because React automatically escapes it, preventing a malicious visitor from injecting harmful scripts into the page.

Common follow-ups: When is it safe to use dangerouslySetInnerHTML?;What sanitization libraries are commonly used for user generated content?

Form Handling & Validation in Next.js;Client Components & Hydration
All 5 Security Best Practices in Next.js questions