Framtvinga en innehållssäkerhetsprincip för ASP.NET Core Blazor

Den här artikeln beskriver hur du använder en innehållssäkerhetsprincip (CSP) med ASP.NET Core-appar Blazor för att skydda mot vissa typer av skadliga attacker, till exempel XSS (Cross-Site Scripting) och clickjacking-attacker . XSS är en säkerhetsrisk där en cyberattacker placerar ett eller flera skadliga skript på klientsidan i en apps renderade innehåll. I en klickkapningsattack luras en användare till interaktioner med en lockbetewebbplats som har din app inbäddad i den.

En CSP hjälper till att skydda mot dessa typer av attacker genom att informera webbläsaren om giltiga:

• Källor för inläst innehåll, inklusive skript, formatmallar, bilder och plugin-program.
• Åtgärder som vidtas av en sida och som anger tillåtna URL-mål för formulär.
• När din app kan bäddas in på en annan webbplats via <frame>, <iframe>, <object>eller <embed> taggar.

Vi rekommenderar att du läser följande MDN-resurser när du implementerar en CSP:

• Innehållssäkerhetsprincip (CSP)
• Referensvägledning för CSP
• CSP-implementering (Innehållssäkerhetspolicy)

För att tillämpa en CSP på en app anger utvecklaren flera CSP-innehållssäkerhet direktiv i en eller flera Content-Security-Policy rubriker eller <meta> taggar. Vägledning om hur du tillämpar en CSP på en app i C#-kod vid start finns i ASP.NET Core-start Blazor och avsnittet Direktivet frame-ancestors senare i den här artikeln.

Policyer utvärderas av webbläsaren när en sida läses in. Webbläsaren inspekterar sidans källor och avgör om de uppfyller kraven i innehållssäkerhetsdirektiven. När principdirektiven inte uppfylls för en resurs läser webbläsaren inte in resursen. Tänk dig till exempel en princip som inte tillåter skript från tredje part. När en sida innehåller en <script> tagg med ursprung från tredje part i attributet src förhindrar webbläsaren att skriptet läses in.

CSP stöds i de flesta moderna skrivbords- och mobilwebbläsare, inklusive Chrome, Edge, Firefox, Opera och Safari. CSP rekommenderas för Blazor appar.

Varning

Implementering av en CSP minimerar risken för vissa typer av säkerhetshot och garanterar inte att en app är helt säker från XSS- och klickkapningsattacker. Användaragenter, vanligtvis webbläsare, kan tillåta användare att ändra eller kringgå principtillämpning via användarinställningar, bookmarklets, webbläsartillägg, tillägg från tredje part till användaragenten och andra sådana mekanismer. CsP:er fokuserar dessutom bara på att åtgärda en delmängd av attacker, inte alla attacker som kan äventyra säkerheten, till exempel SQL-inmatning, CSRF (Cross-Site Request Forgery), säkerhetsfelkonfiguration och DoS-attacker (Denial-of-Service).

Policydirektiv

Följande direktiv och källor används ofta för Blazor appar. Lägg till ytterligare direktiv och källor efter behov. Följande direktiv används i avsnittet Tillämpa principen i den här artikeln, där exempel på säkerhetsprinciper för Blazor appar tillhandahålls:

• base-uri: Begränsar URL:erna för en sidas <base> tagg. Ange self för att ange att appens ursprung, inklusive schemat och portnumret, är en giltig källa.
• default-src: Anger en reserv för källdirektiv som inte uttryckligen anges av principen. Ange self för att ange att appens ursprung, inklusive schemat och portnumret, är en giltig källa.
• img-src: Anger giltiga källor för bilder.
  • Ange data: för att tillåta inläsning av bilder från data: URL:er.
  • Ange https: för att tillåta inläsning av bilder från HTTPS-slutpunkter.
