Partilhar via

Implemente uma política de segurança de conteúdo para o ASP.NET Core Blazor

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.

Advertência

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e .NET Core. Para a versão atual, consulte a versão .NET 10 deste artigo.

Este artigo explica como usar uma Política de Segurança de Conteúdo (CSP) com aplicativos ASP.NET Core Blazor para ajudar a proteger contra certos tipos de ataques mal-intencionados, como XSS (Cross-Site Scripting) e ataques de clickjacking . XSS é uma vulnerabilidade de segurança em que um ciberinvasor 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 é induzido a interações com um site de chamariz que tem seu aplicativo incorporado nele.

Uma CSP ajuda a proteger contra esses tipos de ataques, informando o navegador sobre recursos válidos:

  • Fontes para conteúdo carregado, incluindo scripts, folhas de estilo, imagens e plugins.
  • Ações executadas por uma página, especificando destinos de URL permitidos de formulários.
  • Quando seu aplicativo pode ser incorporado a outro site por meio de <frame>, <iframe>, <object>ou <embed> tags.

Recomendamos a leitura dos seguintes recursos do MDN ao implementar um CSP:

Para aplicar um CSP a uma aplicação, o desenvolvedor especifica várias diretivas de CSP de segurança de conteúdo em um ou mais cabeçalhos ou etiquetas Content-Security-Policy. Para obter orientação sobre como aplicar um CSP a uma aplicação em código C# na inicialização, consulte ASP.NET Core startupBlazor e a seção A frame-ancestors diretiva mais adiante neste artigo.

As políticas são avaliadas pelo navegador enquanto uma página é 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 tag <script> com origem de terceiros no atributo src, o navegador impede que o script seja carregado.

O CSP é compatível com a maioria dos navegadores modernos para desktop e dispositivos móveis, incluindo Chrome, Edge, Firefox, Opera e Safari. O CSP é recomendado para aplicativos Blazor.

Advertência

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 aplicação de políticas por meio de preferências do usuário, bookmarklets, extensões do navegador, adições de terceiros ao agente do usuário e outros mecanismos semelhantes. Além disso, os CSPs estão focados apenas em remediar um subconjunto de ataques, não todos os ataques que podem comprometer a segurança, como injeção de SQL, falsificação de solicitação entre sites (CSRF), configuração incorreta de segurança e ataques de negação de serviço (DoS).

