Políticas de seguridad y CSP

1) Por qué se necesitan políticas de seguridad

El frontend moderno y la API dependen de múltiples fuentes (CDN, analítica, PSP, 3DS, chats). Sin políticas estrictas, los riesgos de XSS, clickjacking, filtraciones de datos y secuestros de sesiones aumentan. Las políticas de seguridad limitan lo que se permite de forma predeterminada al traducir el navegador en un modelo «permitido sólo explícitamente» (allow-list).

2) Pilares básicos

CSP (Content Security Policy) es un «menú» centralizado de las fuentes y comportamientos permitidos de JS/CSS/medios.
Trusted Types - Protección contra DOM-XSS a nivel de tipo.
SRI (Subresource Integrity): controla la integridad de los scripts/estilos.
COOP/COEP/CORP - Aislamiento rígido de contextos y recursos entre fuentes.
Fetch Metadata ('Sec-Fetch-') es una solución de servidor para filtrar solicitudes de sitios cruzados.
CORS - Política de acceso entre dominios a la API.
Títulos clásicos: HSTS, 'X-Frame-Options '/' frame-ancestors', 'Referrer-Policy', 'Permissions-Policy', SameSite-cookies.

3) CSP: marco y principios

3. 1 Directivas (clave)

'default-src' es un default para el resto de directivas.
'script-src' son las fuentes de JS, nonce/hash, 'strict-dynamic', 'report-sample'.
'style-src' - fuentes CSS; minimizar 'unsafe-inline'.
`img-src`, `font-src`, `media-src`, `object-src` (обычно `none`).
'connect-src' - Consultas de red (XHR/fetch/WebSocket).
'frame-src '/' child-src' son marcos de terceros (PSP, 3DS).
'frame-ancestors' - quién puede incrustar nuestro sitio (anti-clickjacking).
'base-uri' - prohibición de sustitución '<base>'.
'form-action' - donde se permite sabmitir formularios.
'upgrade-insecure-requests',' block-all-mixed-content 'es una lucha contra la mezcla HTTP/HTTPS.
'report-uri '/' report-to' es donde se filtran las infracciones.

3. 2 Nonce и hash

Enfoque Nonce: para cada respuesta HTTP generar un' nonce' criptoalimentado, añadir a los scripts 'inline' <script nonce =""...> 'y en' script-src 'nonce-... ".
Enfoque hash: hash fijo de contenido en línea. Adecuado para HTML estático, incómodo con el altavoz.
'strict-dynamic': confiar únicamente en scripts cargados con un script «de confianza» (con nonce/hash). Elimina la necesidad de enumerar los dominios de destino cuando se carga dinámicamente, pero requiere navegadores modernos.

3. 3 Prohibición 'unsafe-'

Evitar 'unsafe-inline', 'unsafe-eval'. Si el marco requiere eval (por ejemplo, un mapa de origen en dev), habilite sólo en dev.
Para los estilos - utilizar 'nonce' o 'hash', si es posible sin inline.

3. 4 Ejemplo de CSP estricto (punto de referencia de combate)

Content-Security-Policy:
default-src 'none';
base-uri 'self';
object-src 'none';
script-src 'self' 'nonce-{RANDOM}' 'strict-dynamic' https://www. googletagmanager. com;
style-src 'self' 'nonce-{RANDOM}';
img-src 'self' data: https://images. example-cdn. com;
font-src 'self' https://fonts. gstatic. com;
connect-src 'self' https://api. example. com wss://ws. example. com;
frame-src https://3ds. psp. com https://pay. psp. com;
frame-ancestors 'none';
form-action 'self' https://pay. psp. com;
upgrade-insecure-requests;
report-to csp-endpoint; report-sample

4) Trusted Types (DOM-XSS)

Incluya la directiva: 'Content-Security-Policy: require-trusted-types-for' script'; trusted-types app default`.
Cree una única política en el código ('window. trustedTypes. createPolicy('app', { createHTML() {... } })`).
Prohíba las asignaciones inseguras ('element. innerHTML =...`) без Trusted Types.
Integración con frameworks (Nat/Angular/Vue): utilice API de renderizado seguras, evite los peligrosos dangerouslySetInnerHTML.

5) SRI (integridad CDN)

Para los '<script> '/' <link>' externos, utilice 'integrity =' sha256- '... crossorigin =' anonymous '.
El SRI complementa, en lugar de reemplazar, el CSP. Cuando actualice la versión CDN, actualice el hash.

6) Clickjacking y marcos

El método moderno es 'frame-ancestors' (reemplaza al obsoleto 'X-Frame-Options').