Crossorigin özniteliğinin amacı ...? Hem resim hem de komut dosyası etiketlerinde

Question

.

Anladığım kadarıyla Diğer alanlardaki hem komut ve görüntüleri erişebilmesini oldu. Peki bu özellik ne zaman kullanılır? Eğer komut ve görüntü erişmek için başkalarının yeteneğini kısıtlamak istediğinizde

bu mudur?

Görüntüler

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

Scripts

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

Answer 1

CORS özellikli görüntüleri kusurlu olmadan elemanda yeniden kullanılabilir. izin verilen değerler şunlardır: sayfa zaten sorunuza yanıt

.

Kros kökenli bir resminiz varsa, bunu bir kanvasa kopyalayabilirsiniz, ancak bu, tuvali okuyamanızı engelleyen "işaretler" (böylece, görüntüleri "çalmaz" gibi bir intranetden "çalamazsınız") erişim hakkına sahip olmak. Ancak, CORS kullanarak görüntünün depolandığı sunucu tarayıcıya çapraz kaynaklı erişime izin verilebileceğini söyler ve böylece görüntü verilerine bir tuval aracılığıyla erişebilirsiniz. Eğer komut ve görüntü erişmek için başkalarının yeteneğini kısıtlamak istediğinizde https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

bu mu:

MDN Ayrıca sadece bu şey hakkında bir sayfa var?

sayılı

Answer 2

cevap the specification bulunabilir. img için

:

crossorigin özelliğin bir CORS settings attribute olduğunu. Amacı, çapraz kaynaklı erişime izin veren üçüncü taraf sitelerin görüntülerinin canvas ile kullanılmasına izin vermektir.

ve script için

:

crossorigin özelliğin bir CORS settings attribute olduğunu. Diğer origins'dan alınan komut dosyaları için hata bilgilerinin açık olup olmayacağını kontrol eder.

Answer 3

Bu başarıyla crossorigin bir script etiketine bağlıyor kullanmış nasıl:

Sorun biz: Biz window.onerror

kullanarak sunucudaki js hataları günlüğe çalışıyorlardı Hemen hemen tüm hataların Bu mesajda şu mesaj vardı: Script error. ve bu js hatalarının nasıl çözüleceği hakkında çok az bilgi alıyorduk.

O krom yerli uygulama istenen statik varlık tarayıcı en same-origin policy ihlal ediyorsa Script error. olarak message gönderecek hataları

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

rapor etmek olduğu ortaya çıktı.

Bizim örneğimizde, statik değeri bir cdn'den veriyorduk.

Çözdüğümüz yol, özniteliğini script etiketine ekliyordu.

P.S. this answer

Answer 4

'dan edinilen tüm bilgilere sahipseniz, yerel olarak hızlı bir kod parçası geliştiriyorsanız ve Chrome kullanıyorsunuz, bir sorun var. sayfanız "file: // xxxx" formunun bir URL'sini kullanarak yüklerse, tuvaldeki getImageData() yöntemini kullanmaya çalışmak başarısız olur ve görüntünüz aynı şekilde alınsa bile çapraz kaynaklı güvenlik hatasını atar Yerel makinenizde, tuvali oluşturan HTML sayfası olarak dizin. HTML sayfası getirilen Yani, eğer gelen ki:

file: // D:

/wwwroot/mydir/mytestpage.html ve JavaScript dosyası ve görüntüler, gelen alınıyor olmasıdır ki:

file: // D:

dosyayı /wwwroot/mydir/mycode.js: // D: /wwwroot/mydir/myImage.png

sonra

bu ikincil varlıklar aynı mesafede alınıyor olmasıdır olmasına rağmen kökeni, güvenlik hatası hala atılmış.

Bazı nedenlerden dolayı, kökeni düzgün bir şekilde ayarlamak yerine, Chrome, zorunlu varlıkların kaynak özniteliğini "null" olarak ayarlar; bu da tarayıcınızdaki HTML sayfasını açarak ve hata ayıklama yaparak getImageData() ile ilgili kodu sınamanın imkansız hale getirilmesini imkansız hale getirir. yerel olarak.

Ayrıca, görüntünün crossOrigin özelliğini "anonim" olarak ayarlamak aynı nedenden dolayı çalışmıyor.

Yine de bunun için bir geçici çözüm bulmaya çalışıyorum, ancak bir kez daha, yerel hata ayıklama, tarayıcı uygulayıcıları tarafından mümkün olduğunca ağrılı hale getiriliyor gibi görünüyor.

Kodumu Firefox'ta çalıştırmayı denedim ve Firefox'un, görüntümün HTML ve JS komut dosyaları ile aynı kaynaktan geldiğini kabul ederek doğru olduğunu düşünüyorum. Bu nedenle, şu anda Chrome'da sorunu nasıl çözebileceğimize dair bazı ipuçlarını memnuniyetle karşılıyoruz. Firefox çalışırken, hata ayıklayıcı ağrılı bir şekilde yavaş, bir hizmet reddi saldırısından atılan bir adımdır.

Answer 5

Google Chrome'u çapraz kaynaklı bir hata atmadan file: // başvurularına izin vermek için nasıl ikna etmeyi öğrendim.

Adım 1: Diğer işletim sistemlerinde bir kısayol (Windows) veya eşdeğeri oluşturun;

Adım 2:

"C: Aşağıdaki gibi bir şeye hedef belirleyin \ Program Files Google \ Chrome \ Application \ krom \ (x86).exe "- Dosyalara -dosyadan-dosyadan-dosyaya erişim

Bu özel komut satırı bağımsız değişkeni, - dosyadan-dosyadan-dosyaya-erişme, Chrome'a, web sayfalarına file: // başvurularını kullanmasını bildirir, örneğin, bu görüntüleri bir HTML tuvaline aktarmaya çalıştığınızda çapraz kaynaklı hatalar atmadan, vb., Windows 7 kurulumumda çalışır, ancak Windows 8/10'da çalışıp çalışmayacağını kontrol etmeye değer. çeşitli Linux dağıtımları da var ise, sorun çözüldü - çevrimdışı geliştirme normal olarak devam eder.

Artık görüntü aktarmaya çalıştığımda Chrome'un çapraz kaynaklı hataları atmadan resim ve JSON verilerini şu adresten görüntüleyebiliyorum: // URI'ler bir tuvale veri veya JSON verilerini bir form öğesine aktarma