Diretivas políticas

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

  • base-uri: Restringe os URLs da 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 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 data: URLs.
    • Especifique https: para permitir o carregamento de imagens a partir de endpoints 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.
    • Numa aplicação Blazor de cliente:
      • Especifique wasm-unsafe-eval para permitir que o runtime Mono do lado do cliente Blazor funcione.
      • Especifique quaisquer hashes adicionais para permitir que os seus scripts necessários não dependentes de estrutura sejam carregados. Por exemplo, especifique unsafe-hashes com um hash de sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0= para permitir o JavaScript embutido no componente NavMenu para o alternador de navegação.
    • Em um aplicativo Blazor do lado do servidor, especifique os hashes para permitir o carregamento dos scripts necessários.
  • 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 usa 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 http:do esquema , ws: (protocolo WebSocket) e wss: (protocolo WebSocket Secure) são especificadas.
  • upgrade-insecure-requests: Indica que URLs de conteúdo provenientes de fontes inseguras (HTTP) devem ser obtidas de forma segura através de HTTPS.
  • base-uri: Restringe os URLs da 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 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 data: URLs.
    • Especifique https: para permitir o carregamento de imagens a partir de endpoints 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.
    • Numa aplicação Blazor de cliente:
      • Especifique unsafe-eval para permitir que o runtime Mono do lado do cliente Blazor funcione.
      • Especifique quaisquer hashes adicionais para permitir que os seus scripts necessários não dependentes de estrutura sejam carregados.
    • Em um aplicativo Blazor do lado do servidor, especifique os hashes para permitir o carregamento dos scripts necessários.
  • 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 usa 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 http:do esquema , ws: (protocolo WebSocket) e wss: (protocolo WebSocket Secure) são especificadas.
  • upgrade-insecure-requests: Indica que URLs de conteúdo de fontes inseguras (HTTP) devem ser adquiridas com segurança por HTTPS.
  • base-uri: Restringe os URLs da 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 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 data: URLs.
    • Especifique https: para permitir o carregamento de imagens a partir de endpoints 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 a origem do host https://stackpath.bootstrapcdn.com/ para scripts de Bootstrap.
    • Especifique self para indicar que a origem do aplicativo, incluindo o esquema e o número da porta, é uma fonte válida.
    • Numa aplicação Blazor de cliente:
      • Especifique unsafe-eval para permitir que o runtime Mono do lado do cliente Blazor funcione.
      • Especifique quaisquer hashes adicionais para permitir que os seus scripts necessários não dependentes de estrutura sejam carregados.
    • Em um aplicativo Blazor do lado do servidor, especifique os hashes para permitir o carregamento dos scripts necessários.
  • style-src: Indica fontes válidas para folhas de estilo.
    • Especifique a origem do host https://stackpath.bootstrapcdn.com/ para folhas de estilo do Bootstrap.
    • Especifique self para indicar que a origem do aplicativo, incluindo o esquema e o número da porta, é uma fonte válida.
    • Especifique unsafe-inline para permitir o uso de estilos embutidos.
  • connect-src: Restringe as URLs que podem ser carregadas usando interfaces de script. As fontes http:do esquema , ws: (protocolo WebSocket) e wss: (protocolo WebSocket Secure) são especificadas.
  • upgrade-insecure-requests: Indica que URLs de conteúdo de fontes inseguras (HTTP) devem ser adquiridas com segurança por HTTPS.
  • base-uri: Restringe os URLs da 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 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 data: URLs.
    • Especifique https: para permitir o carregamento de imagens a partir de endpoints 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 a origem do host https://stackpath.bootstrapcdn.com/ para scripts de Bootstrap.
    • Especifique self para indicar que a origem do aplicativo, incluindo o esquema e o número da porta, é uma fonte válida.
    • Numa aplicação Blazor de cliente:
      • Especifique hashes para permitir que os scripts necessários sejam carregados.
      • Especifique unsafe-eval para usar eval() e métodos para criar código a partir de strings.
    • Em um aplicativo Blazor do lado do servidor, especifique os hashes para permitir o carregamento dos scripts necessários.
  • style-src: Indica fontes válidas para folhas de estilo.
    • Especifique a origem do host https://stackpath.bootstrapcdn.com/ para folhas de estilo do Bootstrap.
    • Especifique self para indicar que a origem do aplicativo, incluindo o esquema e o número da porta, é uma fonte válida.
    • Especifique unsafe-inline para permitir o uso de estilos embutidos. A declaração embutida é necessária para que a interface do usuário reconecte o cliente e o servidor após a solicitação inicial. Numa versão futura, o estilo em linha pode ser removido para que unsafe-inline não seja mais necessário.
  • connect-src: Restringe as URLs que podem ser carregadas usando interfaces de script. As fontes http:do esquema , ws: (protocolo WebSocket) e wss: (protocolo WebSocket Secure) são especificadas.
  • upgrade-insecure-requests: Indica que URLs de conteúdo de fontes inseguras (HTTP) devem ser adquiridas com segurança por HTTPS.

As diretivas anteriores são suportadas por todos os navegadores, exceto o Microsoft Internet Explorer.

Para obter hashes SHA para scripts em linha adicionais:

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

Para obter uma matriz de compatibilidade dos navegadores da 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 via:

Para usar uma <meta> tag 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 cadeia de políticas não é necessário de acordo com a especificação de Nível 3 da Política de Segurança de Conteúdo.
  • Coloque a tag <meta> no conteúdo <head>, logo após a abertura da tag <head>. A política é avaliada e aplicada quando a marcação CSP é analisada, por isso a política deve aparecer no topo da marcação <head> para garantir que seja aplicada em todas as tags <script> e <link>.

As seções a seguir mostram exemplos de políticas. Estes exemplos são associados a este documento para cada versão do Blazor. Para usar uma versão apropriada para o seu lançamento, selecione a versão do documento com o seletor suspenso Versão nesta página web.

A frame-ancestors diretiva

A frame-ancestors diretiva especifica pais válidos que podem incorporar uma página com <frame>, <iframe>, <object> ou <embed> etiquetas. Uma frame-ancestors diretiva não pode ser aplicada através de um <meta> CSP baseado em tags. A diretiva deve ser aplicada através de 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 frame-ancestors diretiva.

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 mais restritivo 'none' e impedir que todos os pais incorporem o aplicativo, defina a opção ContentSecurityFrameAncestorsPolicy na chamada para AddInteractiveServerRenderMode no arquivo Program. O seguinte só tem efeito quando a compactação WebSocket está habilitada (ConfigureWebSocketAcceptContext está definido, o que é o padrão para as aplicações Blazor).

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

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

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

