Aplicar uma Política de Segurança de Conteúdo no ASP.NET Core Blazor

Este artigo explica como usar uma CSP (Política de Segurança de Conteúdo) com aplicativos ASP.NET Core Blazor para ajudar a proteger contra determinados tipos de ataques mal-intencionados, como Scripts entre Sites (XSS) e ataques de clickjacking . O XSS é uma vulnerabilidade de segurança em que um ciberataque coloca um ou mais scripts mal-intencionados do lado do cliente no conteúdo renderizado de um aplicativo. Em um ataque de clickjacking, um usuário é enganado a interagir com um site de isca que contém seu aplicativo embutido.

Uma CSP ajuda a proteger contra esses tipos de ataques informando o navegador sobre fontes válidas.

• Fontes para conteúdo carregado, incluindo scripts, folhas de estilos, imagens e plug-ins.
• Ações realizadas por uma página, especificando destinos de URL permitidos para formulários.
• Quando seu aplicativo pode ser inserido em outro site por meio de marcas <frame>, <iframe>, <object>ou <embed>.

Recomendamos ler os seguintes recursos de MDN ao implementar um CSP:

• CSP (Política de Segurança de Conteúdo)
• diretrizes de referência do CSP
• Implementação da Política de Segurança de Conteúdo (CSP)

Para aplicar um CSP a um aplicativo, o desenvolvedor especifica várias diretivas de segurança de conteúdo CSP em um ou mais cabeçalhos Content-Security-Policy ou marcas <meta>. Para obter orientação sobre como aplicar um CSP a um aplicativo no código C# na inicialização, consulte a inicialização ASP.NET Blazor Core e A frame-ancestors seção section de diretiva posteriormente neste artigo.

As políticas são avaliadas pelo navegador enquanto uma página está sendo carregada. O navegador inspeciona as fontes da página e determina se elas atendem aos requisitos das diretivas de segurança de conteúdo. Quando as diretivas de política não são atendidas para um recurso, o navegador não carrega o recurso. Por exemplo, considere uma política que não permita scripts de terceiros. Quando uma página contém uma marca <script> com uma origem de terceiros no atributo src, o navegador impede que o script seja carregado.

O CSP tem suporte na maioria dos navegadores móveis e desktop modernos, incluindo Chrome, Edge, Firefox, Opera e Safari. O CSP é recomendado para aplicativos Blazor.

Aviso

A implementação de um CSP minimiza o risco de certos tipos de ameaças à segurança e não garante que um aplicativo esteja completamente seguro contra ataques XSS e clickjacking. Os agentes de usuário, normalmente navegadores, podem permitir que os usuários modifiquem ou ignorem a imposição de políticas por meio de preferências do usuário, indicadores, extensões de navegador, adições de terceiros ao agente do usuário e outros mecanismos desse tipo. Além disso, os CSPs estão focados apenas na correção de um subconjunto de ataques, não em todos os ataques que podem comprometer a segurança, como ataques de injeção de SQL, Cross-Site Request Forgery (CSRF), configuração incorreta de segurança e ataques de Negação de Serviço (DoS).

Diretivas de política

As seguintes diretivas e fontes são comumente usadas para aplicativos Blazor. Adicione diretivas e fontes adicionais, conforme necessário. As diretivas a seguir são usadas na seção Aplicar a política deste artigo, em que são fornecidas políticas de segurança de exemplo para aplicativos Blazor:

• base-uri: restringe as URLs para a tag <base> de uma página. Especifique self para indicar que a origem do aplicativo, incluindo o esquema e o número da porta, é uma fonte válida.
• default-src: indica uma alternativa para diretivas de origem de dados que não são explicitamente especificadas pela política. Especifique self para indicar que a origem do aplicativo, incluindo o esquema e o número da porta, é uma fonte válida.
• img-src: indica fontes válidas para imagens.
  • Especifique data: para permitir o carregamento de imagens de URLs data:.
  • Especifique https: para permitir o carregamento de imagens de pontos de extremidade HTTPS.
