Crossorigin niteliğinin amacı…?

Hem resim hem de komut dosyası etiketlerinde.

Anladığım kadarıyla, diğer alanlardaki hem komut dosyalarına hem de resimlere erişebilirsiniz. Peki bu niteliği ne zaman kullanırsınız?

Başkalarının komut dosyalarınıza ve görüntünüze erişimini kısıtlamak istediğinizde mi?

Görüntüler:

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

Kodlar:

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

CORS özellikli görüntüler, öğede lekelenmeden yeniden kullanılabilir. İzin verilen değerler şunlardır:

Sayfa zaten sorunuzu yanıtlıyor.

Çapraz kökenli bir görüntünüz varsa, onu bir tuvale kopyalayabilirsiniz, ancak bu, tuvali okumanızı engelleyen "kirletiyor" (böylece, örneğin sitenin kendisinin erişemediği bir intranetten görüntüleri "çalamazsınız" ). Bununla birlikte, CORS kullanarak, görüntünün depolandığı sunucu tarayıcıya çapraz kaynak erişimine izin verildiğini söyleyebilir ve böylece görüntü verilerine bir tuval aracılığıyla erişebilirsiniz.

MDN'de ayrıca bu konuyla ilgili bir sayfa var: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Başkalarının komut dosyalarınıza ve görüntünüze erişimini kısıtlamak istediğinizde mi?

Hayır.

Cevap şartnamede bulunabilir .

Şunun için img:

crossoriginÖznitelik bir olan CORS ayarları özellik . Amacı, çapraz kaynaklı erişime izin veren üçüncü taraf sitelerden görüntülerin kullanılmasına izin vermektir canvas.

ve için script:

crossoriginÖznitelik bir olan CORS ayarları özellik . Diğer kaynaklardan elde edilen komut dosyaları için hata bilgilerinin açığa çıkıp çıkmayacağını kontrol eder.

Bunu crossoriginbir scriptetikette bu şekilde başarıyla kullandık :

Karşılaştığımız sorun: Sunucuda js hatalarını günlüğe kaydetmeye çalışıyorduk. window.onerror

Günlüğe kaydettiğimiz neredeyse tüm hatalarda şu mesaj vardı: Script error. ve bu js hatalarının nasıl çözüleceğine dair çok az bilgi alıyorduk.

Chrome'daki yerel uygulamanın hataları bildirmek için

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

istenen statik varlık tarayıcının aynı kaynak politikasını ihlal ediyormuş messagegibi gönderecektir .Script error.

Bizim durumumuzda statik varlığı bir cdn'den sunuyorduk.

Bunu çözme şeklimiz, crossoriginniteliği scriptetikete eklemekti .

Not: Bu yanıttaki tüm bilgileri aldım

Yerel olarak hızlı bir kod parçası geliştiriyorsanız ve Chrome kullanıyorsanız, bir sorun vardır. sayfanız "file: // xxxx" biçiminde bir URL kullanarak yüklenirse, tuvalde getImageData () kullanmaya çalışmak başarısız olur ve görüntünüz aynı yerden getiriliyor olsa bile kaynaklar arası güvenlik hatası verir tuvali oluşturan HTML sayfası olarak yerel makinenizdeki dizin. Öyleyse, HTML sayfanız kaynağından getirildiyse şunu söyleyin:

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

ve Javascript dosyanız ve resimleriniz şuradan getiriliyor, örneğin:

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

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

daha sonra bu ikincil varlıkların aynı kaynaktan getirilmesine rağmen, güvenlik hatası yine de atılır.

Bazı nedenlerden dolayı, kökeni düzgün bir şekilde ayarlamak yerine, Chrome gerekli varlıkların kaynak özniteliğini "boş" olarak ayarlar ve getImageData () içeren kodu yalnızca tarayıcınızda HTML sayfasını açıp yerel olarak hata ayıklayarak test etmeyi imkansız hale getirir.

Ayrıca, görüntünün crossOrigin özelliğini "anonim" olarak ayarlamak aynı nedenle çalışmaz.

Hala bunun için bir çözüm bulmaya çalışıyorum, ancak bir kez daha, yerel hata ayıklamanın tarayıcı uygulayıcıları tarafından olabildiğince acı verici hale getirildiği görülüyor.

Kodumu Firefox'ta çalıştırmayı denedim ve Firefox, resmimin HTML ve JS komut dosyalarıyla aynı kaynaktan geldiğini fark ederek bunu doğru yapıyor. Bu nedenle, Chrome'da sorunun nasıl çözüleceğine dair bazı ipuçlarını memnuniyetle isterim, şu anda olduğu gibi, Firefox çalışırken, hata ayıklayıcı, hizmet reddi saldırısından bir adım uzaklaşma noktasına kadar acı verici bir şekilde yavaş.

Google Chrome'u, çapraz kaynak hatası vermeden file: // referanslarına izin vermeye nasıl ikna edeceğimi öğrendim.

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

Adım 2: Hedefi aşağıdaki gibi bir şeye ayarlayın:

"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" - dosyalardan-izin-dosya-erişimi

Bu özel komut satırı argümanı --allow-file-access-from-files, Chrome'a ​​file: // referanslarını web sayfalarına, görüntülere vb. Her aktarmaya çalıştığınızda çapraz kaynak hataları atmadan kullanmanıza izin vermesini söyler görüntüleri bir HTML tuvaline aktarın. Windows 7 kurulumumda çalışıyor, ancak Windows 8/10 ve çeşitli Linux dağıtımlarında da çalışıp çalışmayacağını kontrol etmeye değer. Varsa, sorun çözülür - çevrimdışı geliştirme normal şekilde devam eder.

Artık, resim verilerini bir tuvale veya JSON verilerini bir form öğesine aktarmaya çalışırsam, Chrome çapraz kaynak hataları atmadan file: // URI'lerden resimlere ve JSON verilerine başvurabilirim.