CSP (Content Security Policy) errors WordPress

Content Security Policy è un'header HTTP che limita quali risorse possono essere caricate da una pagina: previene XSS e injection. Configurarlo male blocca asset legittimi e rompe il sito. Vediamo come usare WP Error Monitor per debug CSP.

Cosa fa CSP

L’header Content-Security-Policy elenca whitelist per script, style, image, font, frame ecc. Esempio: 'script-src self https://cdn.jsdelivr.net'. Browser blocca risorse non in whitelist e logga in console. Con direttiva 'report-uri' o 'report-to' i browser inviano violazioni a un'endpoint: WP Error Monitor espone l’endpoint per riceverle.

Setup CSP progressivo

1) Inizia in report-only mode: Content-Security-Policy-Report-Only (logga ma non blocca); 2) Aggiungi report-uri https://crm.gtechgroup.it/wpem/csp-report; 3) Genera traffico per 1-2 settimane; 4) Esamina report in WP Error Monitor > 'CSP Violations'; 5) Aggiungi alle whitelist tutti i domini legittimi; 6) Passa a Content-Security-Policy (enforcing).

Errori tipici CSP

1) Google Fonts bloccato: aggiungi fonts.googleapis.com e fonts.gstatic.com a font-src e style-src; 2) inline script: usa nonce o sha256 hash; 3) WP Block Editor: ha inline style massicci, configura con unsafe-inline o nonce dynamic; 4) plugin che caricano da CDN: aggiungi i domini.

Strict CSP con nonce dinamici

CSP 'strict-dynamic' con nonce per script inline è lo standard moderno. Per ogni request, genera nonce random, includilo nell’header CSP e in ogni tag script. Browser esegue solo script con quel nonce. WordPress: hook wp_csp_nonce filter, output in header e in wp_print_scripts. Riduce drasticamente attack surface XSS senza richiedere unsafe-inline. WP Error Monitor segnala violazioni nonce.

Report-only vs enforcing in produzione

Modalità report-only è sicura per testing: nessun blocco utente, solo report. Enforcing blocca. Strategia: 1) report-only per 4-8 settimane raccogliendo violations, 2) tune CSP fino a 0 violations false-positive, 3) switch a enforcing con report-uri ancora attivo, 4) monitor 30gg per regressioni, 5) rimuovi report-uri se tutto ok. Mai switch enforcing senza pre-testing.

CSP per Gutenberg block editor

Block Editor (Gutenberg) genera massicci inline JS/CSS che CSP enforcing può rompere. Soluzione: nonce dinamico per tutti gli inline script generati. WordPress 6.0+ ha supporto nativo via wp_print_inline_script_tag con nonce attribute. CSP header con 'script-src nonce-{nonce}' permette inline solo con quel nonce. Setup: hook script_loader_tag e style_loader_tag per inject nonce in HTML. Verifica con browser DevTools che inline script abbiano nonce e che CSP non blocchi. Test in /wp-admin (dove Gutenberg lives) prima di enforce.

Reporting endpoint setup

CSP report-uri o report-to direttiva indica URL dove browser invia violation report. WP Error Monitor offre endpoint /wpem/csp-report che riceve payload JSON, classifica per pattern, deduplica. Così' migliaia di violation diventano poche pattern. Vista dashboard 'CSP Violations' mostra: top violations, browser distribution, frequency. Filtri per directive (script-src, style-src, img-src, ecc.) e source (origin che ha generato la violation). Setup: header CSP include report-uri https://crm.gtechgroup.it/wpem/csp-report?site=miosito.

CSP rollout in tre fasi

Rollout CSP in tre fasi sicure: Fase 1 (Week 1-4) report-only con report-uri, raccogli violations baseline; Fase 2 (Week 5-8) aggiungi alle whitelist tutti i pattern legittimi visti, mantieni report-only, target <10 false positive/giorno; Fase 3 (Week 9+) switch a enforcing, mantieni report-uri per detection regression. Total time 2-3 mesi per CSP completa su sito complesso. ROI: hardening security significativo, previene 90%+ XSS attacks. WP Error Monitor offre dashboard dedicata CSP per facilitare il rollout: violations classificate, whitelist suggerite automaticamente da pattern.

Browser compatibility CSP

CSP supportato da tutti browser moderni (Chrome, Firefox, Safari, Edge) ma con piccole differenze: Safari ha implementation parziale alcune direttive. Verifica con caniuse.com prima di affidarti a feature CSP avanzate. Per progetti enterprise, considera baseline CSP che funziona ovunque.

Browser compatibility e fallback

I browser supportano CORS in modo consistente da anni, ma le implementazioni differiscono per edge case: Safari ha gestione preflight diversa per alcuni header custom, Firefox e' più' strict su credentials. Per applicazioni enterprise che devono funzionare su browser legacy, considera fallback come JSONP per endpoint pubblici di sola lettura. WP Error Monitor traccia user agent degli errori CORS così' identifichi se un problema e' browser-specific o universale.

Procedura passo-passo

1. Setta header Content-Security-Policy-Report-Only in webserver.
2. Aggiungi: report-uri https://crm.gtechgroup.it/wpem/csp-report?site=miosito.
3. Configura WP Error Monitor per ricevere report.
4. Genera traffico tipico per 7-14 giorni.
5. Esamina dashboard 'CSP Violations' nel CRM.
6. Whitelisting iterativo: aggiungi i domini legittimi più frequenti.
7. Passa a enforcing: Content-Security-Policy.
8. Monitora WP Error Monitor per nuove violazioni post-enforcing.
9. Implementa nonce dinamici per script inline.
10. Mantieni report-only per 4-8 settimane prima di enforcing.

Errori comuni e come risolverli

• Sito completamente rotto dopo CSP: Troppi blocchi: torna a report-only e aggiungi gradualmente.
• Inline script Gutenberg bloccato: Usa nonce dinamico: hook wp_csp_nonce filter.
• Google Analytics non funziona: Aggiungi connect-src https://www.google-analytics.com.
• Nonce non passa al frontend: Hook timing errato: usa wp_print_scripts non wp_head.
• Enforcing rompe Gutenberg: Block editor genera inline script: nonce setup must work in admin too.

Domande frequenti

D: CSP è obbligatorio?
R: No, ma è best practice di sicurezza moderna. Banche e siti gov lo richiedono.

D: Impatta performance?
R: Trascurabile: solo parsing header in più.

D: CSP in WordPress è difficile?
R: Medium: plugin (Headers Security) aiutano, ma fine-tuning richiede analisi.

D: CSP impatta SEO?
R: Marginalmente positivo: Google value secure sites.

D: Posso usare CSP con AMP?
R: Sì, AMP runtime supporta CSP correttamente.

Hai bisogno di aiuto?

Se vuoi affidare il monitoraggio WordPress al team di G Tech Group, scrivici tramite il modulo di contatto.