html5 - missing - Propósito del atributo crossorigin...?
habilitar cors javascript (5)
en etiquetas de imágenes y secuencias de comandos.
Según tengo entendido, puede acceder tanto a los scripts como a las imágenes en otros dominios. Entonces, ¿cuándo uno usa este atributo?
¿Esto es así cuando quieres restringir la capacidad de otros para acceder a tus scripts e imágenes?
Imágenes
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin
Guiones
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Las imágenes habilitadas para CORS se pueden reutilizar en el elemento sin estar contaminadas. Los valores permitidos son:
La página ya responde tu pregunta.
Si tiene una imagen de origen cruzado, puede copiarla en un lienzo, pero esto "contamina" el lienzo que le impide leerlo (por lo que no puede "robar" imágenes, por ejemplo, desde una intranet donde el sitio en sí no tiene acceso). ) Sin embargo, al usar CORS, el servidor donde se almacena la imagen puede indicarle al navegador que se permite el acceso de origen cruzado y, por lo tanto, puede acceder a los datos de la imagen a través de un lienzo.
MDN también tiene una página sobre esto: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
¿Esto es así cuando quieres restringir la capacidad de otros para acceder a tus scripts e imágenes?
No.
La respuesta se puede encontrar en la especificación .
Para img
:
El atributo
crossorigin
es un atributo de configuración CORS . Su objetivo es permitir que las imágenes de sitios de terceros que permiten el acceso de origen cruzado se utilicen concanvas
.
y para script
:
El atributo
crossorigin
es un atributo de configuración CORS . Controla, para las secuencias de comandos que se obtienen de otros orígenes , si la información de error estará expuesta.
Si está desarrollando una pieza rápida de código localmente y está usando Chrome, hay un problema. si su página se carga usando una URL del formato "file: // xxxx", entonces tratar de usar getImageData () en el lienzo fallará, y arrojará el error de seguridad de origen cruzado, incluso si su imagen se está obteniendo de la misma directorio en su máquina local como la página HTML que representa el lienzo. Entonces, si su página HTML es extraída, digamos:
file: // D: /wwwroot/mydir/mytestpage.html
y su archivo Javascript y las imágenes se obtienen de, digamos:
file: // D: /wwwroot/mydir/mycode.js
file: // D: /wwwroot/mydir/myImage.png
luego, a pesar del hecho de que estas entidades secundarias se están obteniendo del mismo origen, el error de seguridad aún se produce.
Por alguna razón, en lugar de establecer correctamente el origen, Chrome establece el atributo de origen de las entidades necesarias en "nulo", lo que hace imposible probar el código que involucra getImageData () simplemente abriendo la página HTML en su navegador y depurando localmente.
Además, establecer la propiedad crossOrigin de la imagen en "anónimo" no funciona, por el mismo motivo.
Todavía estoy tratando de encontrar una solución para esto, pero una vez más, parece que la depuración local se está volviendo lo más dolorosa posible por los implementadores del navegador.
Intenté ejecutar mi código en Firefox, y Firefox lo hace bien, al reconocer que mi imagen es del mismo origen que las secuencias de comandos HTML y JS. Así que agradecería algunos consejos sobre cómo solucionar el problema en Chrome, como por el momento, mientras Firefox funciona, su depurador es muy lento, hasta el punto de estar a un paso de un ataque de denegación de servicio.
Así es como hemos utilizado crossorigin
atributo con éxito en una etiqueta de script
:
Problema que tuvimos: estábamos tratando de registrar errores js en el servidor usando window.onerror
Casi todos los errores que estábamos registrando tenían este mensaje: Script error.
y recibíamos muy poca información sobre cómo resolver estos errores js.
Resulta que la implementación nativa en Chrome para informar errores
if (securityOrigin()->canRequest(targetUrl)) {
message = errorMessage;
line = lineNumber;
sourceName = sourceURL;
} else {
message = "Script error.";
sourceName = String();
line = 0;
}
enviará el message
como un Script error.
si el activo estático solicitado viola la política del mismo origen del navegador.
En nuestro caso, estábamos sirviendo el activo estático de un cdn.
La forma en que lo crossorigin
fue agregar el atributo crossorigin
a la etiqueta del script
.
PD. Obtuve toda la información de esta respuesta
Descubrí cómo convencer a Google Chrome de que permita las referencias de archivo: // sin generar un error de origen cruzado.
Paso 1: crea un acceso directo (Windows) o su equivalente en otros sistemas operativos;
Paso 2: establece el objetivo a algo como lo siguiente:
"C: / Archivos de programa (x86) / Google / Chrome / Application / chrome.exe" --allow-file-access-from-files
Ese argumento especial de línea de comando, --allow-file-access-from-files, le dice a Chrome que le permita usar file: // referencias a páginas web, imágenes, etc., sin lanzar errores de origen cruzado cada vez que intente transferir esos imágenes a un lienzo HTML, por ejemplo. Funciona en mi configuración de Windows 7, pero vale la pena verificar para ver si funciona en Windows 8/10 y varias distribuciones de Linux también. Si lo hace, problema resuelto: el desarrollo fuera de línea se reanuda de forma normal.
Ahora puedo hacer referencia a imágenes y datos JSON desde file: // URIs, sin que Chrome arroje errores de origen cruzado si intento transferir datos de imágenes a un lienzo o transferir datos JSON a un elemento de formulario.