Kapan saya harus menggunakan atribut "crossorigin" pada "prekoneksi" <link>?

14

Saya ingin menyertakan beberapa petunjuk sumber daya sebelum masuk di situs saya sehingga browser dapat (misalnya) terhubung ke CDN jQuery sebelum mereka benar-benar melihat tag skrip yang memanggil CDN. Saya tidak yakin apakah saya harus menyertakan atribut "crossorigin" atau berapa nilainya. The spek mengatakan, sebagian,

Untuk memulai preconnect, agen pengguna harus menjalankan langkah-langkah ini:

[...]

  1. Biarkan corsAttributeState menjadi kondisi saat ini dari crossoriginatribut konten elemen .
  2. Biarkan kredensial menjadi nilai boolean yang ditetapkan true.
  3. Jika corsAttributeState adalah Anonymousdan asal tidak sama dengan asal Dokumen saat ini, setel kredensial ke false.
  4. Mencoba untuk mendapatkan koneksi dengan asal dan kredensial .

Saya tidak tahu bagaimana menafsirkan algoritma ini. Jika saya terhubung ke CDN, yang akan membiarkan siapa pun mengunduh kontennya tanpa kredensial apa pun, nilai apa yang harus saya gunakan untuk atribut "crossorigin"?

html performance cross-origin bdesham
sumber
Terkait: stackoverflow.com/questions/55520102/…
jakub.g

Jawaban:

4

Saya sedang mencari hal yang sama dan saya menemukan ini

Ini menyatakan di sini bahwa jika Anda tidak menggunakan atribut asal silang agen pengguna hanya melakukan pencarian dns tetapi tidak membuat koneksi dengan domain tertentu. Jadi atribut crossorigin diperlukan jika Anda harus melakukan prekoneksi ke cross domain, seperti ini:

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

Juga jika Anda ingin mengirim beberapa kredensial ke domain lintas tertentu, Anda dapat mengatur nilai menjadi crossorigin karena crossorigin = use-credentialsjika tidak saya pikir nilai defaultnya adalah anonim.

taman oranges
sumber
Ini setengah benar. Jika CORS digunakan (seperti halnya font), hanya pencarian DNS yang akan digunakan dengan permintaan font. (Sambungan masih terjadi, tetapi tidak ditampilkan dalam bagan air terjun karena koneksi terpisah harus dibuka untuk permintaan CORS .) Jika Anda mengambil skrip, menggunakan crossoriginjuga akan membuang-buang koneksi, karena koneksi baru harus dibuka sehingga tidak menggunakan CORS.
Michael Crenshaw
2

Sejauh ini saya mengerti penggunaan crossorigin, khususnya dalam hal nilainya anonymousdan use-credentials, Anda harus menggunakannya crossorigin="use-credentials"jika:

  • Anda menggunakan aset, seperti gambar atau video, yang memiliki atribut crossorigin
  • Anda berencana untuk membawa cookie, otentikasi HTTP, dan sertifikat SSL sisi klien antara asal, berdasarkan interaksi agen pengguna sebelumnya dengan asal.

Selain dokumentasi yang dikutip oleh Anda saya punya ini dan itu . Tapi memang dokumentasinya menyesatkan dan mengandung kesalahan ejaan: yang pertama menyebutnya use-credentials, yang kedua - user-credentials.

Bagaimanapun, dalam pemahaman saya:

  • tidak ada crossoriginsama sekali equalscrossorigin="anonymous"
  • crossorigin sama dengan crossorigin="use-credentials"

Mungkin seseorang akan mengoreksi saya.

PS : Versi halaman Mozilla saat ini untuk subjek berarti:

Kata kunci yang tidak valid dan string kosong akan ditangani sebagai kata kunci anonim.

Berarti: tidak ada crossoriginsama sekali, crossoriginatau crossorigin="use_credentials"semua ditangani sebagai crossorigin="anonymous".

Evgeniy
sumber
5
Saya percaya, sebagaimana disebutkan dalam MDN , Secara default (yaitu, ketika atribut tidak ditentukan), CORS tidak digunakan sama sekali. Selain itu, pengaturan hanya crossoriginsama dengan crossorigin="anonymous".
Shakespear
1

Itu tergantung pada dua hal:

  1. Jenis aset yang akan diunduh (yang menentukan apakah CORS akan digunakan)
  2. Apakah server target menggunakan kredensial untuk koneksi CORS

