Issue với crossorigin thất bại vô danh để tải hình ảnh

Question

tham khảo: Prevent HTTP Basic Authentication from displaying prompt for images

Để bảo vệ nội dung của tôi do người dùng tạo ra từ này tiềm năng "khai thác", tôi đã thêm crossorigin="anonymous" cho tất cả [img] BBCodes.

Vâng, nó hoạt động trong IE11: khi tôi thử nghiệm khai thác, hình ảnh không còn kích hoạt hộp thoại xác thực (kiểm tra với bộ nhớ cache bị vô hiệu hóa và các URL khác để đo tốt).

Nhưng trong Chrome, việc khai thác không hoạt động ... vì hình ảnh không được tải. Thay vào đó, tôi nhận được lỗi rõ ràng khá phổ biến:

Image from origin 'XXXXX' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'YYYYY' is therefore not allowed access.

Có thể sự hiểu biết của tôi sai, nhưng tôi cho rằng giá trị này sẽ hoạt động.

Tôi có thiếu thứ gì đó không và nếu có thì tùy chọn nào khác để bảo vệ chống lại vấn đề này?

Answer 1

Trước hết là, theo hiểu biết của tôi, bạn muốn nói rằng hình ảnh không tải trong IE. Đó là hoàn hảo! Đó là cách nó phải hoạt động.

Thứ hai (& cuối cùng), hoạt động của Chrome cũng hoàn hảo.

Process/Thông tin chi tiết:

Máy chủ không đưa thông tin đến các trang web có nguồn gốc (bằng cách thiết lập Access-Control-Allow-Origin để Anonymous), hình ảnh sẽ bị nhiễm độc và sử dụng của nó bị hạn chế.

Bây giờ, nếu bạn có một cross-origin image, bạn có thể sao chép nó thành canvas nhưng "taints" canvas ngăn bạn đọc nó (vì vậy bạn không thể "ăn cắp" hoặc "tải xuống" hình ảnh). 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 gốc có thể được cho phép và do đó bạn có thể truy cập dữ liệu hình ảnh thông qua canvas.

Khi tiêu đề không có cùng nguồn gốc, nếu tài nguyên được tìm nạp mà không có yêu cầu CORS (nghĩa là không gửi tiêu đề Origin: HTTP) và khi nó trở thành không hợp lệ, thì nó được xử lý như liệt kê từ khóa ẩn danh đã được sử dụng.

Vì vậy, dự đoán của tôi là null là giống như không hiện diện hoặc không hợp lệ trong trường hợp nó được xử lý như ẩn danh.

Vì vậy, bạn thấy rằng lỗi trong Chrome có nghĩa là thực hiện chính xác những gì IE đang làm.

---

Một số tài liệu tham khảo có thể Help-

• Purpose of the crossorigin attribute …?

• HTML crossorigin attribute for img tag

• Javascript CORS image/canvas manipulation

• Drawing images to canvas with img.crossOrigin = “Anonymous” doesn't work

Mặc dù không phải là một câu trả lời trực tiếp, nhưng, hữu ích links-

• How can I override javascript files referenced with the crossorigin=“anonymous” using a Google Chrome extension?

• CORS enabled image

Hy vọng nó sẽ giúp! :) Chúc mừng mã hóa!

Answer 2

Theo tôi nghiên cứu,

Firstly What do you mean by Tainted canvas:

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.
ref: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

CORS settings attributes:

In HTML5, some HTML elements which provide support for CORS, such as img or video , have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data. By default (that is, when the attribute is not specified), CORS is not used at all.
The "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication

Kể từ khi, Hình ảnh mà bạn đang liên kết đến không phải là CORS-kích hoạt, bạn đang nhận được Access-Control-Allow-Origin lỗi.

Để khắc phục sự cố, không chỉ thực hiện thuộc tính crossOrigin mà còn phải gửi tiêu đề phù hợp. Bạn có thể đặt điều này thành crossOrigin thành use-credentials đặt tiêu đề yêu cầu thông tin đăng nhập - máy chủ có thể sử dụng để quyết định xem bạn có quyền đối với nội dung hay không. Khi các tiêu đề CORS được gửi trở lại từ máy chủ cho một hình ảnh và hình ảnh đó được sử dụng trên canvas, cờ sạch sẽ gốc là đúng.