¿Cuál es el propósito del atributo crossorigin en HTML?

Como sabemos, HTML introduce muchos elementos y atributos que tienen alguna definición y especificación que se utilizará para mejorar el desarrollo web. En este artículo, aprenderemos cómo usar atributos de origen cruzado en HTML.

El propósito del atributo crossorigin se usa para compartir los recursos de un dominio a otro dominio. Básicamente, se usa para manejar la solicitud CORS. Se usa para manejar la solicitud CORS que verifica si es seguro permitir compartir los recursos de otros dominios. Los recursos pueden incluir audio, video, imágenes, enlace o secuencia de comandos externa que especifica si admitir o no una solicitud de origen cruzado.

CORS: significa intercambio de recursos de origen cruzado. Es un mecanismo por el cual una página web solicita a otro dominio obtener recursos como audio, video, script, etc. del servidor de terceros sin filtrar la información de sus credenciales. 

Valores: este atributo contiene dos valores que se dan a continuación:

  • anónimo: Tiene un valor por defecto. Define una solicitud CORS que se enviará sin pasar la información de la credencial.
  • use-credentials: se enviará una solicitud de origen cruzado con credenciales, cookies y certificado.

Ejemplo: El siguiente código demuestra el uso del atributo crossorigin en un elemento <script>. 

index.html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        What is the purpose of crossorigin 
        Attribute in HTML?
    </title>
</head>
  
<body style="text-align: center">
    <h1>GeeksForGeeks</h1>
  
    <h2>
        What is the purpose of 
        crossorigin Attribute in HTML?
    </h2>
  
    <script id="myGeeks" type="text/javascript" 
        src="my_script.js" crossorigin="anonymous">
    </script>
    <br />
  
    <button>
        Submit
    </button>
</body>
  
</html>

my_sctipt.js

alert("Hello GeeksForGeeks")

Producción:

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *