HTML attribute: crossorigin
Thuộc tính crossorigin, hợp lệ trên các phần tử <audio>, <img>, <link>, <script> và <video>, cung cấp hỗ trợ cho CORS, xác định cách phần tử xử lý các yêu cầu cross-origin, từ đó cho phép cấu hình các yêu cầu CORS cho dữ liệu được tải về của phần tử. Tùy thuộc vào phần tử, thuộc tính có thể là thuộc tính cài đặt CORS.
Thuộc tính nội dung crossorigin trên các phần tử phương tiện là thuộc tính cài đặt CORS.
Các thuộc tính này là liệt kê, và có các giá trị có thể có sau:
anonymous-
Yêu cầu sử dụng tiêu đề CORS và cờ thông tin xác thực được đặt thành
'same-origin'. Không có trao đổi thông tin xác thực người dùng qua cookie, chứng chỉ TLS phía máy khách hoặc xác thực HTTP, trừ khi điểm đến là cùng origin. use-credentials-
Yêu cầu sử dụng tiêu đề CORS, cờ thông tin xác thực được đặt thành
'include'và thông tin xác thực người dùng luôn được bao gồm. ""-
Đặt tên thuộc tính thành giá trị rỗng, như
crossoriginhoặccrossorigin="", giống vớianonymous.
Từ khóa không hợp lệ và chuỗi rỗng sẽ được xử lý như từ khóa anonymous.
Theo mặc định (tức là khi thuộc tính không được chỉ định), CORS hoàn toàn không được sử dụng. User agent sẽ không yêu cầu quyền truy cập đầy đủ vào tài nguyên và trong trường hợp yêu cầu cross-origin, một số hạn chế nhất định sẽ được áp dụng dựa trên loại phần tử liên quan:
| Phần tử | Hạn chế |
img, audio, video |
Khi tài nguyên được đặt trong <canvas>, phần tử được đánh dấu là bị nhiễm.
|
script |
Quyền truy cập vào ghi lỗi qua window.onerror sẽ bị giới hạn.
|
link |
Yêu cầu không có tiêu đề crossorigin phù hợp có thể bị loại bỏ.
|
Note:
Thuộc tính crossorigin không được hỗ trợ cho rel="icon" trong các trình duyệt dựa trên Chromium. Xem vấn đề Chromium đang mở.
Ví dụ
crossorigin với phần tử <script>
Bạn có thể sử dụng phần tử <script> sau đây để yêu cầu trình duyệt thực thi script https://example.com/example-framework.js mà không gửi thông tin xác thực người dùng.
<script
src="https://example.com/example-framework.js"
crossorigin="anonymous"></script>
Web manifest với thông tin xác thực
Giá trị use-credentials phải được sử dụng khi tải manifest yêu cầu thông tin xác thực, ngay cả khi tệp từ cùng origin.
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
Thông số kỹ thuật
| Specification |
|---|
| HTML # cors-settings-attributes |