• object-src: indica fontes válidas para as tags <object>, <embed>e <applet>. Especifique none para impedir todas as fontes de URL.
• script-src: indica fontes válidas para scripts.
  • Especifique self para indicar que a origem do aplicativo, incluindo o esquema e o número da porta, é uma fonte válida.
  • Em um aplicativo Blazor do lado do cliente:
    • Especifique wasm-unsafe-eval para permitir o funcionamento do runtime Mono do Blazor do lado do cliente.
    • Especifique quaisquer hashes adicionais para permitir que os scripts fora do framework necessários sejam carregados. Por exemplo, defina unsafe-hashes com um hash de sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0= para permitir o JavaScript inline para o alternador de navegação no componente NavMenu.
  • Em um aplicativo Blazor do servidor, especifique hashes para permitir que os scripts necessários sejam carregados.
• style-src: indica fontes válidas para folhas de estilos.
  • Especifique self para indicar que a origem do aplicativo, incluindo o esquema e o número da porta, é uma fonte válida.
  • Se o aplicativo usar estilos embutidos, especifique unsafe-inline para permitir o uso de seus estilos embutidos.
• connect-src: restringe as URLs que podem ser carregadas usando interfaces de script. As fontes de esquema http:, ws: (protocolo WebSocket) e wss: (protocolo WebSocket Secure) são especificadas.
• upgrade-insecure-requests: indica que as URLs de conteúdo de fontes não seguras (HTTP) devem ser adquiridas de forma segura via HTTPS.

As diretivas anteriores têm suporte de todos os navegadores, exceto o Microsoft Internet Explorer.

Para obter hashes SHA para scripts embutidos adicionais:

• Aplique o CSP mostrado na seção Aplicar a política.
• Acesse o console de ferramentas de desenvolvedor do navegador durante a execução do aplicativo localmente. O navegador calcula e exibe hashes para scripts bloqueados quando um cabeçalho CSP ou marca meta está presente.
• Copie os hashes fornecidos pelo navegador para as fontes script-src. Use aspas simples em cada hash.

Para ver a matriz de suporte no navegador para a Política de Segurança de Conteúdo Nível 2, consulte Posso usar: Política de Segurança de Conteúdo Nível 2.

Aplicar a política

Você pode aplicar um CSP por meio de:

