Imansible accedere a cssRules dal file css locale in Chrome 64

ecco un semplice esempio del problema:

    window.onload=function(){ try{ alert(document.styleSheets[0]); // works alert(document.styleSheets[0].cssRules); // doesn't even print undefined }catch(e){alert(e)} // catch and alert the error }      

body{background-color:green;} myStyle.css body{background-color:green;}

lo script funziona bene se dovessi usare

SOLUZIONI:
1. funziona quando i file sono in linea / localhost
2. funziona con altri browser (es. Internet Explorer, Microsoft Edge, Firefox)
3. chrome –allow-file-access-from-files

TL; DR: A partire da Chrome 64 dovrai utilizzare un server di sviluppo locale per testare funzionalità che dipendono dal modello a oggetti CSS.

L’accesso alle regole CSS in un foglio di stile caricato dal filesystem locale viola un criterio CORS (Cross-Origin Resource Sharing) , ma Chrome non l’ha applicato fino a poco tempo fa e altri browser non sembrano ancora applicarlo.

Chrome 64.0.3282.0 (pubblicato a gennaio 2018, elenco completo delle modifiche ) include una modifica alle regole di sicurezza per i fogli di stile. Non sono riuscito a trovare questo cambiamento in un registro delle modifiche meno dettagliato rispetto all’elenco completo di commit.

Commit a4ebe08 in Chromium è descritto:

Aggiorna il comportamento di CSSStyleSheet in modo che corrisponda alle specifiche per l’origine della sicurezza

Spec è qui: https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface

Aggiornato: i seguenti metodi ora lanciano un SecurityError se il foglio di stile non è accessibile:

  • cssRules () / rules ()
  • insertRule ()
  • deleteRule ()

Questo commit è una correzione per il bug Sicurezza: implementazione CORS incoerente per quanto riguarda i CSS e l’elemento link. Le specifiche W3C collegate descrivono in dettaglio dove l’uso del modello di oggetti CSS richiede l’accesso alla stessa origine.

Questo è un vero vincolo di sicurezza e la soluzione che hai postato (online / localhost) è probabilmente la soluzione più tipica. Per ulteriori informazioni, consultare MDN Come si configura un server di test locale? – discute perché e come utilizzare un server di sviluppo locale per evitare problemi CORS.

Detto questo, ci sono ancora alcuni problemi e dibattiti aperti su questo cambiamento.

  • Questo commento sul bug di sicurezza originale si lamenta che l’unico modo per rilevare che il foglio di stile non è accessibile da JavaScript è con un try/catch .
  • Un bug Chromium è stato aperto il 23 gennaio ( document.styleSheets.cssRules è nullo anche con Access-Control-Allow-Origin: * ) suggerisce che potrebbe esserci un problema di implementazione con la nuova regola di sicurezza che interrompe determinati workaround.
  • Le specifiche implementate sembrano piuttosto stabili, ma hanno ancora lo stato “Working Draft”, quindi chi sa dove atterrerà e quali altri browser implementeranno.