• object-src: Anger giltiga källor för taggarna <object>, <embed>och <applet>. Ange none för att förhindra alla URL-källor.
• script-src: Anger giltiga källor för skript.
  • Ange self för att ange att appens ursprung, inklusive schemat och portnumret, är en giltig källa.
  • I en Blazor app på klientsidan:
    • Ange wasm-unsafe-eval för att tillåta att Blazor Mono-runtime på klientsidan ska kunna fungera.
    • Ange eventuella ytterligare hashvärden för att tillåta att de nödvändiga skripten utanför ramverket laddas in. Ange till exempel unsafe-hashes med en hash av sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0= för att tillåta inline-JavaScript för navigeringskontrollen i komponenten NavMenu.
  • I en Blazor app på serversidan anger du hashvärden för att tillåta att nödvändiga skript läses in.
• style-src: Anger giltiga källor för formatmallar.
  • Ange self för att ange att appens ursprung, inklusive schemat och portnumret, är en giltig källa.
  • Om appen använder infogade format anger du unsafe-inline för att tillåta användning av infogade formatmallar.
• connect-src: Begränsar url:er som kan läsas in med hjälp av skriptgränssnitt. Schemakällorna http:, ws: (WebSocket Protocol) och wss: (WebSocket Secure Protocol) anges.
• upgrade-insecure-requests: Anger att innehålls-URL:er från osäkra (HTTP)-källor ska hämtas säkert via HTTPS.

Föregående direktiv stöds av alla webbläsare utom Microsoft Internet Explorer.

Så här hämtar du SHA-hashar för ytterligare infogade skript:

• Använd den CSP som visas i avsnittet Tillämpa principen.
• Få åtkomst till webbläsarens utvecklarverktygskonsol när du kör appen lokalt. Webbläsaren beräknar och visar hashvärden för blockerade skript när en CSP-rubrik eller meta tagg finns.
• Kopiera hashvärdena som tillhandahålls av webbläsaren till de script-src källorna. Använd enkla citattecken runt varje hash.

En matris över webbläsarstöd för Innehållssäkerhetspolicy nivå 2 finns i Kan jag använda: Innehållssäkerhetspolicy nivå 2.

Tillämpa principen

Du kan använda en CSP via:

