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 đó sao cho phù hợp.

Eiji Kitamura

Chúng tôi đã phát hành giá trị Chính sách trình nhúng trên nhiều nguồn gốc (COEP) mới là credentialless. Giá trị này 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 tài nguyên trên nhiều nguồn gốc (CORP) bằng cách gửi yêu cầu không có thông tin xác thực, chẳng hạn như cookie. Điều này giúp nhà phát triển dễ dàng áp dụng tính năng tách biệt nhiều nguồn gốc hơn.

Lý do chúng ta 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). Để giảm thiểu rủi ro đó, trình duyệt cung cấp một môi trường tách biệt dựa trên lựa chọn sử dụng có tên là tách biệt nhiều nguồn gốc. Với trạng thái tách biệt nhiều nguồn gốc, trang web có thể sử dụng các tính năng đặc quyền bao gồm SharedArrayBuffer, performance.measureUserAgentSpecificMemory() và các bộ hẹn giờ có độ chính xác cao với độ phân giải tốt hơn trong khi tách biệt nguồn gốc với các nguồn gốc khác, trừ phi người dùng chọn sử dụng.

Trang web phải gửi hai 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 giữa các nguồn gốc, tất cả tài nguyên nhiều nguồn gốc 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 trang web tính bảo mật tốt hơn và khả năng bật các tính năng mạnh mẽ, nhưng việc triển khai tính năng này có thể khó. Một trong những thách thức lớn nhất là yêu cầu bật CORS hoặc CORP cho tất cả tài nguyên trên nhiều nguồn gốc. 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 tách biệt nhiều nguồn gốc.

Các tài nguyên đa nguồn gốc này thường do bên thứ ba phân phát và họ có thể 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 để tải thì sao? Trên thực tế, tài nguyên duy nhất có nguy cơ là những tài nguyên được yêu cầu bằng thông tin xác thực, vì các tài nguyên này có thể chứa thông tin nhạy cảm mà kẻ tấn công không thể tự tải. Điều này có nghĩa là các 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 cung cấp công khai và an toàn để tải.

credentialless giải cứu

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

Bạn 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ủ đa nguồn gốc được yêu cầu sẽ không thể phản hồi bằng một tài nguyên nhạy cảm và người yêu cầu luôn có thể giả định rằng phản hồi chỉ chứa thông tin có sẵn công khai.

Điều này cũng phù hợp với kế hoạch của các trình duyệt về việc ngừng hỗ trợ 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 yêu cầu có thông tin xác thực trong môi trường credentialless không?

Chắc chắn rồi, với chi phí chuyển đổ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>, bạn chỉ cần thêm crossorigin="use-credentials" một cách rõ ràng để thông báo cho 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"> vẫn sẽ gửi một yêu cầu có thông tin xác thực.

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

Khi đã có 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 phải chuyển đổi chế độ yêu cầu sang CORS theo cách thủ công 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át bằng 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". Điều này sẽ cho phép tải các iframe có nguồn gốc khác mà không cần tiêu đề nhưng không cần 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

Chúng tôi sẽ cung cấp thêm hai bản cập nhật để giảm thiểu các thách thức khác liên quan đến tính năng 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 để kéo dài thay đổi về SharedArrayBuffer do các trở ngại nêu trên có thể thắc mắc về thời điểm bản dùng thử này kết thúc. Ban đầu chúng tôi thông báo rằng tính năng này sẽ bị chấm dứt trong Chrome 96, nhưng chúng tôi đã quyết định trì hoãn chuyển sang Chrome 106.

Tài nguyên

Ảnh của Martin Adams trên Unsplash