Säkra webbapplikationer som använder subresursintegritet

Sub Resource Integrity (SRI) är en säkerhetsfunktion som kan användas för att verifiera att resurserna som webbläsaren hämtar inte har manipulerats.

Men varför behöver du det? Kommer du ihåg den där skripttaggen som du fortsätter att kasta på slumpmässiga ställen i din kod? Vad händer om någon fick tillgång till CDN/tredjepartsservern där den var värd och ändrade JavaScriptet som serveras? Det skulle vara ett allvarligt säkerhetsbrott som kan orsaka många problem.

Sub Resource Integrity tillåter tillhandahållande av en hash av filen som måste matcha när webbläsaren hämtar filen.

Hur man använder Sub Resource Integrity

Som nämnts tidigare måste en hash läggas till i skripttaggen. Webbläsaren jämför sedan att skriptfilen som laddas ner har samma hash eller inte.

<script src="https://example.com/example-framework.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" crossorigin="anonymous"></script>

Integritet är en base64-kodad kryptografisk hash som kan genereras (mer om detta nedan). Det är också viktigt att veta att cross-origin måste vara aktiverat på leverantörsservern.

Om skriptet eller stilmallen inte matchar det associerade integritetsvärdet, kommer webbläsaren inte att köra filen/rendera stilmallen. Webbläsaren ger istället ett nätverksfel.

Detta undviker manipulering av filen och man-in-the-midten-attacker. Men det är utvecklarens ansvar att se till att filen är fri från andra sårbarheter.

Genererar SRI

Underresursintegritet kan genereras med OpenSSL. Filens innehåll måste skickas till OpenSSL-kommandot som en ingång och en sammanfattning måste skapas med sha384. Sammandraget måste sedan skickas till ett annat OpenSSL-kommando för att base64 koda det. För att göra det med ett enda kommando:

cat example-framework.js | openssl dgst -sha384 -binary | openssl base64 -A

Eller så finns det onlineverktyg för att göra det också.

SRI och Webpack

Som med allt Webpack finns det ett plugin för att generera Sub Resource Integrity-taggar automatiskt. Eftersom vi undviker att lägga till taggar manuellt när vi använder Webpack på något sätt, blir denna plugin användbar för att hantera hashgenereringsprocessen.

Installera plugin:

npm install webpack-subresource-integrity — save-dev
or
yarn add --dev webpack-subresource-integrity

Lägg till:

import SRIPlugin from 'webpack-subresource-integrity';

const compiler = webpack({

  output: { 

    crossOriginLoading: 'anonymous'

  },

  plugins: [

    new SRIPlugin({

      hashFuncNames: ['sha256', 'sha384'],

      enabled: process.env.NODE_ENV === 'production',

    }),

  ],

});

Webbläsarstöd

Alla större webbläsare (nej, IE ingår inte i den listan) stöder SRI. Det går dock inte sönder i IE, så det är ett måste-ha-verktyg för att undvika säkerhetsrisker.

Och det är allt du behöver veta om Sub Resource Integrity och hur man använder den!

Ursprungligen publicerad på https://www.wisdomgeek.com den 8 juli 2021.