+---

+title: Web security

+slug: Web/Security

+tags:

+ - Landing

+ - NeedsTranslation

+ - Security

+ - TopicStub

+ - Web

+translation_of: Web/Security

+---

+<div class="summary">

+<p>Ensuring that your website or open web application is secure is critical. Even simple bugs in your code can result in private information being leaked, and bad people are out there trying to find ways to steal data. <span class="seoSummary">The web security oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.</span></p>

+</div>

+

+<p>{{LandingPageListSubpages}}</p>

+

+<p>{{QuickLinksWithSubpages}}</p>

+---

+title: Subresource Integrity

+slug: Web/Security/Subresource_Integrity

+tags:

+ - Beveiliging

+ - HTML

+ - HTTP

+ - Intro

+ - netwerken

+translation_of: Web/Security/Subresource_Integrity

+---

+<p><strong>Subresource Integrity</strong> (SRI) is een beveiliging dat browsers in staat stelt om bestanden (van bijvoorbeeld een CDN) te verifiëren, dat ze zijn geleverd zonder onverwachte manipulatie door een derde partij. Het werkt door het bestand te vergelijken met een cryptografische hash dat u doorgeeft.</p>

+

+<h2 id="Hoe_Subresource_Integrity_helpt">Hoe Subresource Integrity helpt</h2>

+

+<p>Het gebruik van {{Glossary("CDN", "Content Delivery Networks (CDNs)")}} om bestanden  te hosten zoals scripts en stylesheets dat gedeeld zijn over meerdere websites kan positief zijn voor de snelheid en bandbreedte. Maar met CDNs bestaat er ook een risico. Als een aanvaller (hacker) de controle overneemt van de CDN, kan hij malicieuze code in de bestanden van de CDN injecteren of ze compleet vervangen. Hij kan dus ook alle websites aanvallen die de CDN gebruiken.</p>

+

+<p>De Subresource Integrity stelt jouw in staat om dit risico te minimaliseren, door te garanderen dat de bestanden van je Web applicatie of Web document opvraagt (van een CDN of ergens anders) geleverd zijn zonder dat een derde partij de inhoud veranderd of ingevoegd heeft.</p>

+

+<h2 id="Gebruik_van_Subresource_Integrity">Gebruik van Subresource Integrity</h2>

+

+<p>Je gebruikt de Subresource Integrity door het specifiëren van een base64-ge-encodeerd cryptografische hash van een bron (file) dat je de browser op haalt, in de waarde van de <strong>integrity</strong> attribuut van een  {{HTMLElement("script")}} of {{HTMLElement("link")}} element.</p>

+

+<p>Een <strong>integrity</strong> value begint met minstens één string, elke string bevat een voorvoegsel wat een bepaald hash algorithme aanduid (op dit moment zijn enkel <code>sha256</code>, <code>sha384</code>, en <code>sha512</code> toegelaten)  , gevolgd door een "-", en eindigt met de base64-geëncodeerde hash.</p>

+

+<div class="note">

+<p>Een <strong>integrity</strong> waarde mag meerdere hashes bevatten, ze worden gesplist door een spatie. Een bron zal geladen worden als het aan één van de hashes voldoet.</p>

+</div>

+

+<p>Een voorbeeld van een <strong>integrity</strong> string met base64-encoded sha384 hash:</p>

+

+<pre>sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC

+</pre>

+

+<div class="note">

+<p>Een <strong>integrity</strong> deelwaarde “hash” is een <strong><em>cryptographic</em> <em>digest</em></strong> gevormd door het toepasen van een bepaalde hash functie op een input (bijvoorbeeld, een script of stylesheet bestand). Maar het is gebruikelijk om <strong><em>hash</em></strong> te gebruiken i.p.v. <em>cryptographic</em> <em>digest</em>. Het wordt ook zo verder gebruikt in het artikel.</p>

+</div>

+

+<h3 id="Hulpmiddellen_voor_het_genereren_van_SRI_hashes">Hulpmiddellen voor het genereren van SRI hashes</h3>

+

+<p>Je kan SRI hashes genereren vanaf de command-line met <strong>openssl</strong> door dit commando op te roepen:</p>

+

+<pre>cat <strong>FILENAME.js</strong> | openssl dgst -sha384 -binary | openssl enc -base64 -A         </pre>

+

+<p>of met <strong>shasum</strong> met een oproep zoals deze:</p>

+

+<pre class="brush: bash line-numbers language-bash"><code class="language-bash">shasum -b -a 384 <strong>FILENAME.js</strong> | awk '{ print $1 }' | xxd -r -p | base64</code></pre>

+

+<div class="note">

+<p><strong>Notes</strong>:</p>

+

+<ul>

+ <li>Het commando <code>xxd</code> neemt de hexadecimale uitvoer van <code>shasum</code> en zet het om in binair.</li>

+ <li>Het <code>awk</code> commando is nodig omdat <code>shasum</code> ook de gehashed bestandnaam zal mee doorgeven aan <code>xxd</code>. Dat kan erge gevolgen hebben, als het bestandnaam ook hex kararkters bevat — omdat <code>xxd</code> het ook zal decoderen en doorgeven aan <code>base64</code>.</li>

+</ul>

+</div>

+

