Tujuan atribut crossorigin…?

Di tag gambar dan skrip.

Pemahaman saya adalah Anda dapat mengakses skrip dan gambar di domain lain. Jadi kapan seseorang menggunakan atribut ini?

Apakah ini saat Anda ingin membatasi kemampuan orang lain untuk mengakses skrip dan gambar Anda?

Gambar-gambar:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

Script:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Gambar yang mendukung CORS dapat digunakan kembali dalam elemen tanpa ternoda. Nilai yang diperbolehkan adalah:

Halaman tersebut sudah menjawab pertanyaan Anda.

Jika Anda memiliki gambar lintas-asal, Anda dapat menyalinnya ke kanvas tetapi ini "mencemari" kanvas yang mencegah Anda untuk membacanya (sehingga Anda tidak dapat "mencuri" gambar misalnya dari intranet di mana situs itu sendiri tidak memiliki akses ke ). Namun, dengan menggunakan CORS server tempat gambar disimpan dapat memberi tahu browser bahwa akses lintas sumber diizinkan dan dengan demikian Anda dapat mengakses data gambar melalui kanvas.

MDN juga memiliki halaman tentang hal ini: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Apakah ini saat Anda ingin membatasi kemampuan orang lain untuk mengakses skrip dan gambar Anda?

Tidak.

Jawabannya dapat ditemukan di spesifikasinya .

Untuk img:

The crossoriginatribut adalah CORS pengaturan atribut . Tujuannya adalah untuk memungkinkan gambar dari situs pihak ketiga yang memungkinkan akses lintas sumber untuk digunakan canvas.

dan untuk script:

The crossoriginatribut adalah CORS pengaturan atribut . Ini kontrol, untuk script yang diperoleh dari lainnya asal , apakah kesalahan informasi akan terkena.

Beginilah cara kami berhasil menggunakan crossoriginatributnya dalam scripttag:

Masalah yang kami miliki: Kami mencoba untuk mencatat kesalahan js di server menggunakan window.onerror

Hampir semua kesalahan yang kami catat memiliki pesan ini: Script error.dan kami mendapatkan sangat sedikit informasi tentang cara mengatasi kesalahan js ini.

Ternyata implementasi asli di chrome melaporkan kesalahan

if (securityOrigin()->canRequest(targetUrl)) {
        message = errorMessage;
        line = lineNumber;
        sourceName = sourceURL;
} else {
        message = "Script error.";
        sourceName = String();
        line = 0;
}

akan mengirim messageseolah- Script error.olah aset statis yang diminta melanggar kebijakan browser asal yang sama .

Dalam kasus kami, kami melayani aset statis dari cdn.

Cara kami menyelesaikannya adalah dengan menambahkan crossoriginatribut ke scripttag.

PS Mendapat semua info dari jawaban ini

Jika Anda mengembangkan sepotong kode cepat secara lokal, dan Anda menggunakan Chrome, ada masalah. jika laman Anda memuat menggunakan URL dengan format "file: // xxxx", mencoba menggunakan getImageData () di kanvas akan gagal, dan memunculkan kesalahan keamanan lintas sumber, bahkan jika gambar Anda diambil dari yang sama direktori di komputer lokal Anda sebagai halaman HTML yang merender kanvas. Jadi jika halaman HTML Anda diambil dari, katakan:

file: // D: /wwwroot/mydir/mytestpage.html

dan file Javascript serta gambar Anda sedang diambil, katakan:

file: // D: /wwwroot/mydir/mycode.js

file: // D: /wwwroot/mydir/myImage.png

kemudian terlepas dari kenyataan bahwa entitas sekunder ini diambil dari sumber yang sama, kesalahan keamanan masih terjadi.

Untuk beberapa alasan, alih-alih menyetel asal dengan benar, Chrome menyetel atribut asal dari entitas yang diperlukan ke "null", sehingga tidak mungkin untuk menguji kode yang melibatkan getImageData () hanya dengan membuka laman HTML di browser Anda dan melakukan debug secara lokal.

Selain itu, menyetel properti crossOrigin gambar ke "anonim" tidak berfungsi, karena alasan yang sama.

Saya masih mencoba mencari solusi untuk ini, tetapi sekali lagi, tampaknya debugging lokal dibuat sesulit mungkin oleh pelaksana browser.

Saya baru saja mencoba menjalankan kode saya di Firefox, dan Firefox melakukannya dengan benar, dengan mengenali bahwa gambar saya berasal dari sumber yang sama dengan skrip HTML dan JS. Jadi saya akan menerima beberapa petunjuk tentang cara mengatasi masalah di Chrome, karena saat ini, saat Firefox berfungsi, debuggernya sangat lambat, sampai satu langkah dihapus dari serangan penolakan layanan.

Saya telah menemukan cara membujuk Google Chrome untuk mengizinkan referensi file: // tanpa menimbulkan kesalahan lintas sumber.

Langkah 1: Buat pintasan (Windows) atau yang setara di sistem operasi lain;

Langkah 2: Tetapkan target ke sesuatu seperti berikut:

"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --allow-file-access-from-files

Argumen baris perintah khusus itu, --allow-file-access-from-files, memberi tahu Chrome untuk mengizinkan Anda menggunakan file: // referensi ke halaman web, gambar, dll., Tanpa menimbulkan kesalahan lintas sumber setiap kali Anda mencoba mentransfernya. gambar ke kanvas HTML, misalnya. Ini berfungsi pada pengaturan Windows 7 saya, tetapi perlu diperiksa untuk melihat apakah itu akan berfungsi pada Windows 8/10 dan berbagai distro Linux juga. Jika ya, masalah terselesaikan - pengembangan offline dilanjutkan seperti biasa.

Sekarang saya dapat mereferensikan gambar dan data JSON dari file: // URI, tanpa Chrome memberikan kesalahan lintas sumber jika saya mencoba mentransfer data gambar ke kanvas, atau mentransfer data JSON ke elemen formulir.