How to fix missing permissions policy on Next.js

Steps for Next.js

1. Open next.config.js in your project root.
2. Add or extend the `headers()` async function to return the Permissions-Policy header for all routes: async headers() { return [{ source: '/(.*)', headers: [{ key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=(), payment=(), usb=()' }] }] }
3. Save the file and restart your Next.js server (npm run build && npm start for production).
4. Verify with Chrome DevTools → Network → Response Headers.

What is missing permissions policy?

The Permissions-Policy header (formerly called Feature-Policy) is a short line of text your web server sends to every visitor's browser along with each page. It acts as a rulebook that tells the browser exactly which powerful device features — like the camera, microphone, GPS location, payment APIs, and more — your site is allowed to use, and which should be completely blocked. Without it, the browser applies its own default rules, and any third-party script or iframe embedded on your store could potentially request access to those features without your knowledge or consent.

Missing this header is flagged by OWASP as a Security Misconfiguration (A05:2021), meaning auditors, enterprise buyers, and PCI-DSS assessors will mark it as a finding that needs remediation. More practically: any malicious or compromised third-party script — an analytics tag, a chat widget, an ad pixel — could silently attempt to activate a shopper's camera or microphone; a Permissions-Policy header stops that cold. It also signals to Google and to privacy-conscious customers that your store follows security best practices, which protects conversion rates and brand trust. Some browser security warnings and privacy regulations (GDPR, CCPA) are increasingly tied to whether sites take proactive steps to limit unnecessary data collection capabilities.

See the complete Missing permissions policy guide for every platform and the full background.