---
title: Integralność podzasobów (Subresource Integrity)
slug: Web/Bezpieczeństwo/Subresource_Integrity
tags:
  - Bezpieczeństwo
  - HTML
  - HTTP
  - Wstęp
  - bezpieczeństwo aplikacji WWW
translation_of: Web/Security/Subresource_Integrity
---
<p><span class="seoSummary"><strong>Subresource Integrity</strong> (SRI), w wolnym tłumaczeniu "integralność podzasobów", to funkcja bezpieczeństwa umożliwiająca przeglądarkom weryfikowanie, czy zasoby, które przechwytują (np. z<a href="/en-US/docs/Glossary/CDN"> CDN</a>) docierają do nich bez nieporządanych zmian. Działanie takie jest możliwe dzięki używaniu hasha kryptograficznego, z którym przechwycony zasób musi być zgodny.</span></p>

<div class="note">
<p><strong>Notka</strong>: W celu weryfikacji integralności podzasobów danych przekazywanych ze źródła innego, niż dokument w którym są osadzane przeglądarki dodatkowo sprawdzają źródło poprzez międzyźródłowe udostępnianie zasobów, tzw. <a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a>. Dzięki temu upewniają się, że pochodzenie (origin) oferujące dane zasoby pozwala na udostępnianie ich z innym, sprecyfizowanym originem.</p>
</div>

<h2 id="Korzyści_wynikające_z_Subresource_Integrity">Korzyści wynikające z "Subresource Integrity"</h2>

<p>Używając {{Glossary("CDN", "Content Delivery Networks (CDNs)")}} do hostowania plików, jak np. skrypty czy arkusze stylów, które są udostępnianie pośród licznych stron WWW można polepszyć wydajność strony i zachować przepustowość łącza. Jednakże, używając CDNów ryzykujemy, że jeśli atakujący przejmie kontrolę nad CDNem to może wprowadzić szkodliwą zawartość do plików na CDNie (lub zupełnie je zastąpić) i przez to potencjalnie może zaatakować wszystkie strony, które przechwytują pliki z tego CDNu.</p>

<p>"Subresource Integrity" pozwala na ograniczenie ryzyka ataków tego typu poprzez zapewnienie, że pliki które dana aplikacja, bądź dokument WWW przechwytują (m. in. z CDNu) zostały dostarczone bez udziału trzeciej strony, która "wzbogaciła" nasze dane o dodatkową treść oraz bez żadnych, jakichkolwiek innych zmian w przesyłanych plikach.</p>

<h2 id="Używanie_Subresource_Integrity">Używanie "Subresource Integrity"</h2>

<p>Korzystanie z funkcji "Subresource Integrity" jest możliwe przez określenie hasha zakodowanego kryptograficznie w base64 zasobu (pliku), który przeglądarka ma przechwycić, z wartością atrybutu <code>integrity</code> danego elementu {{HTMLElement("script")}} or {{HTMLElement("link")}}.</p>

<p>Wartość <code>integrity</code> zaczyna się od co najmniej jednego stringu, przy czym każdy string zawiera prefiks wskazujący na konkretny algorytm hashowy (obecnie dozwolonymi prefiksami są <code>sha256</code>, <code>sha384</code>, i <code>sha512</code>), następnie opatrzony myślnikiem i zakończony aktualnym hashem zakodowanym w base64.</p>

<div class="note">
<p><strong>Notka</strong>: Wartość <strong>integrity </strong>może zawierać liczne hashe oddzielone białymi znakami. Zasób zostanie załadowany, jeśli dopasuje się z jednym z tych hashów.</p>
</div>

<p>Przykładowy string <code>integrity</code> z hashem sha384 zakodowanym w base64:</p>

<pre>sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
</pre>

<p>Więc <code>oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC</code> to część "hashowa", a prefiks <code>sha384</code> wskazuje, że jest to hash sha384.</p>

<div class="note">
<p><strong>Notka</strong>: Część "hashowa" wartości <code>integrity</code> jest, mówić ściśle, <em><strong>skrótem kryptograficznym</strong></em> formowanym przez zastosowanie określonych funkcji hashowych do danego outputu (np. skryptu lub arkuszu stylów). Zwykle używa się skrótu "hash" do określania <em>skrótu kryptograficznego</em>, więc w taki sposób to określenie jest używane w niniejszym artykule.</p>
</div>

<h3 id="Narzędzia_do_generowania_hashów_SRI">Narzędzia do generowania hashów SRI</h3>

<p>Możesz generować hashe SRI z konsoli z <strong>openssl </strong>używając wywołania polecenia, jak:</p>

<pre class="brush: bash">cat <strong>FILENAME.js</strong> | openssl dgst -sha384 -binary | openssl base64 -A</pre>

<p>lub z <strong>shasum</strong> używając wywołania polecenia, jak:</p>

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

<div class="note">
<p><strong>Notka</strong>:</p>

<ul>
 <li>Krok z <code>xxd</code> pobiera dane wyjściowe w postaci heksadecymalnej z <code>shasum</code> i zamienia je na zapis binarny.</li>
 <li>Krok z <code>awk</code> jest niezbędny, ponieważ <code>shasum</code> w danych wyjściowych przekazuje zahashowaną nazwę pliku do <code>xxd</code>. Trzeba liczyć się z katastrofalnymi konsekwencjami, jeśli nazwa pliku zawiera znaki występujące w zapisie heksadecymalnym - <code>xxd</code> odkoduje ten zapis i przekaże go do <code>base64</code>.</li>
</ul>
</div>

<p>Warto wiedzieć, że dostępny na <a href="https://www.srihash.org/">https://www.srihash.org/</a> <strong>SRI Hash Generator</strong> to narzędzie online umożliwiające generowanie hashy SRI.</p>

