2014-10-23 10 views
28

Sto tentando di utilizzare le nuove intestazioni HTTP Content Security Policy (CSP) su un sito di prova. Quando uso CSP in collaborazione con Modernizr ottengo errori di violazione CSP. Questa è la politica CSP che sto usando:Modernizr causa errori di violazione di Content Security Policy (CSP)

Content-Security-politica: default-src 'auto'; script-src 'self' ajax.googleapis.com ajax.aspnetcdn.com; style-src 'self'; img-src 'self'; font-src 'self'; Report-uri /WebResource.axd?cspReport=true

Questi sono gli errori dalla console browser Chrome:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". 
Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. 

window.Modernizr.injectElementWithStyles - modernizr-2.7.2.js:134 
window.Modernizr.tests.touch    - modernizr-2.7.2.js:457(anonymous function) 
modernizr-2.7.2.js:949(anonymous function) - modernizr-2.7.2.js:1406 

ho scoperto la following workaround sul sito Github Modernizr. Tuttavia, la soluzione alternativa è stata presentata per la prima volta a marzo e facendo un po 'di Google-Fu non riesco a trovare soluzioni o soluzioni alternative a questo problema.

so che posso includere il insicuro-inline direttiva che può ottenere intorno a questo errore, ma questo permette anche il codice non sicuro per correre e nega l'uso del CSP, in primo luogo. Qualcuno ha qualche soluzione?

Update - Che cosa è CSP

CSP è un'intestazione HTTP supportato da tutti i principali browser (Including Edge). Essenzialmente è una lista bianca di contenuti che il browser può usare per rendere la pagina. Scopri di più here o leggi la documentazione di Mozilla per CSP here e here.

Update - Guida Evidenziare CSP

CSP è ora disponibile su all browsers (Bordo aggiunto il supporto, yay!) E la sua un gigantesco balzo in avanti nella sicurezza del web. Per chi fosse interessato a ottenere più supporto di terze parti per il CSP, vedere questi:

  1. Modernizr support for CSP
  2. Visual Studio support for CSP. Nota che il collegamento del browser non funziona se hai CSP abilitato poiché utilizza JavaScript in linea.
  3. Visual Studio Web Essentials Extension support for CSP. Web Essentials è un componente aggiuntivo di Visual Studio, le cui funzionalità spesso finiscono nella prossima versione di Visual Studio.
+0

Perché opt-in per bloccare una funzionalità e quindi creare problemi con una libreria che utilizza tale funzionalità? – dandavis

+1

La funzionalità bloccata è CSS in linea e JavaScript che possono causare vulnerabilità di sicurezza. L'uso di file CSS e JavaScript separati è perfetto. Modernizr fa uso della tecnica di rivestimento interno per eseguire i suoi test. Potrebbe funzionare anche se ha fornito file separati. Per una comprensione più approfondita del CSP, consiglio di leggere https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy e https://developer.mozilla.org/en-US/docs/ Web/Security/CSP –

+3

Wow, questo è un affare completo per Modenizr in ambienti sicuri. – Keith

risposta

5

Sospetto che non ci sia altra soluzione che riscrivere le parti di Modernizr che usano codice inline o codice valutato dinamicamente (che si applica sia a JS che a CSS). Le esperienze di AngularJS ngCsp potrebbero essere utili qui.

-1

Ho trovato una correzione senza dover utilizzare inline non sicuro.

È possibile modificare il unminimized Modernizr in una sola riga:

fakeBody = body || document.createElement('body'); 

convertito al

fakeBody = document.createElement('body'); 

opere su IE9, Firefox e Chrome.