Quali sono gli attributi di integrità e origine originaria?


363

Bootstrapcdn ha recentemente cambiato i loro collegamenti. Ora sembra così:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
crossorigin="anonymous">

Cosa significano gli attributi integritye crossorigin? In che modo influiscono sul caricamento del foglio di stile?

Risposte:


237

Entrambi gli attributi sono stati aggiunti a Bootstrap CDN per implementare l'integrità delle risorse secondarie .

Subresource Integrity definisce un meccanismo mediante il quale utente possono verificare che una risorsa recuperata è stata consegnata senza inaspettato manipolazione Riferimento

L'attributo Integrity è consentire al browser di controllare l'origine del file per assicurarsi che il codice non venga mai caricato se l'origine è stata manipolata.

L'attributo Crossorigin è presente quando una richiesta viene caricata utilizzando 'CORS', che ora è un requisito del controllo SRI quando non viene caricata dalla 'stessa origine'. Maggiori informazioni su crossorigin

Maggiori dettagli sull'implementazione di Bootstrap CDN


2
Ho appena usato il validatore html di w3c e ho ricevuto questo messaggio usando l'attributo "integrità":Attribute integrity not allowed on element link at this point.
Tomas Gonzalez,

9
@TomasGonzalez Penso che puoi tranquillamente supporre che lo strumento w3c non sia stato aggiornato per includere il supporto SRI ancora
Josh_at_Savings_Champion

5
Cordiali saluti: Ha anche presentato un bug con il validatore: github.com/validator/validator/issues/151
jonathanKingston

72
Gestore del HTML Checker W3C (aka validatore) qui. Sì, scusa, la pedina non sa ancora nulla integritydell'attributo. Ma presto aggiungerò il supporto per questo, come richiesto in github.com/validator/validator/issues/151 . Quindi potresti voler iscriverti a quel problema per ricevere una notifica quando arriva.
sideshowbarker,

7
OnlineWebCheck.com supporta l' integrityattributo (sono il manutentore di quel correttore).
Albert Wiersch,

112

integrità : definisce il valore hash di una risorsa (come un checksum) che deve essere associato per consentire al browser di eseguirlo. L'hash assicura che il file non sia stato modificato e contenga i dati previsti. In questo modo il browser non caricherà risorse diverse (ad esempio dannose). Immagina una situazione in cui i tuoi file JavaScript sono stati hackerati sul CDN e non c'era modo di saperlo. L'attributo integrità impedisce il caricamento di contenuti che non corrispondono.

Lo SRI non valido verrà bloccato (strumenti per sviluppatori di Chrome), indipendentemente dall'origine incrociata. Sotto il caso NON-CORS quando l'attributo di integrità non corrisponde:

inserisci qui la descrizione dell'immagine

L'integrità può essere calcolata utilizzando: https://www.srihash.org/ o digitando nella console ( collegamento ):

openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A

crossorigin : definisce le opzioni utilizzate quando la risorsa viene caricata da un server su un'origine diversa. (Vedi CORS (Cross-Origin Resource Sharing) qui: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ). Modifica efficacemente le richieste HTTP inviate dal browser. Se viene aggiunto l'attributo "crossorigin", si otterrà l'aggiunta dell'origine: <ORIGIN> coppia chiave-valore nella richiesta HTTP come mostrato di seguito.

inserisci qui la descrizione dell'immagine

crossorigin può essere impostato su "anonimo" o "credenziali d'uso". Entrambi comporteranno l'aggiunta di origine: nella richiesta. Quest'ultimo assicurerà comunque che le credenziali siano controllate. Nessun attributo crossorigin nel tag provocherà l'invio di una richiesta senza origine: coppia chiave-valore.

Ecco un caso quando si richiedono "credenziali d'uso" da CDN:

<script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" 
        crossorigin="use-credentials"></script>

Un browser può annullare la richiesta se crossorigin è impostato in modo errato.

inserisci qui la descrizione dell'immagine

Link
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML / Elemento / link

Blog
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity


6
Risposta molto utile!
Emiel Koning,

4
Grazie per la tua risposta. Adoro i dettagli tecnici!
Anh Tran,

Come possiamo sapere se l'integrità del file è quella che non è stata ancora manipolata? Qualche consiglio?
vadi taslim,

@ yon.fun: per favore non suggerire modifiche per aggiungere i tuoi link. Siamo piuttosto sensibili ai possibili spam qui, anche se i tuoi contenuti sono preziosi.
Halfer

1

Tecnicamente, l' attributo Integrity aiuta proprio in questo: consente la corretta verifica dell'origine dati. Cioè, consente semplicemente al browser di verificare i numeri nel file sorgente corretto con gli importi richiesti dal file sorgente situato sul server CDN.

Andando un po 'più in profondità, nel caso del valore hash crittografato stabilito di questa fonte e della sua verificata conformità con un valore predefinito nel browser: il codice viene eseguito e la richiesta dell'utente viene elaborata correttamente.

L'attributo Crossorigin aiuta gli sviluppatori a ottimizzare i tassi di prestazioni della CDN, proteggendo allo stesso tempo il codice del sito Web da script dannosi.

In particolare, Crossorigin scarica il codice del programma del sito in modalità anonima, senza scaricare cookie o eseguire la procedura di autenticazione. In questo modo, impedisce la perdita di dati dell'utente quando si carica per la prima volta il sito su un server CDN specifico, che i truffatori della rete possono facilmente sostituire gli indirizzi.

Fonte: https://yon.fun/what-is-link-integrity-and-crossorigin/

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.