Security and CSP Policies

1) Why do we need security policies

The modern frontend and API depend on many sources (CDN, analytics, PSP, 3DS, chats). Without tough policies, the risks of XSS, clickjacking, data leaks and session hijacking increase. Security policies limit what is allowed by default by moving the browser to the allow-list model.

2) Basic pillars

CSP (Content Security Policy) is a centralized "menu" of permitted JS/CSS/media sources and behaviors.
Trusted Types - Type-level protection against DOM-XSS.
SRI (Subresource Integrity) - control the integrity of scripts/styles.
COOP/COEP/CORP - rigid isolation of contexts and resources between sources.
Fetch Metadata ('Sec-Fetch-') is a server solution for filtering cross-site requests.
CORS - cross-domain API access policy.
Classic titles: HSTS, 'X-Frame-Options '/' frame-ancestors', 'Referrer-Policy', 'Permissions-Policy', SameSite-cookies.

3) CSP: Basis and Principles

3. 1 Directives (key)

'default-src '- default for other directives.
'script-src '- JS sources, nonce/hash,' strict-dynamic ',' report-sample '.
'style-src '- CSS sources; minimize'unsafe-inline '.
`img-src`, `font-src`, `media-src`, `object-src` (обычно `none`).
'connect-src '- network requests (XHR/fetch/WebSocket).
'frame-src '/' child-src '- third-party frames (PSP, 3DS).
'frame-ancestors' - who can embed our site (anti-clickjacking).
'base-uri '- prohibit substitution of' <base> '.
'form-action '- where forms are allowed to be submitted.
'upgrade-insecure-requests', 'block-all-mixed-content' - fighting the HTTP/HTTPS mix.
'report-uri '/'report-to '- where to send violations.

3. 2 Nonce и hash

Nonce approach: generate a crypto-random' nonce' for each HTTP response, add '