Trong cả thẻ hình ảnh và thẻ script.
Tôi hiểu rằng bạn có thể truy cập cả tập lệnh và hình ảnh trên các miền khác. Vậy khi nào người ta sử dụng thuộc tính này?
Đây có phải là khi bạn muốn hạn chế khả năng người khác truy cập vào tập lệnh và hình ảnh của mình không?
Hình ảnh:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin
Tập lệnh:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Câu trả lời:
Hình ảnh hỗ trợ CORS có thể được sử dụng lại trong phần tử mà không bị nhiễm bẩn. Các giá trị được phép là:
Trang đã trả lời câu hỏi của bạn.
Nếu bạn có một hình ảnh có nguồn gốc chéo, bạn có thể sao chép nó vào canvas nhưng điều này sẽ "cắt" canvas khiến bạn không thể đọc nó (vì vậy bạn không thể "lấy cắp" hình ảnh từ một mạng nội bộ mà chính trang web không có quyền truy cập ). Tuy nhiên, bằng cách sử dụng CORS, máy chủ lưu trữ hình ảnh có thể cho trình duyệt biết rằng quyền truy cập nguồn gốc chéo được phép và do đó bạn có thể truy cập dữ liệu hình ảnh thông qua canvas.
MDN cũng có một trang về vấn đề này: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
Đây có phải là khi bạn muốn hạn chế khả năng người khác truy cập vào tập lệnh và hình ảnh của mình không?
Không.
Purpose of the crossorigin attribute …?
Câu trả lời có thể được tìm thấy trong thông số kỹ thuật .
Đối với img:
Các
crossoriginthuộc tính là một thiết lập CORS thuộc tính . Mục đích của nó là cho phép sử dụng hình ảnh từ các trang web của bên thứ ba cho phép truy cập nguồn gốc chéocanvas.
và cho script:
Các
crossoriginthuộc tính là một thiết lập CORS thuộc tính . Nó kiểm soát, đối với các tập lệnh có được từ các nguồn gốc khác , liệu thông tin lỗi có được tiết lộ hay không.
canvascác phần tử.
Đây là cách chúng tôi đã sử dụng thành công crossoriginthuộc tính nó trong scriptthẻ:
Sự cố chúng tôi gặp phải: Chúng tôi đang cố gắng ghi lại lỗi js trong máy chủ bằng cách sử dụng window.onerror
Hầu như tất cả các lỗi mà chúng tôi đang ghi nhật ký đều có thông báo này: Script error.và chúng tôi nhận được rất ít thông tin về cách giải quyết các lỗi js này.
Nó chỉ ra rằng triển khai gốc trong chrome để báo cáo lỗi
if (securityOrigin()->canRequest(targetUrl)) {
message = errorMessage;
line = lineNumber;
sourceName = sourceURL;
} else {
message = "Script error.";
sourceName = String();
line = 0;
}
sẽ gửi messagenhư Script error.thể nội dung tĩnh được yêu cầu vi phạm chính sách nguồn gốc của trình duyệt .
Trong trường hợp của chúng tôi, chúng tôi đang phân phát nội dung tĩnh từ cdn.
Cách chúng tôi giải quyết nó là thêm crossoriginthuộc tính vào scriptthẻ.
PS Có tất cả thông tin từ câu trả lời này
Nếu bạn đang phát triển một đoạn mã nhanh cục bộ và bạn đang sử dụng Chrome, thì đã xảy ra sự cố. nếu trang của bạn tải bằng URL có dạng "tệp: // xxxx", thì việc cố gắng sử dụng getImageData () trên canvas sẽ không thành công và gây ra lỗi bảo mật nguồn gốc chéo, ngay cả khi hình ảnh của bạn đang được tìm nạp từ cùng một thư mục trên máy cục bộ của bạn dưới dạng trang HTML hiển thị canvas. Vì vậy, nếu trang HTML của bạn được tải xuống, hãy nói:
tệp: // D: /wwwroot/mydir/mytestpage.html
và tệp Javascript và hình ảnh của bạn đang được tìm nạp từ, giả sử:
tệp: // D: /wwwroot/mydir/mycode.js
tệp: // D: /wwwroot/mydir/myImage.png
thì mặc dù thực tế là các thực thể thứ cấp này đang được tìm nạp từ cùng một nguồn gốc, lỗi bảo mật vẫn được đưa ra.
Vì một số lý do, thay vì đặt gốc chính xác, Chrome đặt thuộc tính gốc của các thực thể cần thiết thành "null", khiến không thể kiểm tra mã liên quan đến getImageData () chỉ bằng cách mở trang HTML trong trình duyệt của bạn và gỡ lỗi cục bộ.
Ngoài ra, đặt thuộc tính crossOrigin của hình ảnh thành "ẩn danh" không hoạt động, vì lý do tương tự.
Tôi vẫn đang cố gắng tìm cách giải quyết cho vấn đề này, nhưng một lần nữa, có vẻ như việc gỡ lỗi cục bộ đang được trình triển khai trình duyệt hiển thị hết mức có thể.
Tôi vừa thử chạy mã của mình trong Firefox và Firefox đã làm đúng, bằng cách nhận ra rằng hình ảnh của tôi có cùng nguồn gốc với các tập lệnh HTML và JS. Vì vậy, tôi hoan nghênh một số gợi ý về cách giải quyết vấn đề trong Chrome, vì hiện tại, trong khi Firefox hoạt động, trình gỡ lỗi của nó rất chậm, đến mức bị xóa một bước khỏi cuộc tấn công từ chối dịch vụ.
Tôi đã tìm ra cách thuyết phục Google Chrome cho phép tệp: // tham chiếu mà không gặp lỗi nguồn gốc chéo.
Bước 1: Tạo lối tắt (Windows) hoặc tương đương trong các hệ điều hành khác;
Bước 2: Đặt mục tiêu thành một cái gì đó như sau:
"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --allow-file-access-from-files
Đối số dòng lệnh đặc biệt đó, --allow-file-access-from-files, yêu cầu Chrome cho phép bạn sử dụng tệp: // tham chiếu đến các trang web, hình ảnh, v.v., mà không gây ra lỗi nguồn gốc chéo mỗi khi bạn cố chuyển ví dụ như hình ảnh trên canvas HTML. Nó hoạt động trên thiết lập Windows 7 của tôi, nhưng cần kiểm tra xem nó có hoạt động trên Windows 8/10 và các bản phân phối Linux khác nhau hay không. Nếu có, sự cố đã được giải quyết - quá trình phát triển ngoại tuyến sẽ tiếp tục như bình thường.
Giờ đây, tôi có thể tham chiếu hình ảnh và dữ liệu JSON từ tệp: // URIs mà không bị Chrome mắc lỗi nguồn gốc chéo nếu tôi cố chuyển dữ liệu hình ảnh sang canvas hoặc chuyển dữ liệu JSON sang phần tử biểu mẫu.