วัตถุประสงค์ของแอตทริบิวต์ crossorigin ... ?

ทั้งในแท็กรูปภาพและสคริปต์

ความเข้าใจของฉันคือคุณสามารถเข้าถึงทั้งสคริปต์และรูปภาพในโดเมนอื่น ๆ ดังนั้นเมื่อใดจึงใช้แอตทริบิวต์นี้?

นี่คือเมื่อคุณต้องการ จำกัด ความสามารถของผู้อื่นในการเข้าถึงสคริปต์และรูปภาพของคุณหรือไม่?

รูปภาพ:

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

สคริปต์:

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

รูปภาพที่เปิดใช้งาน CORS สามารถนำมาใช้ซ้ำในองค์ประกอบได้โดยไม่ทำให้เสีย ค่าที่อนุญาตคือ:

หน้านี้ตอบคำถามของคุณแล้ว

หากคุณมีภาพข้ามแหล่งที่มาคุณสามารถคัดลอกลงในผืนผ้าใบได้ แต่ผืนผ้าใบ "taints" นี้จะป้องกันไม่ให้คุณอ่าน (ดังนั้นคุณจึงไม่สามารถ "ขโมย" ภาพได้เช่นจากอินทราเน็ตที่ไซต์นั้นไม่สามารถเข้าถึงได้ ). อย่างไรก็ตามการใช้ CORS เซิร์ฟเวอร์ที่จัดเก็บรูปภาพสามารถบอกเบราว์เซอร์ได้ว่าอนุญาตให้มีการเข้าถึงข้ามจุดเริ่มต้นดังนั้นคุณจึงสามารถเข้าถึงข้อมูลรูปภาพผ่านผืนผ้าใบได้

MDN ยังมีหน้าเกี่ยวกับสิ่งนี้: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

นี่คือเมื่อคุณต้องการ จำกัด ความสามารถของผู้อื่นในการเข้าถึงสคริปต์และรูปภาพของคุณหรือไม่?

ไม่

คำตอบสามารถพบได้ในข้อกำหนดสเปค

สำหรับimg:

crossoriginแอตทริบิวต์เป็นแอตทริบิวต์ล ธ การตั้งค่า มีวัตถุประสงค์เพื่ออนุญาตให้ใช้รูปภาพจากไซต์ของบุคคลที่สามที่อนุญาตให้ใช้การเข้าถึงข้ามแหล่งที่มาcanvasได้

และสำหรับscript:

crossoriginแอตทริบิวต์เป็นแอตทริบิวต์ล ธ การตั้งค่า มันควบคุมสำหรับสคริปต์ที่ได้รับจากจุดเริ่มต้นอื่น ๆว่าข้อมูลข้อผิดพลาดจะถูกเปิดเผยหรือไม่

นี่คือวิธีที่เราประสบความสำเร็จในการใช้crossoriginแอตทริบิวต์ในไฟล์scriptแท็ก :

ปัญหาที่เราพบ: เรากำลังพยายามบันทึกข้อผิดพลาด js ในเซิร์ฟเวอร์โดยใช้ไฟล์ window.onerror

ข้อผิดพลาดเกือบทั้งหมดที่เราบันทึกมีข้อความนี้: Script error.และเราได้รับข้อมูลน้อยมากเกี่ยวกับวิธีแก้ไขข้อผิดพลาด js เหล่านี้

ปรากฎว่าการนำไปใช้งานดั้งเดิมใน chrome เพื่อรายงานข้อผิดพลาด

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

จะส่งmessageราวกับScript error.ว่าเนื้อหาคงที่ที่ร้องขอนั้นละเมิดนโยบายแหล่งกำเนิดเดียวกันของเบราว์เซอร์นโยบายเดียวกันแหล่งกำเนิด

ในกรณีของเราเราให้บริการเนื้อหาคงที่จาก cdn

วิธีที่เราแก้ไขได้คือการเพิ่มcrossoriginแอตทริบิวต์ลงในไฟล์scriptแท็ก

ปล. ได้ข้อมูลทั้งหมดจากคำตอบนี้

