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

Este artigo explica como usar uma CSP (Política de Segurança de Conteúdo) com aplicativos Blazor do ASP.NET Core para ajudar a proteger contra ataques XSS (Cross-Site Scripting).

O XSS (Cross-Site Scripting) é uma vulnerabilidade de segurança em que um invasor coloca um ou mais scripts mal-intencionados do lado do cliente no conteúdo renderizado de um aplicativo. Um CSP ajuda a proteger contra ataques XSS informando o navegador de:

• Fontes válidas de conteúdo carregado, incluindo scripts, folhas de estilos, imagens e plug-ins.
• Ações válidas executadas por uma página, especificando destinos de URL permitidos de formulários.

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

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.

Diretivas de política

No mínimo, especifique as seguintes diretivas e fontes para aplicativos Blazor. Adicione diretivas e fontes adicionais, conforme necessário. As seguintes diretivas são usadas na seção Aplicar a política deste artigo, em que são fornecidos exemplos de políticas de segurança para os aplicativos Blazor:

• base-uri: restringe as URLs para a marca <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 um fallback para diretivas de origem que não são especificadas explicitamente 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 marcas <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 que não são de estrutura necessários sejam carregados.
  • 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 estilo.
  • 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.
• upgrade-insecure-requests: indica que as URLs de conteúdo de fontes não seguras (HTTP) devem ser adquiridas com segurança por 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 obter uma matriz de suporte do navegador Nível 2 da Política de Segurança de Conteúdo, consulte Posso usar: Política de Segurança de Conteúdo de Nível 2.

Aplicar a política

Use uma marca <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 (;).
• Sempre coloque a marca meta no conteúdo de <head>.

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.

Aplicativos Blazor do lado do servidor

No conteúdo de <head>, aplique as diretivas descritas na seção Diretivas de 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';
               style-src 'self';
               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.

Aplicativos Blazor do lado do cliente

No conteúdo de <head>, aplique as diretivas descritas na seção Diretivas de 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';
               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.

Aplicar um CSP em ambientes não Development

Quando um CSP é aplicado ao conteúdo <head> de um aplicativo Blazor, 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 marca <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 Abordagens de aplicativos Web

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

@inject IHostEnvironment Env

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

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

Alternativamente, aplique CSPs em uma base 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>
}

abordagens de aplicativos Blazor WebAssembly

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

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

No conteúdo <head> do componente App, 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 em uma base por layout na pasta Layout. Certifique-se de que todo layout especifique um CSP.

Limitações de marca 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 http-equiv da marca <meta> 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 Web do MDN: Cabeçalho de Resposta Content-Security-Policy
• Política de segurança de conteúdo de Nível 2
• Avaliador do CSP do Google