Validación HTML: Valor incorrecto X para el atributo "integrity" en el elemento "script": Valor base64 inválido (debe ser múltiplo de 4 bytes).

Acerca de este problema HTML

El atributo integrity habilita Subresource Integrity (SRI), una característica de seguridad que permite a los navegadores verificar que un recurso obtenido (como un archivo JavaScript desde un CDN) no ha sido alterado. El valor del atributo sigue el formato [algoritmo]-[hash-codificado-en-base64], donde el algoritmo es típicamente sha256, sha384, o sha512, y el hash es una representación base64 del digest criptográfico del archivo.

La codificación base64 funciona convirtiendo datos binarios en una cadena de caracteres ASCII extraídos de un alfabeto de 64 caracteres. Una propiedad clave del base64 válido es que la salida codificada debe tener siempre una longitud que sea múltiplo de 4. Cuando los datos binarios brutos no se dividen uniformemente, la salida se rellena con uno o dos caracteres = para alcanzar la longitud correcta. Si la cadena base64 en tu atributo integrity tiene una longitud incorrecta — por ejemplo, fue truncada, editada manualmente, o copiada de manera incompleta — el validador la marcará como inválida.

Esto es importante por varias razones:

Seguridad: Si el valor de integrity está malformado, el navegador no puede verificar el recurso. Dependiendo del navegador, puede bloquear el script completamente, rompiendo la funcionalidad de tu sitio.
Cumplimiento de estándares: La especificación HTML requiere que la porción del hash sea una cadena base64 válida. Un valor inválido es un error de conformidad.
Confiabilidad: Un hash malformado nunca coincidirá con ningún archivo, por lo que la verificación SRI siempre fallará, haciendo que el script sea efectivamente inutilizable.

Las causas comunes de este error incluyen:

Copiar el valor del hash de manera incompleta (faltando el relleno = final u otros caracteres).
Modificar manualmente la cadena del hash.
Usar una herramienta que produjo una salida incorrectamente codificada.
Confundir las codificaciones base64 y base64url (base64url usa - y _ en lugar de + y /, y a menudo omite el relleno).

Para solucionar el problema, regenera el hash SRI correcto para el archivo exacto que está siendo referenciado. Puedes hacer esto con la línea de comandos:

openssl dgst -sha384 -binary script.js | openssl base64 -A

O usando shasum y base64:

shasum -b -a 384 script.js | awk '{print $1}' | xxd -r -p | base64

Herramientas en línea como el SRI Hash Generator también pueden producir el valor correcto. Después de generar el hash, antepón el prefijo del algoritmo (ej., sha384-) y verifica que la porción base64 tenga una longitud divisible por 4.

Ejemplos

Incorrecto: valor base64 malformado

El hash siguiente no es una cadena base64 válida — su longitud no es múltiplo de 4, y contiene el carácter !, que no está en el alfabeto base64.

<script
  src="https://cdn.example.com/library.js"
  integrity="sha384-BadBase64Value!"
  crossorigin="anonymous"></script>

Incorrecto: hash truncado sin relleno

Este hash ha sido accidentalmente truncado, perdiendo los caracteres de relleno = finales que lo convierten en una cadena base64 válida.

<script
  src="https://cdn.example.com/library.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9Gh8S7f1bE0q/PuF3LtHac+obYTK2B69B1a8t"
  crossorigin="anonymous"></script>

Correcto: hash SRI correctamente formateado

El hash base64 tiene la longitud correcta (múltiplo de 4) y usa solo caracteres base64 válidos. La T final completa el grupo de 4 caracteres final sin necesitar relleno en este caso, pero otros hashes pueden terminar con = o ==.

<script
  src="https://cdn.example.com/library.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9Gh8S7f1bE0q/PuF3LtHac+obYTK2B69B1a8tT"
  crossorigin="anonymous"></script>

Correcto: múltiples hashes para respaldo

Puedes proporcionar múltiples valores de hash separados por espacios. Cada uno debe ser independientemente base64 válido con la longitud correcta.

<script
  src="https://cdn.example.com/library.js"
  integrity="sha256-BpfGp+xz0kN9mMKoECQbGRab7fMi/dsRZ7Sy7LVd3CE= sha384-oqVuAfXRKap7fdgcCY5uykM6+R9Gh8S7f1bE0q/PuF3LtHac+obYTK2B69B1a8tT"
  crossorigin="anonymous"></script>

Siempre asegúrate de que el hash sea generado desde el archivo exacto al que apunta el atributo src. Si el CDN sirve una versión diferente o una variante minificada, el hash no coincidirá, y el navegador bloqueará el recurso independientemente de si la codificación base64 es válida.