• Um cabeçalho de resposta emitido pelo host (por exemplo, IIS) ou emitido pelo aplicativo (consulte cabeçalhos de controle no código C# na inicialização).
• Uma <meta> marcação. Este artigo demonstra apenas a abordagem da tag <meta>.

Para usar uma tag <meta> para aplicar a política:

• Defina o valor do atributo http-equiv como Content-Security-Policy.
• Coloque as diretivas no valor do atributo content. Diretivas separadas com ponto e vírgula (;). Um ponto-e-vírgula final para a última diretiva da string de política não é necessário de acordo com a especificação de Política de Segurança de Conteúdo Nível 3 .
• Coloque a marca <meta> no <head> conteúdo dentro da marca de abertura <head>. A política é avaliada e imposta quando a marcação CSP é analisada, portanto, a política deve aparecer na parte superior da marcação <head> para garantir que ela seja imposta em todas as marcas <script> e <link>.

As seções a seguir mostram exemplos de políticas. Esses exemplos têm controle de versão neste artigo para cada versão do Blazor. Para usar uma versão apropriada para sua versão, selecione a versão do documento com o seletor suspenso Versão nesta página da Web.

A diretiva frame-ancestors

A diretiva frame-ancestors especifica pais válidos que podem inserir uma página com marcas <frame>, <iframe>, <object>ou <embed>. Uma diretiva frame-ancestors não pode ser aplicada por meio de um CSP baseado em tags <meta>. A diretiva deve ser aplicada por um cabeçalho de resposta. Um cabeçalho de resposta CSP pode ser adicionado por um host de servidor ou o código C# do aplicativo pode adicionar ou atualizar um CSP com uma diretiva frame-ancestors.

Blazor Web Apps (.NET 8 ou posterior) incluem automaticamente um cabeçalho de resposta definindo o valor como 'self':

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

Para alterar o valor padrão para o 'none' mais restritivo e impedir que todos os pais insiram o aplicativo, defina a opção ContentSecurityFrameAncestorsPolicy na chamada para AddInteractiveServerRenderMode no arquivo Program. O seguinte só entra em vigor quando a compactação WebSocket está habilitada (ConfigureWebSocketAcceptContext está configurada, que é o padrão nos Blazor aplicativos).

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

Em aplicativos Blazor Server, uma diretiva padrão para frame-ancestors não é adicionada à coleção de cabeçalhos de resposta. Você pode adicionar um cabeçalho CSP manualmente no pipeline de processamento de solicitação usando o middleware :

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

Aviso

Evite definir o valor da diretiva frame-ancestors para 'null' quando a compactação WebSocket estiver habilitada (a compactação é o padrão) porque torna o aplicativo vulnerável a ataques de injeção de script mal-intencionado e de sequestro de cliques.

Para obter mais informações, consulte CSP: frame-ancestors (documentação do MDN).

Aplicativos Blazor do lado do servidor

O exemplo a seguir é um ponto de partida para desenvolvimento adicional. No topo do <head> conteúdo, aplique o as diretivas descritas em Diretivas de política section, along with any other directives that your app specification requires.

Para aplicativos Blazor Web Appou Blazor Server:

<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 Appincluem um manipulador de eventos JavaScript onclick embutido no componente NavMenu que requer uma das seguintes alterações:

• Adicione um hash à diretiva script-src com a palavra-chave unsafe-hashes:

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

  Para obter mais informações, consulte CSP: script-src: script embutido não seguro (documentação do MDN).

• Mova o manipulador de eventos JavaScript embutido para um arquivo ou módulo JavaScript que a política permita carregar.

Blazor Web Apptambém tem um componente ImportMap no conteúdo <head> que renderiza uma marcação <script> de mapa de importação embutido. Para modificar a política para permitir que o mapa de importação seja carregado, consulte a seção Resolvendo violações de CSP com Integridade de Sub-recurso (SRI) ou um nonce criptográfico.

Adicione hashes script-src e style-src adicionais conforme exigido pelo aplicativo. Durante o desenvolvimento, use uma ferramenta online ou ferramentas de desenvolvedor de navegador para ter os hashes calculados para você. Por exemplo, o seguinte erro do console de ferramentas do navegador relata o hash de um script necessário não coberto pela política:

Não executou o script embutido porque viola a seguinte diretiva de Política de Segurança de Conteúdo: " ... ". A palavra-chave "unsafe-inline", um hash ("sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=") ou um nonce ("nonce-...") é necessário para habilitar a execução embutida.

O script específico associado ao erro é exibido no console ao lado do erro.

Para obter diretrizes sobre como aplicar um CSP a um aplicativo no código C# na inicialização, consulte Inicialização de Blazor do ASP.NET Core.

Aplicativos Blazor do lado do cliente

O exemplo a seguir é um ponto de partida para desenvolvimento adicional. No <head>, aplique as diretrizes descritas na seção Diretrizes da política:

<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">

Adicione hashes script-src e style-src adicionais conforme exigido pelo aplicativo. Durante o desenvolvimento, use uma ferramenta online ou ferramentas de desenvolvedor de navegador para ter os hashes calculados para você. Por exemplo, o seguinte erro do console de ferramentas do navegador relata o hash de um script necessário não coberto pela política:

Não executou o script embutido porque viola a seguinte diretiva de Política de Segurança de Conteúdo: " ... ". A palavra-chave "unsafe-inline", um hash ("sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=") ou um nonce ("nonce-...") é necessário para habilitar a execução embutida.

O script específico associado ao erro é exibido no console ao lado do erro.

Resolvendo violações de CSP com SRI (Integridade de Sub-fonte) ou um nó criptográfico

Duas abordagens para resolver violações de CSP, que são descritas nas próximas duas seções, são:

• SRI (integridade de subrecursos)recomendado
• Nonce criptográfico

Adotar Integridade de Sub-Recursos (SRI)

A integridade de sub-recursos (SRI) permite que os navegadores confirmem que os recursos buscados não são modificados durante o trânsito. Um hash criptográfico fornecido no recurso deve corresponder ao hash computado pelo navegador para o recurso buscado e ao hash listado no CSP. A compatibilidade do navegador pode ser avaliada em Posso usar? Integridade de Sub-recursos.

No exemplo a seguir para um aplicativo Blazor Server, uma integridade é calculada usando uma ferramenta de terceiros e especificada para o script Blazor (blazor.server.js) e CSP. O script Blazor não é alterado dinamicamente nesse cenário e tem um hash SHA estável, portanto, você pode codificar o valor do atributo integrity.

Aviso

Defina o atributo crossorigin em um sub-recurso carregado de uma origem diferente sem CORS (Compartilhamento de recursos entre origens). Se a origem do aplicativo for diferente de onde um sub-recurso é carregado, um cabeçalho Access-Control-Allow-Origin será necessário que permita que o recurso seja compartilhado com a origem solicitante ou então o atributo crossorigin deverá ser aplicado à marca da sub-fonte no aplicativo. Caso contrário, o navegador adotará a política de "fail-open" para o sub-recurso, o que significa que o sub-recurso é carregado sem verificar sua integridade.

O atributo crossorigin não é adicionado à marca Blazor<script> no exemplo a seguir porque o script Blazor é carregado da origem do aplicativo.

Para obter mais informações, consulte Compartilhamento de recursos entre origens e integridade de sub-recursos (documentação da MDN).

<!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>

No exemplo a seguir para um Blazor Web App (.NET 8 ou posterior), uma integridade é calculada para o componente ImportMap (.NET 9 ou posterior). O valor de integridade ImportMap é computado para cada solicitação de aplicativo porque o componente ImportMap renderiza conteúdo exclusivo sempre que a página é gerada para ativos com impressão digital.

O mapa de importação renderizado do componente ImportMap é gerado pelo aplicativo em sua origem, portanto, o atributo crossorigin não está incluído na marca ImportMap. Para obter mais informações, consulte Guia do CSP do MDN: Hashes e Integridade de Sub-recursos (documentação do MDN).

@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))}";
    }
}

