Politiques de sécurité et CSP

1) Pourquoi des politiques de sécurité sont nécessaires

L'interface frontale et l'API modernes dépendent de nombreuses sources (CDN, analytique, PSP, 3DS, chat). Sans politiques rigoureuses, les risques de XSS, de cliquetis, de fuites de données et de détournements de session sont augmentés. Les stratégies de sécurité limitent ce qui est autorisé par défaut en transférant le navigateur dans le modèle « autorisé uniquement explicitement » (allow-list).

2) Piliers de base

CSP (Content Security Policy) est un « menu » centralisé des sources autorisées et du comportement JS/CSS/Media.
Trusted Types - Protection DOM-XSS au niveau des types.
ISR (Subresource Integrity) : Contrôle l'intégrité des scripts/styles.
COOPÉRATIVE/COEP/CORP - Isolation rigide des contextes et des ressources entre les sources.
Fetch Metadata (« Sec-Fetch- ») est une solution serveur de filtrage de requêtes croisées.
CORS est une politique d'accès inter-domaines à l'API.
Titres classiques : HSTS, 'X-Frame-Options '/' frame-ancestors', 'Referer-Policy', 'Permissions-Policy', SameSite-cookies.

3) CSP : cadre et principes

3. 1 Directives (clés)

'Default-src 'est un défaut pour les autres directives.
'Script-src 'est une source JS, nonce/hash,' strict-dynamic ',' report-sample '.
'Style-src '- sources CSS ; minimiser « unsafe-inline ».
`img-src`, `font-src`, `media-src`, `object-src` (обычно `none`).
'Connect-src 'est une requête réseau (XHR/fetch/WebSocket).
'Frame-src '/' child-src 'est un cadre tiers (PSP, 3DS).
'frame-ancestors' - qui peut intégrer notre site (anti-clickjacking).
'base-uri' est l'interdiction de la substitution '<base>'.
« form-action » - où vous pouvez sabrer les formes.
'upgrade-insecure-requests ',' block-all-mixed-content 'est la lutte contre le mélange HTTP/HTTPS.
'Rapport-uri '/' Rapport-to '- Où fusionner les violations.

3. 2 Nonce и hash

Approche nonce : pour chaque réponse HTTP, générer le cryptomonnaie 'nonce', ajouter aux scripts inline '<script nonce ='...> 'et dans' script-src'nonce-... ".
Approche hash : hachage fixe du contenu de l'inline. Convient pour HTML statique, inconfortable avec la dynamique.
'Strict-dynamic ': ne faire confiance qu'aux scripts chargés d'un script « de confiance » (avec nonce/hash). Supprime la nécessité d'énumérer les domaines cibles lors du démarrage dynamique, mais nécessite des navigateurs modernes.

3. 3 Interdiction 'unsafe-'

Éviter 'unsafe-inline', 'unsafe-eval'. Si le cadre nécessite eval (par exemple, source-map dans dev), inclure uniquement sur dev.
Pour les styles, utilisez 'nonce' ou 'hash', si possible sans inline.

3. 4 Exemple de CSP strict (référence de combat)

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)

Activer la directive : 'Content-Security-Policy : require-trusted-types-for' script '; trusted-types app default`.
Créez une stratégie unique dans le code ('window. trustedTypes. createPolicy('app', { createHTML() {... } })`).
Interdire les affectations non sécurisées ('element. innerHTML =...`) без Trusted Types.
Intégration avec les cadres (React/Angular/Vue) : utilisez des API de rendu sécurisées, évitez les dangereux dangerSetInnerHTML.

5) ISR (intégrité du CDN)

Pour les' <script> '/' <link> 'externes, utilisez' integrity = » sha256- « ... crossorigin = » anonymous ».
L'ISR complète et ne remplace pas le PSC. Si vous mettez à jour la version CDN, mettez à jour le hash.

6) Clickjacking et cadres

La méthode moderne est 'frame-ancestors' (remplace l'ancienne 'X-Frame-Options').