<h3 id="Zasady_bezpieczeństwa_zawartości_i_Integralności_podzasobówContent_Security_Policy_Subresource_Integrity">Zasady bezpieczeństwa zawartości i Integralności podzasobów(Content Security Policy &amp; Subresource Integrity)</h3>

<p>Możesz skorzystać z Zasad bezpieczeństwa zawartości (<a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a>), by skonfigurować swój serwer, żeby wymuszał by określone typy plików wymagały stosowania Subresource Integrity. Aby to zrobić użyj dyrektywy {{CSP("require-sri-for")}} w swoim nagłówku CSP, np.:</p>

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

<p>Dzięki temu zapisowi każda próba załadowania JavaScript powiedzie się jedynie, jeśli informacja o Subresource Integrity znajduje się na miejscu, a testy integralności zakończą się sukcesem.</p>

<p>Możesz również określić, że SRI powinno być stosowane podczas ładowania arkuszy stylów:</p>

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

<p>Możesz również określić zarówno <code>script</code>, jak i <code>style</code> aby wymagać SRI przy obu typach plików.</p>

<h3 id="Udostępnianie_zasobów_między_źródłami_i_Integralności_podzasobów_Cross-Origin_Resource_Sharing_Subresource_Integrity">Udostępnianie zasobów między źródłami i Integralności podzasobów (Cross-Origin Resource Sharing &amp; Subresource Integrity)</h3>

<p>Celem weryfikacji integralności podzasobów danych pochodzących z originu innego, niż dokument, w którym są osadzone, przeglądarki dodatkowo sprawdzają dane za pomocą CORS (<a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a>). Upewniają się, że origin dostarczający dane pozwala na udostępnianie wnioskującemu originowi. Wtedy dane muszą zostać dostarczone z nagłówkiem <code><a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin">Access-Control-Allow-Origin</a></code>, co pozwala na udostępnienie danych wnioskującemu originowi, np.:</p>

<pre>Access-Control-Allow-Origin: *</pre>

<h2 id="Przykłady">Przykłady</h2>

<p>W poniższych przykładach przyjmimy, że <code id="sriSnippet">oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC</code> to oczekiwany hash SHA-384 (skrót) określonego skryptu <code>example-framework.js</code> i że istnieje kopia skryptu hostowana na <code>https://example.com/example-framework.js</code>.</p>

<h3 id="Subresource_Integrity_with_the_&lt;script>_element">Subresource Integrity with the &lt;script&gt; element</h3>

<p>Możesz użyć niniejszego elementu {{HTMLElement("script")}}, by nakazać przeglądarce, aby przed wywołaniem skryptu <code>https://example.com/example-framework.js</code> najpierw porównała skrypt z oczekiwanym hashem i zweryfikowała, że są dopasowane.</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><strong>Notka</strong>: By dowiedzieć się więcej nt. zastosowania atrybutu <code>crossorigin</code> sprawdź <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">atrybuty ustawień CORS</a>.</p>
</div>

<h2 id="Jak_przeglądarki_radzą_sobie_z_Subresource_Integrity">Jak przeglądarki radzą sobie z "Subresource Integrity"</h2>

<p>Przeglądarki radzą sobie z SRI poprzez podjęcie poniższych działań:</p>

<ol>
 <li>
  <p>Kiedy przeglądarka napotka element {{HTMLElement("script")}} lub {{HTMLElement("link")}} z atrybutem <code>integrity</code>, przed wywołaniem skryptu lub przed zastosowaniem jakiegokolwiek arkusza stylów określonego przez element {{HTMLElement("link")}}, przeglądarka musi najpierw porównać skrypt lub arkusz stylów do oczekiwanego hasha podanego w wartości <code>integrity</code>.</p>

  <p class="note"><strong>Notka</strong>: Celem weryfikacji integralności podzasobów danych dostarczanych z originu innego, niż dokument, w którym zostały osadzone, przeglądarki dodatkowo sprawdzają dane poprzez stosowanie <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, aby upewnić się, że origin dostarczający dane pozwala na udostępnianie ich z wnioskującym originem.</p>
 </li>
 <li>Jeśli skrypt lub arkusz stylów nie pasuje do odpowiadającej mu wartości <code>integrity</code>, przeglądarka musi odmówić wywołania skryptu lub uwzględnienia arkusza stylów i zamiast tego musi zwrócić błąd sieciowy wskazujący, że nie powiodło się przechwycenie tego skryptu lub arkusza stylów.</li>
</ol>

<h2 id="Specyfikacje">Specyfikacje</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specyfikacja</th>
   <th scope="col">Status</th>
   <th scope="col">Komentarz</th>
  </tr>
 </thead>
 <tbody>
  <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="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2>

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

<p class="hidden">Tabela kompatybilności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz ją współtworzyć, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam pull requesta.</p>

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

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

<p class="hidden">Tabela kompatybilności na tej stronie jest generowana na podstawie danych strukturalnych. Jeśli chcesz ją współtworzyć, sprawdź <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> i wyślij nam pull requesta.</p>

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

<h2 id="Zobacz_również">Zobacz również</h2>

<ul>
 <li>Zasady bezpieczeństwa zawartości (Content Security Policy)</li>
 <li>{{httpheader("Content-Security-Policy")}}</li>
 <li><a href="https://frederik-braun.com/using-subresource-integrity.html" id="page-title">CDN, który Cię nie zXXSuje: Używanie Subresource Integrity</a></li>
 <li><a href="https://w3c-test.org/subresource-integrity/subresource-integrity.html" id="w3c-test">Test na Subresource Integrity z W3C</a></li>
</ul>

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