Aplicación de una directiva de seguridad de contenido para Blazor de ASP.NET Core

En este artículo se explica cómo usar una directiva de seguridad de contenido (CSP) con aplicaciones Blazor de ASP.NET Core para protegerse frente a ataques de scripting entre sitios (XSS).

Scripting entre sitios (XSS) es una vulnerabilidad de seguridad en la que un ciberdelincuente coloca uno o más scripts de cliente malintencionados en el contenido representado de una aplicación. Una CSP ayuda a protegerse de ataques XSS, ya que informa al explorador de la validez de los elementos siguientes:

• Orígenes de contenido cargado, incluidos scripts, hojas de estilo, imágenes y complementos.
• Acciones realizadas por una página, especificando los destinos de URL permitidos de formularios

Para aplicar una directiva de seguridad de contenido en una aplicación, el desarrollador especifica varias directivas de seguridad de contenido en uno o varios encabezados Content-Security-Policy o etiquetas <meta>. Para obtener instrucciones sobre cómo aplicar una CSP a una aplicación en código de C# al inicio, vea Inicio de Blazor de ASP.NET Core.

El explorador evalúa las directivas mientras una página se carga. Así, inspecciona los orígenes de la página y determina si cumplen los requisitos de las directivas de seguridad de contenido. Cuando un recurso no cumple estas directivas, el explorador no lo carga. Pensemos, por ejemplo, en una directiva que no permite scripts de terceros. Si una página contiene una etiqueta <script> con un origen de terceros en el atributo src, el explorador impide que el script se cargue.

Las directivas de seguridad de contenido se admiten en la mayoría de los exploradores de escritorio y móviles de hoy día, como Chrome, Edge, Firefox, Opera y Safari. Se recomienda usarlas en aplicaciones Blazor.

Directivas

Especifique como mínimo las siguientes directivas y orígenes en las aplicaciones Blazor. Agregue más directivas y orígenes según sea necesario. Las siguientes directivas se usan en la sección Aplicación de la directiva de este artículo, donde se proporcionan directivas de seguridad de ejemplo para Blazor:

• base-uri: restringe las direcciones URL según la etiqueta <base> de una página. Especifique self para indicar que el origen de la aplicación (incluido el esquema y el número de puerto) es un origen válido.
• default-src: indica una reserva de las directivas de origen que no se han especificado expresamente en la directiva. Especifique self para indicar que el origen de la aplicación (incluido el esquema y el número de puerto) es un origen válido.
• img-src: indica los orígenes de imágenes válidos.
  • Especifique data: para permitir la carga de imágenes de direcciones URL data:.
  • Especifique https: para permitir la carga de imágenes desde puntos de conexión HTTPS.
• object-src: indica los orígenes válidos de las etiquetas <object>, <embed> y <applet>. Especifique none para no permitir ningún origen de dirección URL.
• script-src: indica los orígenes de scripts válidos.
  • Especifique self para indicar que el origen de la aplicación (incluido el esquema y el número de puerto) es un origen válido.
  • En una aplicación Blazor del lado cliente:
    • Especifique wasm-unsafe-eval para permitir que funcione el entorno de ejecución Mono Blazor del lado cliente.
    • Especifique hashes adicionales para permitir que se carguen los scripts que no son del marco necesarios.
  • En una aplicación Blazor del lado servidor, especifique códigos hash para permitir que se carguen los scripts necesarios.
• style-src: indica los orígenes de hojas de estilo válidos.
  • Especifique self para indicar que el origen de la aplicación (incluido el esquema y el número de puerto) es un origen válido.
  • Si la aplicación usa estilos en línea, especifique unsafe-inline para permitir su uso.
• upgrade-insecure-requests: indica que las direcciones URL de contenido de orígenes (HTTP) no seguros deben adquirirse de forma segura a través de HTTPS.

Todos los exploradores, excepto Microsoft Internet Explorer, admiten las directivas anteriores.

Para obtener los hash SHA de otros scripts en línea:

• Aplique la directiva de seguridad de contenido que aparece en la sección Aplicación de la directiva.
• Acceda a la consola de herramientas de desarrollo del explorador mientras ejecuta la aplicación localmente. El explorador calcula y muestra los hash de los scripts bloqueados cuando existe un encabezado de directiva de seguridad de contenido o una etiqueta meta.
• Copie los hash proporcionados por el explorador en los orígenes script-src. Inserte cada hash entre comillas simples.

Para obtener una matriz de compatibilidad de exploradores de nivel 2 de directiva de seguridad de contenido, vea ¿Puedo usar una directiva de seguridad de contenido de nivel 2?

Aplicación de la directiva

Use una etiqueta <meta> para aplicar la directiva:

• Establezca el valor del atributo http-equiv en Content-Security-Policy.
• Coloque las directivas en el valor de atributo content. Separe las directivas con un punto y coma (;).
• Coloque siempre la etiqueta meta en el contenido de <head>.

En las secciones siguientes se muestran directivas de ejemplo. Estos ejemplos pertenecen a la versión de Blazor correspondiente a este artículo. Para usar la versión adecuada en su caso, seleccione la versión del documento usando el selector desplegable Versión de esta página web.

Aplicaciones Blazor del lado servidor

En el contenido de <head>, aplique las directivas descritas en la sección Directivas:

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

Agregue los códigos hash script-src y style-src adicionales según lo requiera la aplicación. Durante el desarrollo, use una herramienta en línea o las herramientas para desarrolladores del explorador a fin de calcular los códigos hash. Por ejemplo, el siguiente error de la consola de herramientas del explorador notifica el hash de un script necesario no incluido en la directiva:

