Tujuan atribut crossorigin…?


88

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

Jawaban:


31

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.


2
Saya membacanya saat saya memposting tautan di pertanyaan saya. Itu tidak ada artinya bagi saya. Pertanyaannya adalah pertanyaan umum yang mencakup skrip juga.
Smurfette

Saya tidak berpikir apakah ini benar-benar jawaban untuk pertanyaanPurpose of the crossorigin attribute …?
Pmpr

53

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.


7
Mereka tampaknya memiliki sedikit kesamaan, meski memiliki nama yang sama. Satu hal tentang kontrol kesalahan, yang lainnya untuk digunakan dengan kanvas.
Smurfette

@Smurfette: Kesamaan yang mereka miliki adalah mereka memodifikasi cara kerja elemen saat digunakan dari sumber lintas sumber. Tapi ya, mereka memang sangat berbeda.
TJ Crowder

1
@Smurfette: Ini tidak terkait dengan mereka yang memblokir Anda dari menggunakan gambar, hanya mencegah (atau mengizinkan) Anda menggunakannya dalam canvaselemen.
TJ Crowder

Perlu diketahui bahwa atribut ini juga berguna dalam elemen tautan - saat menautkan ke lembar gaya eksternal di Firefox (misalnya menggunakan font Google) ini memperbaiki masalah yang dapat muncul jika Anda memiliki skrip yang mengakses document.styleSheets
kinakuta

@Smurfette: Apakah ada atribut seperti itu untuk iFrame sehingga saya dapat mengontrol src dari sisi server, jika permintaan datang dari Origin yang diketahui atau tidak?
akashPatra

34

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


4

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.


1
Terima kasih, jawaban ini membuat saya menyadari bahwa masalah yang saya miliki mungkin hanya memengaruhi lingkungan pengujian lokal, dan memang begitu.
pengguna1032613

1

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.