Advertência

Evite definir o valor da diretiva `frame-ancestors` para `'null'` quando a compactação WebSocket estiver habilitada (a compactação é o padrão) porque isso torna a aplicação vulnerável a ataques de injeção de scripts maliciosos e de clickjacking.

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

Aplicativos Blazor do lado do servidor

O exemplo a seguir é um ponto de partida para o desenvolvimento futuro. Na parte superior do conteúdo, aplique as diretivas descritas na seção <head>, juntamente com quaisquer outras diretivas exigidas pela especificação do seu aplicativo.

Para Blazor Web Apps ou Blazor Server apps:

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

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

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

    Para obter mais informações, consulte CSP: script-src: Unsafe inline script (documentação MDN).

  • Mova o manipulador de eventos JavaScript embutido para um arquivo ou módulo JavaScript que tenha permissão para carregar pela política.

Blazor Web Apps também têm um componente ImportMap no conteúdo <head> que renderiza uma tag de importação de mapa <script> em linha. 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 Subrecursos (SRI) ou uma nonce criptográfica.

Para Blazor Server aplicações:

<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';
    connect-src 'self' http: ws: wss:;
    upgrade-insecure-requests">

Para Blazor Server aplicações:

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' https://stackpath.bootstrapcdn.com/;
    style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com/;
    connect-src 'self' http: ws: wss:;
    upgrade-insecure-requests">

Para Blazor Server aplicações:

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' https://stackpath.bootstrapcdn.com/ 
        'sha256-34WLX60Tw3aG6hylk0plKbZZFXCuepeQ6Hu7OqRf8PI=';
    style-src 'unsafe-inline' https://stackpath.bootstrapcdn.com/;
    connect-src 'self' http: ws: wss:;
    upgrade-insecure-requests">

Observação

O hash SHA256 anterior é para fins de demonstração. Talvez seja necessário calcular um novo hash para seu CSP.

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

Recusou-se a executar 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-...') são necessários para habilitar a execução em linha direta.

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

Para obter orientação sobre como aplicar uma política de segurança de conteúdo a uma aplicação no código C# durante o arranque, consulte ASP.NET Core Blazor arranque.

Aplicações do lado cliente Blazor

O exemplo a seguir é um ponto de partida para o desenvolvimento futuro. No conteúdo <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';
    connect-src 'none';
    upgrade-insecure-requests">

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

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

Observação

Hash sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA= representa o script embutido usado para aplicações cliente Blazor. Isso pode ser removido no futuro.

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'unsafe-eval' https://stackpath.bootstrapcdn.com/ 
        'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=';
    style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com/;
    upgrade-insecure-requests">

<meta http-equiv="Content-Security-Policy" content="
    base-uri 'self';
    default-src 'self';
    img-src data: https:;
    object-src 'none';
    script-src 'self' 'unsafe-eval' https://stackpath.bootstrapcdn.com/ 
        'sha256-v8ZC9OgMhcnEQ/Me77/R9TlJfzOBqrMTW8e1KuqLaqc=' 
        'sha256-If//FtbPc03afjLezvWHnC3Nbu4fDM04IIzkPaf3pH0=' 
        'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA=';
    style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com/;
    upgrade-insecure-requests">

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

Recusou-se a executar 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-...') são necessários para habilitar a execução em linha direta.

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

Resolvendo violações de CSP com Subresource Integrity (SRI) ou uma nonce criptográfica

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

Adotar a integridade dos subrecursos (SRI)

O SRI (Subresource Integrity) permite que os navegadores confirmem que os recursos buscados não foram adulterados em trânsito. Um hash criptográfico fornecido no recurso deve corresponder ao hash calculado pelo navegador para o recurso buscado e ao hash listado no CSP. A compatibilidade do navegador pode ser avaliada em Posso usar? Integridade do subrecurso.

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

Advertência

Defina o crossorigin atributo em um subrecurso carregado de uma origem diferente sem CORS (Cross-Origin Resource Sharing). Se a origem do aplicativo for diferente de onde um subrecurso é carregado, é necessário um Access-Control-Allow-Origin cabeçalho que permita que o recurso seja compartilhado com a origem solicitante ou então o crossorigin atributo deve ser aplicado à tag do subrecurso no aplicativo. Caso contrário, o navegador adota a política de 'fail-open' para o subrecurso, o que significa que o subrecurso é carregado sem verificar sua integridade.

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

