Headers de seguretat imprescindibles: la base mínima per blindar qualsevol web

Quan un navegador carrega el teu web, el servidor no només envia HTML, CSS i imatges —envia també capçaleres HTTP invisibles per a l'usuari però fonamentals per a la seguretat. Sense les capçaleres correctes, el navegador no té instruccions sobre com protegir l'usuari davant atacs comuns com el clickjacking (enganyar l'usuari per clicar en elements ocults), la injecció de scripts de tercers maliciosos, o el sniffing de contingut. La bona notícia és que configurar-les correctament és una feina d'una tarda que millora significativament la seguretat del teu web.

Les 6 capçaleres de seguretat que tot web hauria de tenir

La primera és Strict-Transport-Security (HSTS). Li diu al navegador que mai ha de connectar-se al teu domini via HTTP, sempre via HTTPS. Sense HSTS, un atacant podria fer un atac man-in-the-middle durant la primera connexió HTTP. Valor recomanat: Strict-Transport-Security: max-age=31536000; includeSubDomains; preload.

La segona és Content-Security-Policy (CSP). És la capçalera més poderosa i la més complexa de configurar. Defineix d'on pot caregar el navegador scripts, estils, imatges, fonts i frames. Una CSP ben configurada elimina pràcticament el risc d'injecció XSS (Cross-Site Scripting), que és un dels vectors d'atac més comuns. El problema és que una CSP mal configurada pot trencar funcionalitats del web. Recomana em começar en mode report-only per detectar violacions sense bloquejar res.

• Strict-Transport-Security: max-age=31536000; includeSubDomains — diu al navegador que useu HTTPS sempre durant el proper any. Afegeix 'preload' i registra el domini al preload list de Chrome per a màxima protecció.
• X-Frame-Options: DENY — evita que el teu web es pugui mostrar dins d'un iframe en un altre domini. Prevé atacs de clickjacking. Si necessites permetre iframes des del mateix domini, usa SAMEORIGIN.
• X-Content-Type-Options: nosniff — evita que el navegador intenti 'adivinar' el tipus de contingut d'un recurs si no coincideix amb el Content-Type declarat. Prevé atacs de MIME sniffing.
• Referrer-Policy: strict-origin-when-cross-origin — controla quanta informació de la URL d'origen s'envia quan l'usuari navega a un altre lloc. Equilibri entre privacitat i funcionalitat analítica.
• Permissions-Policy (abans Feature-Policy): restringeix l'accés a APIs del navegador (càmera, micròfon, geolocalització, acceleròmetre) que la teva web no necessita. Exemple: Permissions-Policy: camera=(), microphone=(), geolocation=()
• Content-Security-Policy en mode report-only: comenzeu amb Content-Security-Policy-Report-Only per veure les violacions sense bloquejar res. Quan entenguis quin contingut es carrega, passes al mode blocking.
• Cross-Origin-Opener-Policy (COOP): aïlla el teu context de navegació d'altres origins. Necessari per a webs que usen SharedArrayBuffer o certs APIs de rendiment. Valor: same-origin.
• Com aplicar-les: via Nginx (add_header), Apache (.htaccess), Cloudflare (Rules → Transform Rules → Modify Response Headers) o directament al teu framework (Nuxt.js via nitro.headers, Next.js via next.config.js headers).

Com verificar que les capçaleres estan correctament configurades

Un cop les has configurat, verifica-les amb Security Headers (securityheaders.com): entra el teu domini i t'indica quines capçaleres tens, quines manquen i una nota global de A+ a F. L'objectiu és A o A+. Una nota B és acceptable; C o inferior indica capçaleres crítiques que manquen.

Tingues en compte que algunes capçaleres poden entrar en conflicte amb eines de tercers que uses al teu web. Un pixel de Facebook o un xat de tercers normalment requereix ajustos a la CSP per permetre carregar scripts des dels seus dominis. Usa el mode report-only per detectar quins scripts de tercers usa el teu web abans de bloquejar res.

Els security headers no protegeixen de tot, però és una capa de protecció amb cost gairebé zero i impacte alt. No tenir-los és deixar portes obertes innecessàriament.