Me gustaría incluir algunas sugerencias de recursos de preconexión en mi sitio para que los navegadores puedan (por ejemplo) conectarse al jQuery CDN antes de que realmente vean la etiqueta del script que invoca el CDN. No estoy seguro de si debo incluir el atributo "crossorigin" o cuál debería ser su valor. La especificación dice, en parte,

Para iniciar una preconexión, el agente de usuario debe ejecutar estos pasos:

[...]

3. Deje que corsAttributeState sea ​​el estado actual del crossoriginatributo de contenido del elemento .
4. Deje que las credenciales sean un valor booleano establecido en true.
5. Si corsAttributeState es Anonymousy el origen no es igual al origen del documento actual, establezca las credenciales en false.
6. Intente obtener conexión con el origen y las credenciales .

No sé cómo interpretar este algoritmo. Si me estoy conectando previamente a un CDN, lo que permitirá que cualquiera descargue su contenido sin ningún tipo de credenciales, ¿qué valor debo usar para el atributo "crossorigin"?

Estaba buscando lo mismo y encontré esto

Establece aquí que si no utiliza el atributo de origen cruzado, el agente de usuario solo realiza la búsqueda de DNS pero no establece conexión con el dominio en particular. Por lo tanto, el atributo crossorigin es necesario si tiene que conectarse previamente al dominio cruzado, así:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Además, si desea enviar algunas credenciales a ese dominio cruzado en particular, puede establecer el valor para el origen cruzado, ya crossorigin = use-credentialsque de lo contrario creo que el valor predeterminado es anónimo.

Hasta ahora entiendo el uso de crossorigin, especialmente en términos de sus valores anonymousy use-credentials, debe usar crossorigin="use-credentials"en caso de que:

• usa activos, como imágenes o videos, que tienen un atributo de origen cruzado
• planea llevar cookies, autenticación HTTP y certificados SSL del lado del cliente entre orígenes, en función de las interacciones previas del agente de usuario con el origen.

Además de la documentación citada por usted, obtuve esto y aquello . Pero, de hecho, la documentación es engañosa y contiene errores ortográficos: el primero lo llama use-credentials, el segundo - user-credentials.

De todos modos, en mi entendimiento:

• no crossorigindel todo igualcrossorigin="anonymous"
• crossorigin es igual crossorigin="use-credentials"

Tal vez alguien me corregiría.

PD : La versión actual de la página de Mozilla para el tema significa:

Una palabra clave no válida y una cadena vacía se manejarán como palabra clave anónima.

Medios: no, crossoriginen absoluto, crossorigino crossorigin="use_credentials"todos se manejan como crossorigin="anonymous".

Depende de dos cosas:

1. El tipo de activos a descargar (que determina si se utilizará CORS)
2. Si el servidor de destino usa credenciales para las conexiones CORS

Para jQuery, no lo usaríascrossorigin . Los scripts no se encuentran entre los tipos de recursos que los navegadores usan CORS para descargar .

Las fuentes, por otro lado, usan CORS.

• Si la página solo buscará recursos que usan CORS, incluya el crossoriginatributo.
• Si la página solo buscará recursos que no usan CORS, omita crossorigin. Si
• Si la página obtendrá ambos tipos de recursos, es posible que necesite dos sugerencias de recursos . (Divulgación completa, el enlace es a mi sitio personal. :-)) Alguien señaló que es posible que no necesite dos pistas para HTTP / 2. No he tenido tiempo de probar.

Aquí está la publicación de Stack Overflow donde encontré el mismo problema.

No me he zambullido cuando las credenciales de CORS son necesarias. No he visto un ejemplo en el que se necesiten, por lo que es probable que esté seguro crossorigin(es decir, `crossorigin =" anónimo ").

Todas las respuestas hasta ahora parecen simplificadas, incompletas o parcialmente incorrectas (el tema es complejo, ¡las cosas están confusamente nombradas y no están bien documentadas!), Así que aquí está mi comprensión:

Para poder reutilizar la conexión creada por <link rel=preconnect>, las cosas dependen de qué tipo de contenido desea obtener, desde dónde, si la solicitud enviará credenciales del navegador (que el navegador puede establecer explícita o implícitamente):

La solicitud es del mismo origen ( example.comsolicitudes de recursos secundarios de example.com)

No hay necesidad de preconnectnada en primer lugar; el navegador mantiene la conexión abierta después de cargar la página durante bastante tiempo. Si hay varias conexiones para abrir, el navegador decide por sí mismo si abrirá y cuántas (dependiendo de si el servidor anuncia soporte HTTP / 2 en protocolo de enlace TLS, configuración del navegador, etc.)

a verificar : ¿qué crossoriginpasa si la solicitud del mismo origen tiene atributo: se usa o se ignora?

La solicitud es de origen cruzado ( example.comsolicitudes de recursos secundarios de another.com)

• si la solicitud real tiene un crossoriginatributo establecido explícitamente en HTML ( crossOriginen JS, el caso es importante), la preconexión también debe tenerlo, con el mismo valor (tal vez excepto en los casos en que no tiene sentido y crossoriginse ignora, no está completamente claro para yo todavía)
• de lo contrario, si la solicitud es para <script type=module>: a verificar
• lo demás, si la solicitud es pedido y la "vieja escuela" para <img>, <style type=stylesheet>, <iframe>, clásico <script>, etc (iniciada a través de HTML o JS) sin crossoriginespecificar de forma explícita , a continuación, el preconnect no debe tener crossoriginestablecido el atributo.
• de lo contrario, si la solicitud es una solicitud de fuente de origen cruzado, la conexión previa debe tenercrossorigin=anonymous
• de lo contrario, si la solicitud es de origen cruzado fetch o XHR:
  • si se realiza en modo con credenciales (es decir, se adjuntan cookies o se usa autenticación básica HTTP; en caso de recuperación, esto significa credentials !== omit; en caso de XHR withCredentials === true:): la conexión previa debe tenercrossorigin=use-credentials
  • si no está en modo con credenciales: la conexión previa debe tener crossorigin=anonymous

Para el último caso (fetch / XHR), vaya al panel de red en Chrome / Firefox devtools, haga clic derecho en una solicitud y elija copy as fetchde un menú desplegable. Esto creará un fragmento de JS, que le indicará si esa solicitud está habilitada para CORS ( "mode"=="cors") y con credenciales ( "credentials"=="include"|"same-origin").

Sin embargo, tenga en cuenta que el truco anterior no funciona correctamente para solicitudes que no son XHR / fetch, porque, por ejemplo, fetchy <img>use diferentes algoritmos para establecer la conexión, como se explicó anteriormente.

Finalmente, en HTML, <link ...crossorigin>=== <link ...crossorigin=anonymous>.

Notas y enlaces adicionales:

• en Firefox, la conexión previa no funciona incluso si se supone que debe
• tres formas de verificar si la preconexión funciona
• los navegadores tienen algunos límites en la cantidad de solicitudes de DNS paralelas que pueden ocurrir
• experimentar con la preconexión con inyección de script personalizada en WebPageTest