Protege los recursos secundarios externos con la integridad de recursos secundarios, CORS y la política de referencia

Cuando cargues secuencias de comandos, hojas de estilo, fuentes o imágenes de CDN de terceros o de orígenes externos, verifica su integridad criptográfica con la integridad de subrecursos (integrity en HTML y integrity() en CSS url()), configura el manejo de credenciales de origen cruzado (crossorigin y cross-origin()) y restringe los encabezados Referer salientes (referrerpolicy y referrer-policy()). Para conocer la política de seguridad del contenido a nivel del documento y las listas de entidades permitidas de conexiones salientes, consulta Seguridad web y Restringe las conexiones de red salientes con listas de entidades permitidas de conexiones.

1. Generar resúmenes de integridad criptográfica para recursos inmutables

La integridad de subrecursos (SRI) garantiza que el navegador solo ejecute o renderice un recurso externo si sus bytes coinciden con el hash criptográfico declarado por tu aplicación.

• Calcula los resúmenes en el momento de la compilación o el lanzamiento, nunca a partir de respuestas en vivo que no sean de confianza: Genera hashes de integridad durante el paso de compilación o lanzamiento a partir de bytes de recursos locales que se sabe que son correctos (o copia el resumen oficial publicado por el autor del paquete) y codifícalos en tu HTML, CSS o JavaScript. Nunca recuperes una dirección URL de terceros en el navegador durante el tiempo de ejecución para calcular su propio hash integrity, que confía en los bytes que devuelve el servidor remoto y anula la SRI.
• Usa sha384- de forma predeterminada: Aplica formato a los metadatos de integridad como <algorithm>-<base64-digest> con sha384- (opción predeterminada recomendada), sha512- o sha256-.
• Fija los recursos secundarios externos a URLs inmutables con versiones: Siempre haz referencia a los recursos de terceros con URLs inmutables, con versiones fijas o con direcciones de contenido (como https://cdn.example.com/ui@2.4.0/app.min.js) en lugar de URLs flotantes mutables (latest/app.min.js), que exponen tu sitio a cambios silenciosos en la cadena de suministro y rompen la SRI en cuanto se actualiza el archivo remoto. Si debes cargar una secuencia de comandos mutable de terceros que se actualiza in situ (como una etiqueta de estadísticas de un proveedor), omite integrity en esa URL y, en su lugar, restringe la secuencia de comandos con la Política de Seguridad del Contenido (strict-dynamic o nonces) o la zona de pruebas de iframe.
• Separa con espacios varios resúmenes cuando un extremo pueda entregar varias cargas útiles válidas: Todos los navegadores que admiten SRI implementan sha256-, sha384- y sha512-. Si una URL puede devolver legítimamente una de varias cargas útiles conocidas como correctas (como durante una prueba A/B, un lanzamiento de CDN por etapas o una compilación negociada por contenido), enumera varios resúmenes del mismo algoritmo separados por espacios en blanco (por ejemplo, integrity="sha384-variantA... sha384-variantB..."). El navegador acepta la respuesta si coincide con cualquier resumen enumerado del algoritmo más sólido presente.
• Entrega recursos secundarios de origen cruzado con encabezados de CORS: Los navegadores solo pueden verificar la integridad de una respuesta de origen cruzado cuando es legible por CORS (Access-Control-Allow-Origin: * para solicitudes anónimas o el origen exacto de la solicitud con Access-Control-Allow-Credentials: true para solicitudes con credenciales).

# Generate a sha384- SRI hash at build time from a known-good local file
printf "sha384-%s\n" "$(openssl dgst -sha384 -binary app.min.js | openssl base64 -A)"

// Build-time / tooling helper (Node.js 19+, Deno, Bun) to compute an SRI string from known-good local bytes
export async function computeIntegrityMetadata(bytes) {
  const rawBytes =
    typeof bytes === 'string' ? new TextEncoder().encode(bytes) : bytes;
  const digestBuffer = await crypto.subtle.digest('SHA-384', rawBytes);
  const binary = Array.from(new Uint8Array(digestBuffer), (b) =>
    String.fromCharCode(b),
  ).join('');
  return `sha384-${btoa(binary)}`;
}

2. Protege las secuencias de comandos, las hojas de estilo y las precargas de HTML

Establece un encabezado de respuesta HTTP Referrer-Policy: strict-origin-when-cross-origin a nivel del documento (o incluye <meta name="referrer" content="strict-origin-when-cross-origin"> en <head>) como un valor predeterminado de referencia para que cualquier subrecurso o url() de CSS que omita un modificador de referencia por solicitud siga quitando los parámetros de consulta y ruta de acceso sensibles en las solicitudes de origen cruzado.

Luego, en los elementos externos <script>, <link rel="stylesheet">, <link rel="preload"> y <link rel="modulepreload">, siempre configura integrity, crossorigin y referrerpolicy juntos:

• integrity="sha384-...": Bloquea la ejecución o la aplicación del recurso si los bytes de respuesta no coinciden con el resumen esperado (para un <link rel="stylesheet"> bloqueado, linkElement.sheet sigue siendo null y se activa un evento error).
• crossorigin="anonymous" (predeterminado recomendado para recursos de CDN públicos) o crossorigin="use-credentials": Es obligatorio cuando se establece integrity en un recurso de origen cruzado. Omitir crossorigin hace que el navegador recupere el recurso en modo no-cors (lo que produce una respuesta opaca que no se puede verificar con hash) y bloquee el recurso.
• referrerpolicy="no-referrer" (opción predeterminada recomendada para CDN de terceros) o referrerpolicy="strict-origin-when-cross-origin": Anula la política de referencia del documento para evitar que se filtre información de origen o ruta de acceso en el encabezado de la solicitud Referer al host de terceros.

<!-- Document-level baseline referrer policy in <head> (or via Referrer-Policy HTTP header) -->
<meta name="referrer" content="strict-origin-when-cross-origin" />

<!-- External stylesheet with SRI, anonymous CORS, and no referrer -->
<link
  rel="stylesheet"
  href="https://cdn.example.com/ui@2.4.0/styles.css"
  integrity="sha384-bs0EksOYBbU/g0IAHMXbSyH1Mgw83GKn+EZlSI+VE+zVchXmSbLwhVLrPzsOWnc5"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

<!-- External script with SRI, anonymous CORS, and no referrer -->
<script
  src="https://cdn.example.com/ui@2.4.0/bundle.min.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

Cuando recuperes subrecursos externos de manera programática con fetch(), pasa las opciones integrity, mode, credentials y referrerPolicy correspondientes (un resumen que no coincida rechazará la promesa con TypeError):

const response = await fetch('https://cdn.example.com/ui@2.4.0/manifest.json', {
  integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC',
  mode: 'cors',
  credentials: 'omit',
  referrerPolicy: 'no-referrer',
});

3. Protege las imágenes, las fuentes y las hojas de estilo importadas de CSS con modificadores url()

Los modificadores de solicitudes url() de CSS (cross-origin(), referrer-policy() y integrity()) controlan el modo de recuperación, el encabezado de referencia y la verificación de integridad de subrecursos de los recursos cargados con CSS, incluidas las reglas background-image, content, mask-image, border-image-source, filter, @font-face src y @import, directamente desde CSS:

Sigue estas reglas de sintaxis y seguridad de CSS cuando crees modificadores de url():

• Coloca la cadena de la URL entre comillas dentro de url("..."): Los modificadores de solicitudes solo son válidos cuando la URL dentro de url(...) es una <string> entre comillas (las URLs sin comillas no pueden usar modificadores).
• Especifica cada tipo de modificador como máximo una vez por url(): Puedes combinar cross-origin(), referrer-policy() y integrity() en cualquier orden dentro de url("..." ...), pero repetir el mismo tipo de modificador dos veces (como dos modificadores integrity()) no es válido. Para proporcionar varios hashes, sepáralos con espacios dentro de una sola cadena integrity("sha384-... sha384-...").
• Siempre vincula el origen cruzado integrity() con cross-origin(anonymous): Si bien @font-face src y mask-image ya se recuperan en modo cors anónimo de forma predeterminada, background-image, content, border-image-source y @import se establecen de forma predeterminada en el modo no-cors (lo que produce una respuesta opaca que no se puede verificar con hash) y el SVG filter externo se establece de forma predeterminada en el modo same-origin (lo que bloquea las URLs de origen cruzado por completo). Incluir cross-origin(anonymous) (o cross-origin(use-credentials)) garantiza una verificación de CORS coherente en todas las propiedades de CSS.
• Coloca los modificadores dentro de url("...") en las reglas @import y @font-face: Mantén cross-origin(), referrer-policy() y integrity() dentro de url("..." ...), y los descriptores de fuentes, como format("woff2") y tech(...), fuera de url(...).

@import url(
  "https://cdn.example.com/theme@1.2.0/tokens.css"
  cross-origin(anonymous)
  referrer-policy(no-referrer)
  integrity("sha384-bs0EksOYBbU/g0IAHMXbSyH1Mgw83GKn+EZlSI+VE+zVchXmSbLwhVLrPzsOWnc5")
);

@font-face {
  font-family: "BrandSans";
  src: url(
    "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"
    cross-origin(anonymous)
    referrer-policy(no-referrer)
    integrity("sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC")
  ) format("woff2");
  font-display: swap;
}

.verified-graphic {
  background-image: url(
    "https://cdn.example.com/media@1.0.0/badge.svg"
    cross-origin(anonymous)
    referrer-policy(no-referrer)
    integrity("sha384-Iw/0p59dP96nGTzHvf2XIfqcBwBW7RM6JfOij8uZxyg5azfNaOOUW8SQy6H/hU91")
  );
}

Estrategias de resguardo

Si tu objetivo de Baseline aún no admite los modificadores de solicitud de CSS url() (cross-origin(), referrer-policy() o integrity()), combina las políticas a nivel del documento con declaraciones de CSS en cascada para que los recursos secundarios sigan funcionando y protegidos:

1. Prefiere HTML <link rel="stylesheet"> en lugar de CSS @import cuando se requiera SRI entre navegadores: Debido a que subresource-integrity y referrer-policy en <link rel="stylesheet"> están ampliamente disponibles en todos los navegadores, carga hojas de estilo externas con <link rel="stylesheet" href="..." integrity="sha384-..." crossorigin="anonymous" referrerpolicy="no-referrer"> en lugar de @import siempre que se deba aplicar la verificación de integridad en todos los navegadores.
2. Confía en el encabezado Referrer-Policy o el elemento <meta name="referrer"> del paso 2 a nivel del documento: En los navegadores que no admiten referrer-policy() dentro de CSS url(), el encabezado Referrer-Policy: strict-origin-when-cross-origin o el elemento <meta name="referrer" content="strict-origin-when-cross-origin"> a nivel del documento quitan automáticamente los parámetros de ruta de acceso y los parámetros de consulta sensibles en las solicitudes de CSS de origen cruzado.

3. Declaraciones de CSS independientes en cascada para la mejora progresiva: Los navegadores que no reconocen un modificador dentro de url("..." ...) descartan toda la declaración en el momento del análisis de CSS. Declara primero un url("...") simple, seguido de una declaración cross-origin() y referrer-policy() (para los navegadores que admiten esos dos modificadores, pero no integrity()), seguido de la declaración completa, incluido integrity("sha384-..."):

   • Nunca coloques un url() no verificado dentro de la misma lista de @font-face src separada por comas: Escribir src: url("font.woff2" cross-origin(anonymous) integrity("sha384-...")), url("font.woff2"); en un solo descriptor src omite la integridad de subrecursos en el entorno de ejecución. Si una CDN entrega una fuente alterada que no pasa la verificación de integrity(), el navegador la trata como un error de carga y recurre automáticamente al segundo url("font.woff2") separado por comas. El uso de declaraciones independientes de src: garantiza que los navegadores compatibles reemplacen la declaración no verificada en el momento del análisis de CSS y bloqueen las fuentes alteradas en el tiempo de ejecución.

   @font-face {
     font-family: "BrandSans";
     /* 1. Parse-time fallback for browsers without url() modifier support */
     src: url("https://cdn.example.com/fonts@1.0.0/brand-sans.woff2") format("woff2");
     /* 2. Parse-time fallback for browsers supporting cross-origin() and referrer-policy() */
     src: url(
       "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"
       cross-origin(anonymous)
       referrer-policy(no-referrer)
     ) format("woff2");
     /* 3. Full protection in browsers supporting cross-origin(), referrer-policy(), and integrity() */
     src: url(
       "https://cdn.example.com/fonts@1.0.0/brand-sans.woff2"
       cross-origin(anonymous)
       referrer-policy(no-referrer)
       integrity("sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC")
     ) format("woff2");
     font-display: swap;
   }
   
   .verified-graphic {
     background-image: url("https://cdn.example.com/media@1.0.0/badge.svg");
     background-image: url(
       "https://cdn.example.com/media@1.0.0/badge.svg"
       cross-origin(anonymous)
       referrer-policy(no-referrer)
     );
     background-image: url(
       "https://cdn.example.com/media@1.0.0/badge.svg"
       cross-origin(anonymous)
       referrer-policy(no-referrer)
       integrity("sha384-Iw/0p59dP96nGTzHvf2XIfqcBwBW7RM6JfOij8uZxyg5azfNaOOUW8SQy6H/hU91")
     );
   }
   

4. Detecta la compatibilidad con el modificador url() de CSS en JavaScript con CSS.supports():

export function getCssUrlModifierSupport() {
  const supportsCrossOriginAndReferrer =
    typeof CSS !== 'undefined' &&
    typeof CSS.supports === 'function' &&
    CSS.supports(
      'background-image',
      'url("https://example.com/a.svg" cross-origin(anonymous) referrer-policy(no-referrer))',
    );

  const supportsUrlIntegrity =
    typeof CSS !== 'undefined' &&
    typeof CSS.supports === 'function' &&
    CSS.supports(
      'background-image',
      'url("https://example.com/a.svg" cross-origin(anonymous) referrer-policy(no-referrer) integrity("sha384-Iw/0p59dP96nGTzHvf2XIfqcBwBW7RM6JfOij8uZxyg5azfNaOOUW8SQy6H/hU91"))',
    );

  return { supportsCrossOriginAndReferrer, supportsUrlIntegrity };
}