Antes do .NET 6, use .Replace("\r\n", "\n") em vez de chamar ReplaceLineEndings no código anterior.

Observação

Se atributos adicionais precisarem ser espalhados no ImportMap elemento renderizado do componente <script>, pode passar um dicionário de todos os atributos para o ImportMap componente na sua AdditionalAttributes propriedade. O par nome-valor do atributo integrity é passado no dicionário com o restante dos atributos passados adicionais.

Adotar um nonce criptográfico

Um nonce criptográfico (número usado uma vez) permite que os navegadores confirmem que os recursos buscados não são adulterados em trânsito. Um nonce criptográfico de uso único, fornecido no CSP, deve corresponder ao nonce indicado no recurso. A compatibilidade do navegador pode ser avaliada em Posso usar? Nonce.

No exemplo a seguir para um Blazor Web App (.NET 8 ou posterior), um nonce é criado para o componente ImportMap (.NET 9 ou posterior) com um valor exclusivo cada vez que o aplicativo é carregado.

Para obter mais informações, consulte Guia do CSP do MDN: Nonces e CSP: script-src: script embutido não seguro (documentação do MDN).

@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);
        }
    }
}

Observação

Se atributos adicionais precisarem ser espalhados no ImportMap elemento renderizado do componente <script>, pode passar um dicionário de todos os atributos para o ImportMap componente na sua AdditionalAttributes propriedade. O par nome-valor nonce é passado no dicionário com o restante dos atributos adicionais passados.

Aplicar um CSP em ambientes não Development

Quando um CSP é aplicado ao conteúdo Blazor de um aplicativo <head>, ele interfere nos testes locais no ambiente Development. Por exemplo, o Link do Navegador e o script de atualização do navegador não carregam. Os exemplos a seguir demonstram como aplicar a tag <meta> do CSP em ambientes não Development.

