Which security response headers should a frontend developer know, and what does each one do?

Security headers turn on browser protections for your pages. The server, CDN or hosting config sets them, for example headers() in next.config.js, vercel.json or nginx.

The main ones:

• Content-Security-Policy: says which scripts, styles, frames and connections are allowed. It is the main way to limit XSS damage. Its frame-ancestors directive stops clickjacking.
• Strict-Transport-Security (HSTS): tells the browser to use only HTTPS for your domain for a set time. This stops attackers from downgrading later visits to HTTP.
• X-Content-Type-Options: nosniff: the browser trusts the declared content type. It won't run an uploaded text file as a script.
• Referrer-Policy: controls how much of the current URL goes to other sites in the Referer header.
• Permissions-Policy: turns off browser features you don't use, like the camera or geolocation, also for iframes.
• Cross-Origin-Opener-Policy: same-origin: cuts the link between your page and cross-origin popups, so they can't use window.opener.
• X-Frame-Options: the older clickjacking header. frame-ancestors replaces it, but many sites send both.

Remove X-XSS-Protection, or set it to 0. Browsers removed the filter it controlled, and the filter itself caused security problems.

Tools like Mozilla Observatory check a live site's headers.