Para obter mais informações, consulte Cross-Origin Resource Sharing and Subresource Integrity (documentação 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 ImportMap componente (.NET 9 ou posterior). O ImportMap valor de integridade é calculado para cada solicitação de aplicativo porque o ImportMap componente renderiza conteúdo exclusivo cada vez que a página é gerada para ativos com impressão digital.

O mapa de importação renderizado do ImportMap componente é gerado pelo aplicativo em sua origem, portanto, o crossorigin atributo não é incluído na ImportMap tag . Para obter mais informações, consulte MDN CSP Guide: Hashes and Subresource Integrity (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]
    private 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 for necessário espalhar atributos adicionais no elemento renderizado ImportMap dos componentes <script>, poderá passar um dicionário de todos os atributos para o componente ImportMap na sua propriedade AdditionalAttributes. O integrity par nome-valor do atributo é passado no dicionário com o restante dos atributos adicionais passados.

Adote um nonce criptográfico

Um nonce criptográfico (número usado uma vez) permite que os navegadores confirmem que os recursos obtidos não são adulterados durante a transmissão. 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? Não.

No exemplo a seguir para um Blazor Web App (.NET 8 ou posterior), é criado um nonce para o componente ImportMap (.NET 9 ou posterior) com um valor exclusivo sempre que a aplicação é carregada.

Para obter mais informações, consulte MDN CSP Guide: Nonces e CSP: script-src: script em linha inseguro (documentação 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 for necessário espalhar atributos adicionais no elemento renderizado ImportMap dos componentes <script>, poderá passar um dicionário de todos os atributos para o componente ImportMap na sua propriedade AdditionalAttributes. O par nome-valor nonce é passado no dicionário juntamente com os restantes atributos adicionais.

Aplicar um CSP em ambientes que não utilizam Development.

Quando um CSP é aplicado ao conteúdo Blazor de um aplicativo <head>, ele interfere no teste local no ambiente Development. Por exemplo, Browser Link e o script de atualização do navegador não são carregados. Os exemplos a seguir demonstram como aplicar a etiqueta <meta> do CSP em ambientes não Development.

Observação

Os exemplos nesta secção não mostram a tag completa de <meta> para os CSPs. As tags completas de <meta> são encontradas nas subseções da seção Aplicar a política mais acima neste artigo.

Estão disponíveis três abordagens gerais:

  • Aplique o CSP por meio do componente App, que aplica o CSP a todos os layouts do aplicativo.
  • Se você 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 tag <HeadContent>. Para uma eficácia completa, cada arquivo de layout de aplicativo deve adotar a abordagem.
  • O serviço ou servidor de hospedagem pode fornecer uma 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 serviço de hospedagem ou servidor, ela não é abordada nos exemplos a seguir. Se você deseja adotar essa abordagem, consulte a documentação do seu provedor de serviços de hospedagem ou servidor.

Blazor Web App aproxima-se

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

Como alternativa, aplique CSPs por layout na pasta Components/Layout, como demonstra o exemplo a seguir. Certifique-se de que cada layout especifica 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>
}

Como alternativa, use o código anterior, mas aplique CSPs para cada layout na pasta Layout. Certifique-se de que cada layout especifica um CSP.

Limitações da meta tag

Uma política de tag <meta> não suporta as seguintes diretivas:

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

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

Os testes ajudam a confirmar que os scripts de terceiros não são 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> ou o nome do cabeçalho de uma política baseada em cabeçalho com a etiqueta http-equiv como Content-Security-Policy-Report-Only. Os relatórios de falhas são enviados como documentos JSON para uma URL especificada. Para obter mais informações, consulte Documentação Web MDN: Content-Security-Policy-Report-Only.

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

Embora report-uri não seja mais recomendado para uso, ambas as diretivas devem ser usadas até que report-to seja suportado por todos os principais navegadores. Não use exclusivamente report-uri porque o suporte para report-uri pode ser descontinuado a qualquer momento pelos navegadores. Remova o suporte para report-uri nas suas políticas quando report-to estiver totalmente suportado. Para acompanhar a adoção de report-to, consulte Posso utilizar: report-to.

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

Diagnóstico de problemas

  • Os erros aparecem no console de ferramentas de desenvolvedor 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 suporta todas as diretivas incluídas. Para ver uma matriz atual de suporte do navegador, consulte Can I use: Content-Security-Policy.

Recursos adicionais

  • Last updated on