Tải tài nguyên nhiều nguồn gốc mà không có tiêu đề CORP bằng COEP: không có thông tin xác thực

Các tài nguyên trên nhiều nguồn gốc do bên thứ ba phân phát thường không có tiêu đề CORP đầy đủ. Nếu có thể yêu cầu các tệp này mà không cần thông tin xác thực, thì giờ đây, bạn có thể bật tính năng tách biệt nhiều nguồn gốc bằng cách đánh dấu các tệp đó là như vậy.

Eiji Kitamura

Chúng tôi đã vận chuyển giá trị mới của Chính sách về trình nhúng trên nhiều nguồn gốc (COEP) credentialless cho phép trình duyệt tải các tài nguyên trên nhiều nguồn gốc không sử dụng Chính sách về tài nguyên trên nhiều nguồn gốc (CORP) bằng cách gửi yêu cầu mà không có thông tin xác thực, chẳng hạn như cookie. Việc này giúp nhà phát triển áp dụng nhiều nguồn gốc dễ tách biệt hơn.

Lý do cần tách biệt nhiều nguồn gốc

Một số API web làm tăng nguy cơ bị tấn công kênh bên, chẳng hạn như Spectre. Người nhận giảm thiểu rủi ro đó, các trình duyệt sẽ cung cấp một môi trường tách biệt dựa trên chọn tham gia được gọi là cách ly nhiều nguồn gốc. Có nhiều nguồn gốc trạng thái tách biệt, trang web có thể sử dụng các tính năng đặc quyền bao gồm SharedArrayBuffer! performance.measureUserAgentSpecificMemory() và đồng hồ hẹn giờ có độ chính xác cao với độ phân giải cao hơn đồng thời tách biệt nguồn gốc với các nguồn khác trừ phi họ chọn sử dụng.

Trang web phải gửi 2 tiêu đề HTTP để bật tính năng tách biệt nhiều nguồn gốc:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Với trạng thái tách biệt nhiều nguồn gốc, mọi tài nguyên trên nhiều nguồn gốc đều phải được phân phát bằng CORS hoặc đặt tiêu đề Cross-Origin-Resource-Policy để tải.

Những thách thức khi bật tính năng tách biệt nhiều nguồn gốc

Mặc dù tính năng tách biệt nhiều nguồn gốc mang lại cho các trang web mức độ bảo mật cao hơn và khả năng bật các tính năng mạnh mẽ, việc triển khai tính năng đó có thể khó. Một trong những yêu cầu bắt buộc phải bật CORS hoặc CORP cho tất cả các nguồn gốc khác nhau của chúng tôi. Trình duyệt sẽ không tải tài nguyên không có các tiêu đề đó trên một trang được tách biệt nhiều nguồn gốc.

Những tài nguyên trên nhiều nguồn gốc này thường do các bên thứ ba phân phát. không dễ dàng để thêm các tiêu đề cần thiết.

Nhưng nếu chúng ta biết tài nguyên đủ an toàn để được tải thì sao? Trên thực tế, nền tảng duy nhất những tài nguyên đang gặp nguy hiểm là những tài nguyên được yêu cầu kèm thông tin đăng nhập, vì chúng có thể chứa thông tin nhạy cảm mà kẻ tấn công không thể tải trên của bạn. Điều này có nghĩa là những tài nguyên có thể được yêu cầu mà không cần thông tin xác thực sẽ được hiển thị công khai sẵn có và an toàn để tải.

credentialless giải cứu

Đó là lúc COEP: credentialless xuất hiện. credentialless là một giá trị mới cho tiêu đề Cross-Origin-Embedder-Policy. Tương tự như require-corp, phương thức này có thể bật tính năng tách biệt nhiều nguồn gốc, nhưng thay vì yêu cầu CORP:cross-origin cho các yêu cầu không có kết quả nối nguồn gốc, mà thay vào đó, các yêu cầu này sẽ được gửi mà không có thông tin đăng nhập (ví dụ: cookie).

Bạn sẽ có thể bật tính năng tách biệt nhiều nguồn gốc bằng hai tiêu đề sau:

Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin

Điều này có nghĩa là máy chủ nhiều nguồn gốc được yêu cầu sẽ không thể phản hồi bằng tài nguyên nhạy cảm và người yêu cầu luôn có thể giả định rằng chỉ phản hồi chứa thông tin được công bố công khai.

Điều này cũng phù hợp với là loại bỏ cookie của bên thứ ba.

Bản minh hoạ

Bạn có thể thử nhiều tuỳ chọn tiêu đề trong bản minh hoạ này: https://cross-origin-isolation.glitch.me

Câu hỏi thường gặp

Tôi có thể gửi một yêu cầu đã được xác thực trong môi trường credentialless không?

Chắc chắn là bạn phải thay đổi chế độ của yêu cầu để yêu cầu kiểm tra CORS trên phản hồi. Đối với các thẻ HTML như <audio>, <img>, <link>, <script>, và <video>, chỉ cần thêm crossorigin="use-credentials" một cách rõ ràng để thông báo để trình duyệt gửi các yêu cầu đã được xác thực.

Ví dụ: ngay cả khi một tài liệu trên https://www.example.com có Tiêu đề Cross-Origin-Embedder-Policy: credentialless, <img src="https://images.example.com/avatar.png" crossorigin="use-credentials"> sẽ gửi một yêu cầu đã được xác thực.

Đối với API fetch(), bạn có thể dùng request.mode = 'cors'.

Được cung cấp COEP: credentialless, COEP: require-corp vẫn hữu ích như thế nào cho trang web của tôi?

COEP: require-corp không yêu cầu bạn chuyển sang chế độ yêu cầu theo cách thủ công CORS nếu cần cookie cho một số tài nguyên phụ trên nhiều nguồn gốc.

Tôi có thể tải các iframe trên nhiều nguồn gốc mà không cần tiêu đề đặc biệt trong môi trường credentialless không?

Không. Việc tải iframe trên nhiều nguồn gốc trong môi trường credentialless vẫn yêu cầu các điều kiện giống như require-corp. Tài liệu iframe cần được phân phối cùng với hai tiêu đề:

  • Cross-Origin-Embedder-Policy: credentialless (hoặc require-corp)
  • Cross-Origin-Resource-Policy: cross-origin

Tin vui là có một cuộc thảo luận đang diễn ra về việc cho phép tải iframe trên nhiều nguồn gốc mà không cần các tiêu đề đó bằng cách cung cấp iframe crossorigin="anonymous". Thao tác này sẽ cho phép tải các iframe trên nhiều nguồn gốc mà không cần tiêu đề mà không có thông tin xác thực.

Các trình duyệt khác có áp dụng tính năng này không?

Các tính năng sắp ra mắt

Sắp có thêm 2 nội dung cập nhật để giảm thiểu những thách thức khác liên quan đến tách biệt nhiều nguồn gốc:

Những người đã đăng ký bản dùng thử theo nguyên gốc của Chrome để gia hạn thay đổi SharedArrayBuffer do những trở ngại trên có thể hỏi khi nào thì kênh sẽ bị chấm dứt. Ban đầu chúng tôi thông báo rằng ứng dụng này sẽ bị chấm dứt trong Chrome 96 nhưng chúng tôi đã quyết định hoãn bản cập nhật này sang Chrome 106.

Tài nguyên

Nhiếp ảnh gia: Martin Adams về Không hiển thị màn hình