¿Por qué necesitamos el atributo “crossorigin” al precargar archivos de fuentes?
Para cargar correctamente los archivos de fuente, se nos dice que siempre necesitamos aplicar el atributo crossorigin a nuestras etiquetas <link rel="preload" />, por ejemplo:
html
<link rel="preload" href="fonts/comicsans.woff2" as="font" type="font/woff2" crossorigin>
¿Alguien puede darme la verdadera razón de esto? Todo lo que puedo encontrar son enlaces en MDN que simplemente dictan este requisito, sin entrar en ningún detalle sobre por qué:
https://developer.mozilla.org/en-US/docs/Web/HTML/Linktypes/preload#cors-enabledfetches
Al cargar recursos que se obtienen con CORS habilitado (por ejemplo, fetch(), XMLHttpRequest o fuentes), se debe tener especial cuidado al configurar el atributo crossorigin en su elemento . El atributo debe establecerse para que coincida con el modo CORS y de credenciales del recurso, incluso cuando la obtención no es de origen cruzado.
Como se mencionó anteriormente, un caso interesante en el que se aplica esto son los archivos de fuente. Debido a varias razones, estos deben obtenerse utilizando CORS en modo anónimo (consulte los requisitos de obtención de fuentes).
Esto parece contradictorio con mi comprensión de CORS y por qué es necesario. Estoy seguro de que hay una buena razón para esto, simplemente no puedo encontrarla.
Antes de que alguien simplemente enlace los mismos documentos de los que estoy hablando, vea a continuación:
https://drafts.csswg.org/css-fonts/#font-fetching-requirements
Realmente me gustaría una respuesta detallada de alguien que realmente sabe por qué esto es un requisito, y cuál es su propósito, con algunas evidencias (documentos, etc.) para respaldarlo.
davy.ai
La razón por la que se necesita el atributo
crossoriginen elementoslinkal precargar archivos de fuentes es asegurarse de que el recurso sea tratado como una petición de origen cruzado y que los encabezados CORS estén adjuntos a la petición. Esto es necesario porque los archivos de fuente están sujetos a restricciones que no se aplican a otros tipos de recursos, como imágenes o scripts. Estas restricciones se establecen para prevenir ataques de “scraping” de fuentes, donde un atacante podría usar un archivo de fuente para extraer información del dispositivo del usuario.Para prevenir esto, los archivos de fuente deben ser recuperados utilizando CORS en modo anónimo, lo que significa que la solicitud se realiza sin credenciales (cookies o encabezados de autorización) y que la respuesta debe incluir el encabezado
Access-Control-Allow-Origincon un comodín (*) o un origen específico.Al precargar un archivo de fuente, está solicitándolo antes de usarlo en la página. Esto se hace para optimizar el proceso de carga y asegurarse de que la fuente esté disponible cuando sea necesario. Al agregar el atributo
crossoriginal elementolinkde precarga, se asegura que el archivo de fuente se recupere de la misma manera que si se usara en la página. Esto asegura que se adjunten los encabezados CORS necesarios a la solicitud y que el archivo de fuente se recupere de forma segura.En resumen, el atributo
crossorigines necesario en elementos de precargalinkpara archivos de fuente porque los archivos de fuente tienen requisitos de seguridad únicos que requieren que se recuperen utilizando CORS en modo anónimo. Al utilizar el atributo, los desarrolladores pueden asegurarse de que los archivos de fuente se precarguen de manera segura y que las páginas en las que se utilicen estén protegidas contra ataques de rascado de fuentes.