หากคุณกำลังพัฒนาโค้ดสั้น ๆ ในเครื่องและคุณกำลังใช้ Chrome แสดงว่ามีปัญหา หากหน้าของคุณโหลดโดยใช้ URL ในรูปแบบ "file: // xxxx" การพยายามใช้ getImageData () บนผืนผ้าใบจะล้มเหลวและทำให้เกิดข้อผิดพลาดด้านความปลอดภัยข้ามแหล่งที่มาแม้ว่ารูปภาพของคุณจะถูกดึงมาจากสิ่งเดียวกันก็ตาม ไดเร็กทอรีบนเครื่องโลคัลของคุณเป็นเพจ HTML ที่แสดงผ้าใบ ดังนั้นหากดึงหน้า HTML ของคุณมาจากให้พูดว่า:

ไฟล์: // D: /wwwroot/mydir/mytestpage.html

และกำลังดึงไฟล์ Javascript และรูปภาพของคุณให้พูดว่า:

ไฟล์: // D: /wwwroot/mydir/mycode.js

ไฟล์: // D: /wwwroot/mydir/myImage.png

แม้ว่าจะมีการดึงข้อมูลเอนทิตีรองเหล่านี้มาจากแหล่งกำเนิดเดียวกัน แต่ข้อผิดพลาดด้านความปลอดภัยก็ยังคงเกิดขึ้น

ด้วยเหตุผลบางประการแทนที่จะตั้งค่าจุดเริ่มต้นอย่างถูกต้อง Chrome จะตั้งค่าแอตทริบิวต์ต้นทางของเอนทิตีที่จำเป็นเป็น "null" ทำให้ไม่สามารถทดสอบโค้ดที่เกี่ยวข้องกับ getImageData () ได้ง่ายๆเพียงแค่เปิดหน้า HTML ในเบราว์เซอร์ของคุณแล้วทำการดีบักในเครื่อง

นอกจากนี้การตั้งค่าคุณสมบัติ crossOrigin ของรูปภาพเป็น "ไม่ระบุตัวตน" จะใช้ไม่ได้ด้วยเหตุผลเดียวกัน

ฉันยังคงพยายามหาวิธีแก้ปัญหานี้ แต่ดูเหมือนอีกครั้งว่าการดีบักในเครื่องกำลังได้รับความเจ็บปวดมากที่สุดเท่าที่จะทำได้โดยผู้ใช้งานเบราว์เซอร์

ฉันเพิ่งลองเรียกใช้โค้ดของฉันใน Firefox และ Firefox ทำให้ถูกต้องโดยรับรู้ว่ารูปภาพของฉันมาจากต้นกำเนิดเดียวกันกับสคริปต์ HTML และ JS ดังนั้นฉันยินดีรับคำแนะนำบางประการเกี่ยวกับวิธีแก้ไขปัญหาใน Chrome ในขณะนี้ในขณะที่ Firefox ทำงานตัวดีบักเกอร์ทำงานช้าอย่างเจ็บปวดจนถึงขั้นถูกลบออกไปหนึ่งขั้นตอนจากการโจมตีปฏิเสธบริการ

ฉันได้ค้นพบวิธีชักชวน Google Chrome ให้อนุญาต file: // การอ้างอิงโดยไม่ทำให้เกิดข้อผิดพลาดข้ามแหล่งกำเนิด

ขั้นตอนที่ 1: สร้างทางลัด (Windows) หรือเทียบเท่าในระบบปฏิบัติการอื่น

ขั้นตอนที่ 2: กำหนดเป้าหมายเป็นดังต่อไปนี้:

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

อาร์กิวเมนต์บรรทัดคำสั่งพิเศษ --allow-file-access-from-files บอกให้ Chrome อนุญาตให้คุณใช้ file: // การอ้างอิงไปยังหน้าเว็บรูปภาพ ฯลฯ โดยไม่ทิ้งข้อผิดพลาดข้ามที่มาทุกครั้งที่คุณพยายามถ่ายโอน ภาพไปยังผืนผ้าใบ HTML เช่น ใช้งานได้กับการตั้งค่า Windows 7 ของฉัน แต่ควรตรวจสอบเพื่อดูว่าจะทำงานบน Windows 8/10 และ Linux distros ต่างๆได้หรือไม่ หากเป็นเช่นนั้นปัญหาจะได้รับการแก้ไข - การพัฒนาแบบออฟไลน์จะดำเนินต่อไปตามปกติ

ตอนนี้ฉันสามารถอ้างอิงรูปภาพและข้อมูล JSON จากไฟล์: // URI โดยที่ Chrome ไม่แสดงข้อผิดพลาดข้ามต้นทางหากฉันพยายามถ่ายโอนข้อมูลรูปภาพไปยังแคนวาสหรือถ่ายโอนข้อมูล JSON ไปยังองค์ประกอบฟอร์ม