
Sécurité front 2025 : CSP stricte, Trusted Types, SRI
Recette 2025 pour durcir une app Angular avec CSP stricte, Trusted Types, SRI et une hygiène supply-chain.
Recette 2025 pour durcir une app Angular avec CSP stricte, Trusted Types, SRI et une hygiène supply-chain.
Durcir le front n'est plus optionnel. Voici une checklist compacte pour Angular : CSP stricte, Trusted Types, Subresource Integrity et hygiène dépendances.
CSP stricte + Trusted Types
En-tête recommandé :
Content-Security-Policy: default-src 'self'; script-src 'self' 'strict-dynamic'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; upgrade-insecure-requests; require-trusted-types-for 'script'; trusted-types angular angular#bundler; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:
Notes :
trusted-types angularactive la politique auto-générée par Angular pour sécuriser les sinks DOM.script-src 'strict-dynamic'fonctionne avec les nonces/.- Gardez
style-src 'unsafe-inline'seulement si Tailwind JIT l'exige; sinon passez par des hashes.
SRI sur assets tiers
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.0/latin.css"
integrity="sha384-abc123"
crossorigin="anonymous" />
Générez les hashes via npx srihash file.css ou openssl dgst -sha384 -binary file.css | openssl base64 -A.
Trusted Types custom (cas de HTML dynamique)
// src/app/security/trusted-types.policy.ts
export function createPolicy() {
if (!(window as any).trustedTypes) return;
return (window as any).trustedTypes.createPolicy('app', {
createHTML: (value: string) => value,
});
}
Appliquez-la avant d'injecter du HTML (ex: markdown). Idéalement, assainissez avec DOMPurify configuré Trusted Types.
Supply-chain : alternatif à npm audit
npx osv-scanner --lock package-lock.jsonnpx npm-check-updates -upuisnpm cipour garder un lock propre.- Sur CI : bloquez les install hors lockfile (
npm ci --ignore-scripts=false) et activeznpm audit signatures.
Headers complémentaires
Cross-Origin-Embedder-Policy: require-corpCross-Origin-Opener-Policy: same-originStrict-Transport-Security: max-age=31536000; includeSubDomains; preload
Tests rapides
npx @angular-devkit/build-angular:app-shellpour vérifier le SSR ne casse pas la CSP.lighthouse --view --only-categories=best-practices,seoet l'onglet Security de Chrome DevTools pour valider SRI/CSP.
