Herramientas de desarrollo · Codificador y decodificador Base64
Explicación de los URI de datos: cómo funciona data:image/png;base64 y de dónde proviene
· Antecedentes
base64 codificación
Los datos: el esquema de URL se especificó en 1998 como una forma de incrustar pequeños recursos directamente en una página. Esta publicación explica su gramática, por qué Base64 es opcional y dónde los navegadores imponen límites.
El favicon que era una URL de 1,300 caracteres: encontrar un URI de datos en estado salvaje y leer sus partes
Un dato: URI inserta un pequeño recurso directamente en una URL, evitando una solicitud HTTP separada. El formato se especifica en RFC 2397 (definido en 1998) y utiliza una gramática con un esquema, un tipo de medio opcional, un indicador de codificación opcional y la carga útil en sí. Por ejemplo, data:text/plain,hello es un URI de datos de texto sin formato que contiene la palabra hola. El navegador procesa esto de la misma manera que procesa una solicitud HTTP, pero en lugar de buscar el contenido a través de la red, lo decodifica desde la propia URL.
Los URI de datos son más comunes para imágenes pequeñas, íconos CSS y dispositivos de prueba. Un dato: URI con codificación Base64 se ve así: datos:image/png;base64,iVBORw0K.... El desglose es: datos: es el esquema; image/png es el tipo de medio; ;base64 es el indicador de codificación; la cadena larga son los bytes de imagen codificados en Base64. Cuando un navegador ve esta URL, decodifica Base64 para recuperar los bytes originales y luego procesa la imagen usando esos bytes.
Lectura de un URI de datos a partir de su gramática visible: tipo de medio, marcador Base64 opcional y carga útil
Si se omite el indicador de codificación (datos:text/html,<p>hello</p>),, la carga útil es texto UTF-8 codificado en porcentaje, no en base64. La presencia de ;base64 le indica al navegador qué regla de decodificación aplicar. El tipo de medio en un URI de datos: es un tipo MIME, el mismo tipo de cadena que se usa en los encabezados de tipo de contenido HTTP. image/png, text/plain, application/json e image/svg+xml son ejemplos comunes. Si no se especifica ningún tipo de medio, el valor predeterminado es text/plain;charset=US-ASCII..
Un navegador debe determinar cómo representar los bytes según el tipo de medio: si dice imagen/png, los bytes son PNG; si dice text/html, el contenido es HTML. Especificar el tipo de medio incorrecto puede producir resultados confusos; un archivo PNG etiquetado como texto /plain se mostrará como caracteres basura en lugar de una imagen. Base64 es opcional en un dato: URI. Para el contenido de texto, la codificación porcentual (la misma codificación utilizada en las cadenas de consulta de URL) suele ser más compacta que base64. Un consumidor de URI de datos decide cómo interpretar la carga útil a partir del tipo de medio y el marcador antes de la coma. El codificador Base64 proporciona solo los caracteres de carga útil. No agrega un tipo MIME, elige si los bytes describen PNG o SVG, o valida la dirección ensamblada.
Por qué Base64 es opcional: cargas útiles de texto codificado por porcentaje para SVG y texto sin formato versus Base64 para binario
Los datos del URI:text/html,<p>Hello</p> contienen el HTML como caracteres literales (con codificación porcentual para cualquier carácter especial como comillas o corchetes angulares). Base64 es útil para datos binarios que no se pueden representar como texto y para casos en los que la carga útil contiene muchos caracteres especiales que la codificación porcentual aumentaría. Un archivo SVG o de texto pequeño puede estar codificado en porcentajes más pequeños; un archivo binario debe ser base64. Crear un data: URI a mano requiere conocer el tipo de medio y la codificación.
Para un ícono SVG, puede usar datos:imagen/svg+xml seguido de un marcado SVG codificado por porcentaje o ;base64 y bytes codificados en base64. Para la codificación porcentual, envuelva el SVG en data:image/svg+xml, luego codifique porcentualmente los corchetes angulares, comillas y otros caracteres especiales. El resultado es largo pero legible por humanos. Para base64, tome los bytes SVG, codifíquelos en base64 y genere datos:image/svg+xml;base64, y luego agregue la cadena base64. Base64 suele ser más compacto para binario, pero para texto SVG, la forma codificada por porcentaje puede ser más corta.
Ejemplo resuelto: crear un URI de datos para un SVG pequeño a mano: codificar el marcado como texto y ensamblar la cadena
Los navegadores y las aplicaciones de consumo pueden imponer límites o restricciones de políticas a los URI de datos, pero este repositorio no establece un límite numérico portátil. El uso de la memoria, el comportamiento del analizador y la política de seguridad también dependen de dónde aparece el valor, así que pruebe el navegador de destino exacto y el contexto de inserción en lugar de confiar en un límite recordado.
Una imagen 5 MB incrustada en cada archivo HTML aumentaría el tamaño de la página. Los URI de datos son mejores para recursos pequeños: íconos CSS, imágenes pequeñas o datos de prueba. Para archivos grandes, una solicitud externa es más rápida porque el navegador puede almacenar en caché la respuesta y reutilizarla en varias páginas; un dato: URI se inserta cada vez que se carga la página.
Límites de seguridad y navegador para verificar en la aplicación consumidora en lugar de asumir
Un umbral común es de unos pocos kilobytes; debajo de eso, data: Los URI son eficientes; por encima de eso, los archivos externos suelen ser más rápidos. Las políticas de seguridad y del navegador restringen los datos: uso de URI en determinados contextos. Una navegación de nivel superior (hacer clic en un enlace que apunta a un dato: URI con contenido HTML) a menudo se bloquea para evitar el phishing. Un dato: URI en un atributo src de script puede ejecutar JavaScript arbitrario, creando un riesgo de seguridad.
Los navegadores aplican reglas de Política de seguridad de contenido (CSP) a los datos: URI; un CSP estricto puede prohibirlos por completo. Generalmente se permite un data: URI en un img src o iframe src, pero incrustarlo en un contexto de estilo o script puede estar restringido. Verifique siempre la compatibilidad del navegador y la política de seguridad de su entorno de destino. Los URI de datos en CSS son comunes para imágenes de fondo pequeñas. La sintaxis es la misma: url(datos:imagen/png;base64,...).
Donde los datos: los URI siguen siendo la herramienta adecuada: íconos CSS, imágenes en línea seguras para correo electrónico y elementos de prueba
Un archivo CSS con datos incrustados: los URI se pueden enviar como un único archivo con todas las imágenes incluidas, lo que reduce las solicitudes HTTP. Esto es útil para conjuntos de iconos pequeños o gráficos simples. Las imágenes grandes incrustadas en CSS abultan el archivo y ralentizan su análisis. Las herramientas de compilación modernas (como el paquete web) pueden convertir automáticamente imágenes pequeñas en datos: URI en CSS e imágenes externas en URL normales, equilibrando el rendimiento.
Los datos: el formato URI está definido por RFC 2397, un documento breve que especifica la gramática pero no define dónde se pueden o no utilizar los datos: URI. Los proveedores de navegadores han agregado sus propias restricciones basadas en preocupaciones de seguridad y rendimiento.
Lo que esto no cubre: blob: URL, URL de objetos y acceso al sistema de archivos
Algunos sistemas tienen datos obsoletos: compatibilidad con URI en ciertos contextos (como acción de formulario en el nivel CSP 3) para evitar abusos. Cuando utilice datos: URI, pruébelo en su navegador de destino; el RFC dice que el formato es válido, pero la política de seguridad del navegador puede bloquearlo.
Crear datos: URI manualmente es poco común en producción; la mayoría de las herramientas y bibliotecas de compilación manejan la conversión. Pero comprender el formato es útil para la depuración. Si ve una URL larga de datos:image/... en su CSS o HTML, puede decodificarla con la herramienta de codificador y decodificador Base64: elimine el prefijo data:image/...;base64,, pegue la cadena restante en la herramienta y decodifíquela para ver los bytes reales.
Conclusión: un formato pequeño con gramática estricta: cómo el codificador y descodificador Base64 maneja el paso de codificación de texto para que puedas ensamblar un URI válido
Para datos SVG: URI, puede decodificar el formato de texto en porcentaje y leer el marcado XML. Comprender la anatomía de los datos: URI facilita la resolución de problemas de recursos integrados. Los URI de datos son un estándar web (RFC 2397) que permite incrustar recursos directamente como URL. Son más eficientes para recursos pequeños y estables que no se benefician del almacenamiento en caché por separado. El formato incluye una especificación opcional de tipo de medio y un indicador de codificación (base64 o codificación porcentual implícita).
La codificación Base64 es obligatoria para datos binarios, pero opcional para texto; El SVG codificado por porcentaje puede ser más legible. Las políticas de seguridad del navegador limitan dónde se pueden utilizar los datos: URI, por lo que es esencial comprender las restricciones en su entorno de destino. La herramienta de codificación y descodificación Base64 puede ayudarle a codificar manualmente un recurso o decodificar un URI incrustado para inspeccionar su contenido.