Cuando uso URL de origen cruzado para imágenes con la API de lienzo, si la imagen es de origen cruzado, obtengo una excepción de lienzo contaminado. MDN Permitir el uso de imágenes y lienzos de origen cruzado .
Cambiar crossOrigin="anonymous" soluciona el problema; sin embargo, ¿está bien hacer eso siempre? ¿O debería verificar primero la URL para asegurarme de que realmente es crossOrigin antes de configurarla como anónima?
p.ej
function isCrossOriginURL(url) { const { location } = window; const parts = url.match(/^(\w+:)\/\/([^:/?#]*):?(\d*)/i); return ( parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port) ); } console.log(isCrossOriginURL("https://stacksnippets.net")) console.log(isCrossOriginURL("https://google.com"))No está bien establecer siempre crossorigin=anonymous .
El atributo crossorigin es una declaración de que desea hacer algo con la imagen que requiere permiso para usar CORS.
Si el servidor no otorga permiso para usar CORS, no podrá hacer cosas con la imagen que normalmente no requieren permiso... como mostrar la imagen.
<img src="https://placem.at/places?h=100&w=100" alt="No CORS needed"> <img src="https://placem.at/places?h=100&w=100" crossorigin=anonymous alt="Requires CORS">Se permite configurar crossorigin para solicitudes enviadas al mismo origen. En el caso general, no recomendaría hacerlo porque:
pero no romperá su código para hacerlo.