Observação

Os exemplos desta seção não mostram a marca <meta> completa para os CSPs. As marcas <meta> concluídas são encontradas nas subseções da seção Aplicar a política anteriormente neste artigo.

Três abordagens gerais estão disponíveis:

• Aplique o CSP por meio do componente App, que aplica o CSP a todos os layouts do aplicativo.
• Se precisar aplicar CSPs a diferentes áreas do aplicativo, por exemplo, um CSP personalizado apenas para as páginas de administração, aplique os CSPs por layout usando a marca <HeadContent>. Para uma eficácia completa, cada arquivo de layout de aplicativo deve adotar a abordagem.
• O servidor ou serviço de hospedagem pode fornecer um CSP por meio de um cabeçalho Content-Security-Policy adicionado às respostas de saída de um aplicativo. Como essa abordagem varia de acordo com o servidor ou serviço de hospedagem, ela não será abordada nos exemplos a seguir. Se quiser adotar essa abordagem, consulte a documentação do seu provedor de serviços de hospedagem ou servidor.

Blazor Web App abordagens

No componente App (Components/App.razor), injete IHostEnvironment:

@inject IHostEnvironment Env

No conteúdo App do componente <head>, aplique o CSP quando não estiver no ambiente Development:

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

Alternativamente, aplique CSPs por layout na pasta Components/Layout, conforme demonstrado no exemplo a seguir. Certifique-se de que todo layout especifique um CSP.

@inject IHostEnvironment Env

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

Blazor WebAssembly abordagens de aplicativos

No componente App (App.razor), injete IWebAssemblyHostEnvironment:

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

No conteúdo App do componente <head>, aplique o CSP quando não estiver no ambiente Development:

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

Alternativamente, use o código anterior, mas aplique os CSPs para cada layout na pasta Layout. Certifique-se de que todo layout especifique um CSP.

Limitações de tag meta

Uma política de marca <meta> não dá suporte às seguintes diretivas:

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

Para dar suporte às diretivas anteriores, use um cabeçalho chamado Content-Security-Policy. A cadeia de caracteres de diretiva é o valor do cabeçalho.

Testar uma política e receber relatórios de violação

O teste ajuda a confirmar se os scripts de terceiros não foram bloqueados inadvertidamente ao criar uma política inicial.

Para testar uma política durante um período de tempo sem impor as diretivas de política, defina o atributo <meta> da marca http-equiv ou o nome do cabeçalho de uma política baseada em cabeçalho como Content-Security-Policy-Report-Only. Os relatórios de falha são enviados como documentos JSON para uma URL especificada. Para obter mais informações, consulte Documentos da Web do MDN: Content-Security-Policy-Report-Only.

Para relatar violações enquanto uma política está ativa, consulte os seguintes artigos:

• report-to
• report-uri

Embora report-uri não seja mais recomendado para uso, ambas as diretivas devem ser usadas até que report-to seja compatível com todos os principais navegadores. Não use report-uri exclusivamente porque o suporte para report-uri está sujeito a remoção a qualquer momento dos navegadores. Remova o suporte para report-uri em suas políticas quando report-to tiver suporte total. Para acompanhar a adoção do report-to, consulte Posso usar: report-to.

Teste e atualize a política de um aplicativo a cada versão.

Solucionar problemas

• Os erros aparecem no console de ferramentas para desenvolvedores do navegador. Os navegadores fornecem informações sobre:
  • Elementos que não estão em conformidade com a política.
  • Como modificar a política para permitir um item bloqueado.
• Uma política só é completamente eficaz quando o navegador do cliente dá suporte a todas as diretivas incluídas. Para obter uma matriz de suporte do navegador atual, consulte Posso usar: Content-Security-Policy.

Recursos adicionais

• Aplicar um CSP no código C# na inicialização
• Documentos da Web do MDN: Política de Segurança de Conteúdo (CSP)
• Documentos da MDN na Web: Cabeçalho de resposta Content-Security-Policy
• Nível 3 da Política de Segurança de Conteúdo
• Avaliador do CSP do Google