+<p>Een alternatief voor de command-line, is de <strong>SRI Hash Generator</strong> (<a href="https://www.srihash.org/">https://www.srihash.org/</a> ), dit is een online hulpmiddel voor het genereren van SRI hashes.</p>

+

+<h3 id="Content_Security_Policy_en_Subresource_Integrity">Content Security Policy en Subresource Integrity</h3>

+

+<p>Je kan <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> gebruiken om je server te laten afdwingen dat bepaalde type bestanden Subresource Integrity moet gebruiken. Doe dit met {{CSP("require-sri-for")}} richtlijn in de CSP header. voorbeeld:</p>

+

+<pre>Content-Security-Policy: require-sri-for script;</pre>

+

+<p>Dit verplicht dat elk javaScript bestand een SRI moet hebben en dat deze ook geldig is.</p>

+

+<p>Hetzelfde kan ook voor stylesheets:</p>

+

+<pre>Content-Security-Policy: require-sri-for style;</pre>

+

+<p>Je kan ze ook voor beide <code>script</code> en <code>style</code> specifiëren.</p>

+

+<p> </p>

+

+<h3 id="Cross-Origin_Resource_Sharing_and_Subresource_Integrity">Cross-Origin Resource Sharing and Subresource Integrity</h3>

+

+<p>Browsers Controleren ook het resource met <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a>, zo kijkt men als het gebruikte gebruikt mag worden door de opvrager. Een bestand moet dus doorgegeven worden met een <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin">Access-Control-Allow-Origin</a></code> header dat toe laat dat het bestand gedeeld word met de vragende bron. Als voorbeeld:</p>

+

+<pre class="line-numbers language-html"><code class="language-html">Access-Control-Allow-Origin: *</code></pre>

+

+<h2 id="voorbeelden">voorbeelden</h2>

+

+<p>In de volgende voorbeelden, neem aan dat <code id="sriSnippet">oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC</code> de verwachte SHA-384 hash waarde is van het script <code>example-framework.js</code>, en dat er een kopie gehost is op <code>https://example.com/example-framework.js</code>.</p>

+

+<h3 id="Subresource_Integrity_met_het_script_element">Subresource Integrity met het script element</h3>

+

+<p>Je kan gebruik maken van het {{HTMLElement("script")}} element, om de browser te verwittigen dat voor de uitvoering van <code>https://example.com/example-framework.js</code> script. Het eerst moet vergelijken met de verwachte hash in de integrity attribuut.</p>

+

+<pre class="brush: html">&lt;script src="https://example.com/example-framework.js"

+ integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"

+ crossorigin="anonymous"&gt;&lt;/script&gt;</pre>

+

+<div class="note">

+<p>Voor meer details over de <strong>crossorigin</strong> attribuut, zie <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS attributen</a>.</p>

+</div>

+

+<h2 id="Hoe_browsers_Subresource_Integrity_gebruiken">Hoe browsers Subresource Integrity gebruiken</h2>

+

+<p>Browsers gebruiken SRI op deze manier:</p>

+

+<ol>

+ <li>Wanneer een browser een {{HTMLElement("script")}} of {{HTMLElement("link")}} element tegenkomt met een <strong>integrity</strong> attribuut, zal de browser nog voor de uitvoering van het script of het toepassen van de stijlregels. Het script of stylesheet vergelijken met de verwachte hash in de <strong>integrity</strong> attribuut.</li>

+ <li>Als het script of stylesheet niet de voldoet aan de verwachte waarde in de <strong>integrity</strong> attribuut, dan zal de browser het script of stylesheet blokkeren (weigeren om te voeren of toe te passen). Het zal een network error teruggeven om aan te duiden dat het ophalen van een script of stylesheet gefaald is.</li>

+</ol>

+

+<h2 id="Specificaties">Specificaties</h2>

+

+<table class="standard-table">

+ <tbody>

+ <tr>

+ <th scope="col">Specification</th>

+ <th scope="col">Status</th>

+ <th scope="col">Comment</th>

+ </tr>

+ <tr>

+ <td>{{SpecName('Subresource Integrity')}}</td>

+ <td>{{Spec2('Subresource Integrity')}}</td>

+ <td> </td>

+ </tr>

+ <tr>

+ <td>{{SpecName('Fetch')}}</td>

+ <td>{{Spec2('Fetch')}}</td>

+ <td> </td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>

+

+<h3 id="&lt;script_integrity>">&lt;script integrity&gt;</h3>

+

+<h3 id="Sectie"><a class="local-anchor" href="https://developer.mozilla.org/nl/docs/Web/Security/Subresource_Integrity$edit#%3Cscript_integrity%3E"><span>Sectie</span></a></h3>

+

+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

+

+<p>{{Compat("html.elements.script.integrity")}}</p>

+

+<h3 id="CSP_require-sri-for">CSP: require-sri-for</h3>

+

+<h3 id="Sectie_2"><a class="local-anchor" href="https://developer.mozilla.org/nl/docs/Web/Security/Subresource_Integrity$edit#CSP_require-sri-for"><span>Sectie</span></a></h3>

+

+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

+

+<p>{{Compat("http.headers.csp.require-sri-for")}}</p>

+

+<p> </p>

+

+<p> </p>

+

+<h2 id="Zie_ook">Zie ook</h2>

+

+<p> </p>

+

+<ul>

+ <li>Content Security Policy</li>

+ <li>{{httpheader("Content-Security-Policy")}}</li>

+ <li><a href="https://frederik-braun.com/using-subresource-integrity.html" id="page-title">A CDN that can not XSS you: Using Subresource Integrity</a></li>

+</ul>

+

+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>