html5 - missing - Propósito del atributo crossorigin...?

habilitar cors javascript

Question

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

Answer 1

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.

Answer 2

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 con canvas .

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.

Answer 3

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.

Answer 4

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

Answer 5

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.