Tutoriales paso a paso Seguridad

Cómo añadir integridad de subrecursos a scripts y hojas de estilo

Proteja sus páginas de un archivo manipulado en una CDN: calcule el hash del archivo exacto, añada los atributos integrity y crossorigin, compruebe que el navegador bloquea una copia modificada y planifique las actualizaciones.

Última revisión:

AdSense Placeholder
Slot: header_reference_page
En esta página

Pasos

  1. Fije una versión exacta del archivo

    Apunte a una URL concreta con versión, nunca a un alias «latest» que pueda cambiar. Descargue el archivo o abra la URL para calcular el hash de los bytes exactos que recibirán los navegadores.

  2. Calcule el hash

    Suelte el archivo o pegue su texto en el Generador de Hash SRI y elija sha384 (sha256 y sha512 también sirven). Devuelve el valor con la forma sha384- más el resumen en Base64.

  3. Añada integrity y crossorigin

    Ponga el valor en el atributo integrity y añada crossorigin="anonymous". Los archivos de otro origen necesitan el atributo CORS, o la comprobación no puede ejecutarse.

  4. Compruebe que bloquea la manipulación

    Cambie un carácter en una copia local, apunte la etiqueta a ella y recargue: la consola debería informar de un recurso bloqueado. Después restaure el archivo correcto.

  5. Planifique las actualizaciones

    Cuando actualice la biblioteca, calcule un hash nuevo y cambie juntos la versión de la URL y el atributo. En una canalización de compilación, genere los hashes automáticamente.

Qué necesita

La URL o el archivo exacto de un script u hoja de estilo que cargue desde otro origen, y la posibilidad de editar la página.

Ejemplo

Para un script cuyo contenido completo es alert('Hello, world.');, el resumen sha384 se verificó con OpenSSL (openssl dgst -sha384 -binary archivo | openssl base64 -A). La etiqueta queda así:

<script src="https://cdn.example.com/app.js" integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO" crossorigin="anonymous"></script>

Qué hacen los atributos

  • integrity lleva uno o varios hashes; el navegador acepta el archivo si coincide alguno. Añada un segundo hash para desplegar una actualización.
  • crossorigin="anonymous" solicita el archivo sin credenciales y permite al navegador leerlo. El servidor debe enviar Access-Control-Allow-Origin (la mayoría de las CDN lo hacen).
  • SRI funciona con <script> y <link rel="stylesheet"> (y precargas).
  • No protege los scripts inyectados dinámicamente ni la propia página.

Pruebe estas herramientas

Generador de Hash SRI

Genere hashes de integridad de subrecursos (SRI) para un script o una hoja de estilos.

Generador de Hash

Genera hashes MD5, SHA-1, SHA-256 y SHA-512 a partir de cualquier texto, calculados localmente con la Web Crypto API.

Generador de Encabezado CSP

Construye una cadena de encabezado Content-Security-Policy a partir de una lista de directivas comunes.

Analizador de Encabezados de Seguridad

Compruebe los encabezados HTTP de seguridad de un sitio (HSTS, Content-Security-Policy, X-Content-Type-Options, Referrer-Policy.

Véase también

  • Glosario Integridad de subrecursos (SRI)
    La integridad de subrecursos es una función del navegador que comprueba un script u hoja de estilo con un hash que usted indica y se niega.
  • Glosario Política de seguridad de contenido (CSP)
    Una política de seguridad de contenido es una cabecera HTTP que indica al navegador de qué fuentes puede cargar una página scripts.
  • Glosario CDN
    Una CDN (red de distribución de contenidos) es una red mundial de servidores que guarda copias de un sitio y las sirve desde el punto más.
  • Guía Cómo funciona el hashing
    Qué hace una función hash, el efecto avalancha mostrado con salida real de SHA-256, qué algoritmos siguen siendo seguros.
  • Hoja de referencia Chuleta de directivas de Content Security Policy
    Todas las directivas de CSP Level 3, qué controlan y su respaldo, las palabras clave de origen.
  • Hoja de referencia Guía rápida de comandos OpenSSL
    Los comandos de OpenSSL que de verdad se usan: hashes y bytes aleatorios, claves, solicitudes de certificado, lectura de certificados.

Preguntas frecuentes

El navegador se niega a ejecutar el script o aplicar la hoja de estilo y registra un error en la consola. Su página sigue cargando, pero sin ese archivo, así que pruebe el caso de fallo.

Aporta poco, porque quien puede cambiar el archivo suele poder cambiar también la página. Es más útil para archivos de terceros de una CDN.

Volver a los tutoriales paso a paso
AdSense Placeholder
Slot: footer_leaderboard