Utilia

SRI-hashgenerator

Genereer Subresource Integrity-hashes (SRI, sha384) voor een JavaScript- of CSS-bestand en kopieer de kant-en-klare integrity- en crossorigin-attributen.

Plak de inhoud van het bestand of open het bestand zelf: deze tool downloadt geen URL’s. Een script van een andere site inlezen zou alleen kunnen als die server dat toestaat (CORS) of als een eigen server het voor je ophaalt, en niets wat je hier hasht verlaat ooit je browser. Hash precies het bestand dat je gaat aanbieden.

Hashen

De tekst wordt als UTF-8 gehasht. Browsers zetten Windows-regeleinden (CRLF) in geplakte tekst om naar LF, en één gewijzigde byte maakt de hash ongeldig: open bij twijfel het bestand zelf.

Algoritmen

De URL wordt alleen in de snippet gezet en nooit opgevraagd. Laat het veld leeg om de bestandsnaam te gebruiken.

Zo genereer je een SRI-hash

  1. Kies onder Hashen voor Geplakte code of Bestanden.
  2. Plak de exacte inhoud van het script of stylesheet in Inhoud van het script of stylesheet en klik op SRI-hash genereren, of sleep een of meer .js- en .css-bestanden naar het sleepvak. De hashes worden bijgewerkt terwijl je typt.
  3. Laat SHA-384 (aanbevolen) aangevinkt, of voeg SHA-256 en SHA-512 toe. Elk aangevinkt algoritme voegt één token aan de waarde toe.
  4. Kies de Tag (automatisch op basis van de bestandsnaam, <script>, <script type="module"> of <link rel="stylesheet">), typ de URL van de resource voor de snippet (optioneel) en kies de crossorigin-modus.
  5. Kopieer de integrity-waarde of de volledige tag.
  6. Wil je een tag controleren die je al gebruikt, plak dan de waarde of de hele tag in Een bestaande integrity-waarde controleren (optioneel).

Wat Subresource Integrity doet

Laadt een pagina een script van een CDN, dan vertrouwt de browser alles wat die server teruggeeft. Wordt het CDN gehackt of het bestand gewijzigd, dan draait de aangepaste code met volledige toegang tot je pagina. Subresource Integrity (W3C SRI) dicht dat gat: je publiceert de verwachte hash van het bestand in het attribuut integrity, de browser hasht wat hij downloadt en weigert het script uit te voeren of het stylesheet toe te passen als de twee verschillen.

<script src="https://cdn.example.com/lib.min.js"
        integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO"
        crossorigin="anonymous"></script>

De waarde bestaat uit de naam van het algoritme, een streepje en de Base64-gecodeerde digest van de bytes van het bestand. Het voorbeeld hierboven is de hash van alert('Hello, world.'); uit de SRI-specificatie. Staan er meerdere hashes, dan kijken browsers alleen naar het sterkste algoritme dat aanwezig is en accepteren ze het bestand als een van de hashes van dat algoritme overeenkomt. Zo kan een site tijdens een uitrol twee versies van een bestand vermelden.

Waarom crossorigin nodig is

Bij een bestand van een andere origin kan de browser de integriteit alleen controleren als het antwoord in CORS-modus wordt opgehaald. De tag heeft dus een attribuut crossorigin nodig en de server moet antwoorden met een header Access-Control-Allow-Origin. Gebruik anonymous (zonder cookies) voor openbare CDN’s; use-credentials is voor zeldzame privéresources. Zonder CORS blokkeert de browser het bestand in plaats van het ongecontroleerd te laden.

Waarom deze tool geen URL’s ophaalt

Deze tool hasht alleen code die je plakt of bestanden die je opent. Een script via zijn URL in de pagina downloaden werkt alleen als die server cross-origin lezen toestaat, en om dat te omzeilen zou een server het bestand voor je moeten ophalen, die dan ook zou zien wat je hasht. Alles hier draait in je browser. De eenvoudigste methode: download precies het bestand waarnaar je gaat verwijzen (dezelfde versie en dezelfde geminificeerde build) en open het hier.

Veelgestelde vragen

Welk algoritme moet ik gebruiken?

SHA-384 is de gebruikelijke keuze en wat de meeste CDN’s publiceren. SHA-256 en SHA-512 worden ook door alle moderne browsers ondersteund. MD5 en SHA-1 zijn niet toegestaan in SRI.

Mijn hash klopt, maar de browser blokkeert het bestand toch. Hoe kan dat?

Controleer of de server Access-Control-Allow-Origin meestuurt en of de tag crossorigin heeft. Zorg er ook voor dat het CDN dezelfde bytes levert: een andere versie, een automatische minifier of een ontbrekend regeleinde aan het einde veranderen allemaal de hash.

Waarom geeft geplakte code een andere hash dan het bestand?

Browsers zetten Windows-regeleinden (CRLF) in tekstvelden om naar LF, en een editor kan een byte order mark of een laatste regeleinde toevoegen of weghalen. Open het bestand zelf om de exacte bytes te hashen.

Heb ik SRI nodig voor bestanden op mijn eigen domein?

SRI beschermt tegen wijzigingen nadat je de hash hebt berekend, dus het is vooral belangrijk bij hosting door derden. Voor je eigen bestanden is een bundler die de hashes tijdens de build genereert meestal handiger.

Werkt SRI voor afbeeldingen of lettertypen?

Het attribuut integrity wordt ondersteund op <script> en <link rel="stylesheet"> (en op <link rel="preload"> of modulepreload voor die bestanden). Afbeeldingen en lettertypen kunnen het niet gebruiken.