Untuk jQuery, Anda tidak akan menggunakancrossorigin . Skrip tidak termasuk jenis sumber daya yang digunakan browser untuk mengunduh CORS .

Font, di sisi lain, gunakan CORS.

  • Jika halaman hanya akan mengambil sumber daya yang menggunakan CORS, sertakan crossoriginatributnya.
  • Jika halaman hanya akan mengambil sumber daya yang tidak menggunakan CORS, abaikan crossorigin. Jika
  • Jika halaman akan mengambil kedua jenis sumber daya, Anda mungkin memerlukan dua petunjuk sumber daya . (Pengungkapan penuh, tautannya ke situs pribadi saya. :-)) Seseorang menunjukkan bahwa Anda mungkin tidak memerlukan dua petunjuk untuk HTTP / 2. Saya belum punya waktu untuk menguji.

Inilah pos Stack Overflow tempat saya mengalami masalah yang sama.

Saya belum menyelami ketika kredensial CORS diperlukan. Saya belum melihat contoh di mana mereka dibutuhkan, jadi kemungkinan Anda aman dengan crossorigin(yaitu `crossorigin =" anonim ").

Michael Crenshaw
sumber
1

Semua jawaban sejauh ini tampaknya disederhanakan, tidak lengkap atau sebagian salah (topiknya kompleks, semuanya membingungkan dan tidak didokumentasikan dengan baik!), Jadi inilah pemahaman saya:

Untuk dapat menggunakan kembali koneksi yang dibuat oleh <link rel=preconnect>, hal-hal tergantung pada jenis konten yang ingin Anda ambil, dari mana, apakah permintaan akan mengirim kredensial browser (yang dapat dibuat oleh browser secara eksplisit atau implisit):

Permintaan sama-asal ( example.compermintaan sub-sumber dari example.com)

preconnectPertama-tama tidak perlu sama sekali; browser membuat koneksi tetap terbuka setelah memuat halaman cukup lama. Jika ada beberapa koneksi yang akan dibuka, browser memutuskan sendiri apakah dan berapa banyak yang akan dibuka (tergantung apakah server mengumumkan dukungan HTTP / 2 dalam jabat tangan TLS, pengaturan browser, dll.)

untuk diperiksa : bagaimana jika permintaan asal-sama memiliki crossoriginatribut: apakah itu digunakan atau diabaikan?

Permintaan berasal dari silang ( example.commeminta sumber daya dari another.com)

  • jika permintaan aktual memiliki crossoriginatribut yang secara eksplisit diatur dalam HTML ( crossOrigindalam JS - case penting), preconnect juga harus memilikinya, dengan nilai yang sama (mungkin kecuali dalam kasus di mana itu tidak masuk akal dan crossorigindiabaikan - tidak sepenuhnya jelas untuk saya belum)
  • lain, jika meminta jika <script type=module>: diperiksa
  • lain, jika permintaan itu dan "sekolah tua" permintaan <img>, <style type=stylesheet>, <iframe>, klasik <script>dll (dimulai melalui HTML atau JS) tanpa crossoriginsecara eksplisit ditentukan , maka preconnect yang HARUS TIDAK memiliki crossoriginatribut set.
  • selain itu, jika permintaan adalah permintaan font lintas-asal , preconnect harus dimilikicrossorigin=anonymous
  • selain itu, jika permintaan adalah lintas asal fetch atau XHR:
    • jika dilakukan dalam mode kredensial (yaitu cookie dilampirkan atau HTTP auth dasar digunakan; dalam kasus pengambilan, ini berarti credentials !== omit; dalam kasus XHR withCredentials === true:): preconnect harus memilikicrossorigin=use-credentials
    • jika tidak dalam mode kredensial: pra-koneksi harus ada crossorigin=anonymous

Untuk kasus terakhir (ambil / XHR), buka panel jaringan di Chrome / Firefox devtools, klik kanan permintaan, dan pilih copy as fetchdari dropdown. Ini akan membuat potongan JS, yang akan memberi tahu Anda jika permintaan itu diaktifkan CORS ( "mode"=="cors") dan kredensial ( "credentials"=="include"|"same-origin").

Namun, perhatikan trik di atas tidak berfungsi dengan benar untuk permintaan non-XHR / fetch, karena misalnya fetchdan <img>menggunakan algoritma yang berbeda untuk membuat koneksi, seperti yang dijelaskan sebelumnya.

Akhirnya, dalam HTML, <link ...crossorigin>=== <link ...crossorigin=anonymous>.

Catatan dan tautan tambahan:

jakub.g
sumber