• Ett svarshuvud utfärdat av servern (till exempel IIS) eller utfärdat av appen (se Kontrollera headers i C#-kod vid start).
• <meta>-tag. Den här artikeln visar bara taggmetoden <meta> .

Så här använder du en <meta> tagg för att tillämpa principen:

• Ange värdet för attributet http-equiv till Content-Security-Policy.
• Placera direktiven i värdet för attributet content. Avgränsa direktiv med semikolon (;). Ett avslutande semikolon för det sista direktivet i principsträngen krävs inte enligt specifikationen för innehållssäkerhetsprincipnivå 3.
• Placera taggen <meta><head> i innehållet precis innanför den inledande <head> taggen. Policyn utvärderas och påtvingas när CSP-markupen parsas, så den bör visas överst i <head>-markupen för att säkerställa att den tillämpas på alla <script>-taggar och <link>-taggar.

I följande avsnitt visas exempelprinciper. De här exemplen är versionerade tillsammans med den här artikeln för varje lansering av Blazor. Om du vill använda en version som är lämplig för din version väljer du dokumentversionen med listrutan Version på den här webbsidan.

Direktivet frame-ancestors

Direktivet frame-ancestors anger giltiga överordnade som kan bädda in en sida med <frame>, <iframe>, <object>, eller <embed>-taggar. Ett frame-ancestors direktiv kan inte tillämpas via en <meta> taggbaserad CSP. Direktivet måste tillämpas genom ett svarshuvud. En CSP-svarsrubrik kan läggas till av en servervärd, eller så kan app-C#-kod lägga till eller uppdatera en CSP med ett frame-ancestors direktiv.

Blazor Web Apps (.NET 8 eller senare) innehåller automatiskt ett svarshuvud som anger värdet till 'self':

Content-Security-Policy: frame-ancestors 'self'

Om du vill ändra standardvärdet till det mer restriktiva 'none' och förhindra att alla föräldrar bäddar in appen anger du ContentSecurityFrameAncestorsPolicy alternativet i anropet till AddInteractiveServerRenderMode i Program filen. Följande träder endast i kraft när WebSocket-komprimering är aktiverat (ConfigureWebSocketAcceptContext anges, vilket är standard för Blazor appar).

.AddInteractiveServerRenderMode(o => o.ContentSecurityFrameAncestorsPolicy = "'none'")

I Blazor Server appar läggs inte ett standarddirektiv frame-ancestors till svarshuvudssamlingen. Du kan lägga till en CSP-rubrik manuellt med mellanprogram i pipelinen för bearbetning av begäran:

app.Use(async (context, next) =>
{
    context.Response.Headers.Add("Content-Security-Policy", "frame-ancestors 'none'");
    await next();
});

Varning

Undvik att ange frame-ancestors direktivvärdet till 'null' när WebSocket-komprimering är aktiverat (komprimering är standard) eftersom det gör appen sårbar för skadliga skriptinmatning och klickkapningsattacker.

Mer information finns i CSP: frame-ancestors (MDN-dokumentation).

Blazor-appar på serversidan

Följande exempel är en startpunkt för vidare utveckling. Överst <head> i innehållet tillämpar du de direktiv som beskrivs i avsnittet Principdirektiv , tillsammans med andra direktiv som din appspecifikation kräver.

För Blazor Web App eller Blazor Server appar:

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'wasm-unsafe-eval' 'unsafe-hashes' 
        'sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0=';
    style-src https:;
    connect-src 'self' http: ws: wss:;
    upgrade-insecure-requests;" />

Blazor Web Apps innehåller en infogad onclick JavaScript-händelsehanterare i komponenten NavMenu som kräver någon av följande ändringar:

• Lägg till en hash i script-src direktivet med nyckelordet unsafe-hashes :

  'unsafe-hashes' 'sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0='
  

  Mer information finns i CSP: script-src: Osäkert infogat skript (MDN-dokumentation).

• Flytta den infogade JavaScript-händelsehanteraren till en JavaScript-fil eller -modul som tillåts laddas av policyn.

Blazor Web Apps har också en ImportMap komponent i <head> innehåll som återger en inbäddad importmappningstagg <script>. För att ändra policyn för att möjliggöra att importkartan läses in, se avsnittet Lösa CSP-överträdelser med Subresource Integrity (SRI) eller en kryptografisk nonce.

Lägg till ytterligare script-src och style-src hashtaggar som krävs av appen. Under utvecklingen använder du ett onlineverktyg eller webbläsarutvecklarverktyg för att få hashvärdena beräknade åt dig. Till exempel rapporterar följande felmeddelande i webbläsarens konsol hashen för ett obligatoriskt skript som inte omfattas av policyn.

Vägrade att köra infogat skript eftersom det strider mot följande innehållssäkerhetsprincipdirektiv: " ... ". Antingen nyckelordet "unsafe-inline", en hash ('sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=') eller en nonce ('nonce-...') krävs för att tillåta infogad körning.

Det specifika skriptet som är associerat med felet visas i konsolen bredvid felet.

Information om hur du tillämpar en CSP på en app i C#-kod vid start finns i ASP.NET Core Blazor start.

Appar på klientsidan Blazor

Följande exempel är en startpunkt för vidare utveckling. I innehållet <head> tillämpar du de direktiv som beskrivs i avsnittet Policy-direktiven:

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'wasm-unsafe-eval';
    style-src 'self';
    connect-src 'none';
    upgrade-insecure-requests">

Lägg till ytterligare script-src och style-src hashtaggar som krävs av appen. Under utvecklingen använder du ett onlineverktyg eller webbläsarutvecklarverktyg för att få hashvärdena beräknade åt dig. Till exempel rapporterar följande felmeddelande i webbläsarens konsol hashen för ett obligatoriskt skript som inte omfattas av policyn.

Vägrade att köra infogat skript eftersom det strider mot följande innehållssäkerhetsprincipdirektiv: " ... ". Antingen nyckelordet "unsafe-inline", en hash ('sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=') eller en nonce ('nonce-...') krävs för att tillåta infogad körning.

Det specifika skriptet som är associerat med felet visas i konsolen bredvid felet.

Lösa CSP-överträdelser med Subresource Integrity (SRI) eller en kryptografisk nonce

Två metoder för att lösa CSP-överträdelser, som beskrivs i de kommande två avsnitten, är:

• Subresource Integrity (SRI)Recommended
• Kryptografisk nonce

Inför Subresource Integrity (SRI)

Med subresource Integrity (SRI) kan webbläsare bekräfta att hämtade resurser inte har manipulerats under överföring. En kryptografisk hash som tillhandahålls på resursen måste matcha den hash som beräknas av webbläsaren för den hämtade resursen och hashen som anges i CSP. Webbläsarkompatibilitet kan utvärderas på Kan jag använda? Underresursintegritet.

I följande exempel för en Blazor Server app beräknas en integritet med hjälp av ett verktyg från tredje part och anges för skriptet Blazor (blazor.server.js) och CSP. Skriptet Blazor ändras inte dynamiskt i det här scenariot och har en stabil SHA-hash, så du kan hårdkoda integrity attributets värde.

Varning

crossorigin Ange attributet på en underresurs som läses in från ett annat ursprung utan CORS (Cross-Origin Resource Sharing). Om appens ursprung skiljer sig från var en underresurs laddas från krävs ett Access-Control-Allow-Origin huvud som gör att resursen kan delas med det begärande ursprunget, annars måste crossorigin attributet tillämpas på underresursens etikett i appen. Annars antar webbläsaren principen "fail-open" för underresursen, vilket innebär att underresursen läses in utan att kontrollera dess integritet.

Attributet crossorigin läggs inte till i taggen Blazor<script> i följande exempel eftersom skriptet Blazor läses in från appens ursprung.

Mer information finns i Resursdelning mellan ursprung och underresursintegritet (MDN-dokumentation).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Security-Policy" content="
        base-uri 'self';
        default-src 'self';
        img-src data: https:;
        object-src 'none';
        script-src 'sha256-FyuamsHhg0nWZUnu/f5qrt2DlL1XKt5AX+cgRhtxtfg=';
        style-src https:;
        connect-src 'self' http: ws: wss:;
        upgrade-insecure-requests;" />
    ...
</head>
<body>
    ...
    <script src="_framework/blazor.server.js" 
        integrity="sha256-FyuamsHhg0nWZUnu/f5qrt2DlL1XKt5AX+cgRhtxtfg="></script>
</body>
</html>

I följande exempel för en Blazor Web App (.NET 8 eller senare) beräknas en integritet för komponenten ImportMap (.NET 9 eller senare). Integritetsvärdet ImportMap beräknas för varje appbegäran eftersom komponenten ImportMap återger unikt innehåll varje gång sidan genereras för tillgångar med fingeravtryck.

Den renderade importkartan från komponenten ImportMap genereras av appen vid dess ursprung, så crossorigin attributet ingår inte i taggen ImportMap . Mer information finns i MDN CSP Guide: Hashes and Subresource Integrity (MDN-dokumentation).

@using System.Security.Cryptography
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Security-Policy" content="
        base-uri 'self';
        default-src 'self';
        img-src data: https:;
        object-src 'none';
        script-src 'self' 'wasm-unsafe-eval' 'unsafe-hashes' '@integrity'
            'sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0=';
        style-src https:;
        connect-src 'self' http: ws: wss:;
        upgrade-insecure-requests;" />
    ...
    <ImportMap integrity="@integrity" />
    ...
</head>
...
</html>

@code {
    private string? integrity;

    [CascadingParameter]
    public HttpContext? HttpContext { get; set; }

    protected override void OnInitialized()
    {
        var metadata = HttpContext?.GetEndpoint()?.Metadata
            .GetOrderedMetadata<ImportMapDefinition>();
        var utf8 = new System.Text.UTF8Encoding();
        var metadataBytes = utf8.GetBytes(
            metadata?.FirstOrDefault<ImportMapDefinition>()?.ToString()
                .ReplaceLineEndings("\n") ?? string.Empty);
        integrity = 
            $"sha256-{Convert.ToBase64String(SHA256.HashData(metadataBytes))}";
    }
}

Före .NET 6 använder du .Replace("\r\n", "\n") i stället för att anropa ReplaceLineEndings i föregående kod.

Obs

Om ytterligare attribut måste splattas på komponenternas ImportMap renderade <script> element kan du skicka en ordlista med alla attribut till komponenten ImportMap i dess AdditionalAttributes egenskap. Attributet integrity name-value pair skickas i ordlistan med resten av de ytterligare skickade attributen.

Adoptera en kryptografisk nonce

En kryptografisk nonce (nummer som används en gång) gör det möjligt för webbläsare att bekräfta att hämtade resurser inte manipuleras under överföring. En kryptografisk nonce för engångsbruk som anges i CSP måste matcha det nonce som anges på resursen. Webbläsarkompatibilitet kan utvärderas på Kan jag använda? Nej, nej.

I följande exempel för en Blazor Web App (.NET 8 eller senare) skapas en nonce för komponenten ImportMap (.NET 9 eller senare) med ett unikt värde varje gång appen läses in.

Mer information finns i MDN CSP Guide: Nonces och CSP: script-src: Osäkert inbäddat skript (MDN-dokumentation).

@using System.Security.Cryptography
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Security-Policy" content="
        base-uri 'self';
        default-src 'self';
        img-src data: https:;
        object-src 'none';
        script-src 'self' 'wasm-unsafe-eval' 'unsafe-hashes' 'nonce-@nonce' 
            'sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0=';
        style-src https:;
        connect-src 'self' http: ws: wss:;
        upgrade-insecure-requests;" />
    ...
    <ImportMap nonce="@nonce" />
    ...
</head>
...
</html>

@code {
    private string? nonce;

    protected override void OnInitialized()
    {
        using (var rng = RandomNumberGenerator.Create())
        {
            var nonceBytes = new byte[32];
            rng.GetBytes(nonceBytes);
            nonce = Convert.ToBase64String(nonceBytes);
        }
    }
}

Obs

Om ytterligare attribut måste läggas till på ImportMap-komponentens renderade <script>-element, kan du skicka en ordlista med alla attribut till ImportMap-komponenten i dess AdditionalAttributes-egenskap. Nonce name-value-paret skickas i ordboken med resten av de övriga skickade attributen.

Tillämpa en CSP i miljöer som inte ärDevelopment

När en innehållssäkerhetspolicy tillämpas på en Blazor-appens <head>-innehåll stör det lokala testandet i den Development-miljön. Till exempel Webbläsarlänk och webbläsaruppdateringsskriptet kan inte läsas in. Följande exempel visar hur du tillämpar CSP:ens <meta> tagg i icke-Development miljöer.

Obs

Exemplen i det här avsnittet visar inte hela taggen <meta> för molntjänstleverantörerna. De fullständiga <meta> taggarna finns i underavsnitten i avsnittet Tillämpa principen tidigare i den här artikeln.

Det finns tre allmänna metoder:

• Tillämpa CSP via komponenten App, som tillämpar CSP:en på alla layouter i appen.
• Om du behöver tillämpa CSP:er på olika områden i appen, till exempel en anpassad CSP för endast administratörssidorna, använder du csp:erna per layout med hjälp av taggen <HeadContent>. För fullständig effektivitet måste varje applayoutfil använda metoden.
• Värdtjänsten eller servern kan tillhandahålla en CSP via ett Content-Security-Policy-huvud som lagts till en app:s utgående svar. Eftersom den här metoden varierar beroende på värdtjänst eller server behandlas den inte i följande exempel. Om du vill använda den här metoden kan du läsa dokumentationen för din värdtjänstleverantör eller -server.

Blazor Web App tillvägagångssätt

I komponenten App (Components/App.razor) injicerar du IHostEnvironment:

@inject IHostEnvironment Env

I App komponentens <head>-innehåll tillämpar du CSP:en när den inte finns i den Development miljön:

@if (!Env.IsDevelopment())
{
    <meta ...>
}

Du kan också använda CSP:er per layout i mappen Components/Layout, vilket visas i följande exempel. Kontrollera att varje layout anger en CSP.

@inject IHostEnvironment Env

@if (!Env.IsDevelopment())
{
    <HeadContent>
        <meta ...>
    </HeadContent>
}

Blazor WebAssembly apptillvägagångssätt

I komponenten App (App.razor) injicerar du IWebAssemblyHostEnvironment:

@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IWebAssemblyHostEnvironment Env

När du arbetar med App-komponentens <head>-innehåll, tillämpa CSP när du inte är i Development-miljön.

@if (!Env.IsDevelopment())
{
    <HeadContent>
        <meta ...>
    </HeadContent>
}

Du kan också använda föregående kod men tillämpa CSP:er per layout i mappen Layout. Kontrollera att varje layout anger en CSP.

Begränsningar för metataggen

En <meta> taggprincip stöder inte följande direktiv:

• frame-ancestors
• report-to
• report-uri
• sandbox

Om du vill stödja föregående direktiv använder du en rubrik med namnet Content-Security-Policy. Direktivsträngen är huvudrubrikens värde.

Testa en princip och ta emot överträdelserapporter

Testning hjälper till att bekräfta att skript från tredje part inte oavsiktligt blockeras när du skapar en inledande princip.

Om du vill testa en princip under en viss tidsperiod utan att tillämpa principdirektiven anger du <meta> taggens http-equiv-attribut eller rubriknamn för en huvudbaserad princip till Content-Security-Policy-Report-Only. Felrapporter skickas som JSON-dokument till en angiven URL. Mer information finns i MDN:s webbdokumentation: Content-Security-Policy-Report-Only.

Information om hur du rapporterar om överträdelser när en princip är aktiv finns i följande artiklar:

• rapportera till
• report-uri

Även om report-uri inte längre rekommenderas för användning bör båda direktiven användas tills report-to stöds av alla större webbläsare. Använd inte enbart report-uri eftersom stöd för report-uri kan komma att tas bort när som helst från webbläsare. Ta bort stöd för report-uri i dina principer när report-to stöds fullt ut. För att spåra införandet av report-to kan du se Can I use: report-to.

Testa och uppdatera en appens policy varje utgåva.

Felsöka

• Fel visas i webbläsarens utvecklarverktygskonsol. Webbläsare ger information om:
  • Element som inte följer principen.
  • Så här ändrar du principen för att tillåta ett blockerat objekt.
• En princip är bara helt effektiv när klientens webbläsare stöder alla inkluderade direktiv. En aktuell webbläsarstödmatris finns i Kan jag använda: Content-Security-Policy.

Ytterligare resurser

• Tillämpa en CSP i C#-kod vid start av programmet
• MDN-webbdokument: CSP(Content Security Policy)
• MDN Web Docs: Content-Security-Policy svarshuvud
• Principnivå 3 för innehållssäkerhet
• Google CSP Evaluator