Se ha rechazado ejecutar el script en línea porque infringe la Directiva de seguridad de contenido siguiente: " ... ". Para habilitar la ejecución en línea se requiere la palabra clave "unsafe-inline", un hash ("sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA =") o un nonce ("nonce-...").

El script concreto asociado al error se muestra en la consola junto a dicho error.

Aplicaciones Blazor del lado cliente

En el contenido de <head>, aplique las directivas descritas en la sección Directivas:

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

Agregue los códigos hash script-src y style-src adicionales según lo requiera la aplicación. Durante el desarrollo, use una herramienta en línea o las herramientas para desarrolladores del explorador a fin de calcular los códigos hash. Por ejemplo, el siguiente error de la consola de herramientas del explorador notifica el hash de un script necesario no incluido en la directiva:

Se ha rechazado ejecutar el script en línea porque infringe la Directiva de seguridad de contenido siguiente: " ... ". Para habilitar la ejecución en línea se requiere la palabra clave "unsafe-inline", un hash ("sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA =") o un nonce ("nonce-...").

El script concreto asociado al error se muestra en la consola junto a dicho error.

Aplicación de un CSP en entornos que no son de Development

Cuando se aplica un CSP a un contenido Blazor de aplicación <head>, interfiere con las pruebas locales en el entorno de Development. Por ejemplo, Vínculo con exploradores y el script de actualización del explorador no se pueden cargar. En los ejemplos siguientes se muestra cómo aplicar la etiqueta <meta> de CSP en entornos que no son de Development.

Nota:

Los ejemplos de esta sección no muestran la etiqueta <meta> completa para los CSP. Las etiquetas completas <meta> se encuentran en las subsecciones de la sección Aplicar la directiva anteriormente en este artículo.

Hay tres enfoques generales disponibles:

• Aplique el CSP a través del componenteApp, que aplica el CSP a todos los diseños de la aplicación.
• Si necesita aplicar CSP a diferentes áreas de la aplicación, por ejemplo, un CSP personalizado solo para las páginas de administración, aplique los CSP por diseño mediante la <HeadContent> etiqueta. Para lograr una eficacia completa, todos los archivos de diseño de la aplicación deben adoptar el enfoque.
• El servicio de hospedaje o el servidor pueden proporcionar un CSP a través de un Content-Security-Policyencabezado agregado a las respuestas salientes de una aplicación. Dado que este enfoque varía según el servicio de hospedaje o el servidor, no se trata en los ejemplos siguientes. Si desea adoptar este enfoque, consulte la documentación de su proveedor de servicios de hospedaje o servidor.

Enfoques Blazor Web App

En el componente App (Components/App.razor), inserte IHostEnvironment:

@inject IHostEnvironment Env

En el contenidoApp del componente <head>, aplique el CSP cuando no esté en el entorno de Development:

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

Como alternativa, aplique CSP por diseño en la carpeta Components/Layout, como se muestra en el ejemplo siguiente. Asegúrese de que cada diseño especifica un CSP.

@inject IHostEnvironment Env

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

Blazor WebAssembly enfoques de la aplicación

En el componente App (App.razor), inserte IWebAssemblyHostEnvironment:

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

En el contenidoApp del componente <head>, aplique el CSP cuando no esté en el entorno de Development:

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

Como alternativa, use el código anterior, pero aplique CSP por diseño en la carpetaLayout. Asegúrese de que cada diseño especifica un CSP.

Limitaciones de la etiqueta meta

Una directiva de etiqueta <meta> no admite las siguientes directivas:

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

Para admitir las directivas anteriores, use un encabezado denominado Content-Security-Policy. La cadena de directiva es el valor del encabezado.

Comprobación de una directiva y recepción de informes de infracciones

Las comprobaciones ayudan a confirmar que no se han bloqueado scripts de terceros por error al crear una directiva inicial.

Para comprobar una directiva durante un período de tiempo sin aplicar directivas, establezca el atributo http-equiv de la etiqueta <meta> o el nombre de encabezado de una directiva basada en encabezado en Content-Security-Policy-Report-Only. Los informes de errores se envían como documentos JSON a la dirección URL que se especifique. Para obtener más información, vea Documentación web de MDN: Content-Security-Policy-Report-Only.

Para obtener informes de infracciones mientras una directiva está activa, vea los siguientes artículos:

• report-to
• report-uri

Aunque ya no se recomienda el uso de report-uri, ambas directivas deben usarse hasta que todos los exploradores principales admitan report-to. No use report-uri única y exclusivamente, ya que la compatibilidad con report-uri tiene visos de eliminarse de los exploradores en cualquier momento. Quite la compatibilidad con report-uri de sus directivas cuando report-to sea totalmente compatible. Para realizar un seguimiento del uso de report-to, vea ¿Puedo usar report-to?

Compruebe y actualice la directiva de una aplicación en cada versión.

Solucionar problemas

• Aparecen errores en la consola de herramientas de desarrollo del explorador. Los exploradores proporcionan información sobre lo siguiente:
  • Elementos que no cumplen la directiva
  • Cómo modificar la directiva para permitir un elemento bloqueado
• Una directiva es totalmente efectiva únicamente cuando el explorador del cliente admite todas las directivas incluidas. Para obtener una matriz de compatibilidad de exploradores actuales, vea ¿Puedo usar Content-Security-Policy?

Recursos adicionales

• Aplicación de un CSP en código de C# al inicio
• Documentos web de MDN: directiva de seguridad de contenido (CSP)
• Documentos web de MDN: encabezado de respuesta Content-Security-Policy
• Directiva de seguridad de contenido de nivel 2
• Evaluador de directivas de seguridad de contenido de Google