Sử dụng COOP và COEP để thiết lập môi trường tách biệt nhiều nguồn gốc, đồng thời cung cấp các tính năng mạnh mẽ như SharedArrayBuffer, performance.measureUserAgentSpecificMemory() và bộ tính giờ có độ phân giải cao với độ chính xác cao hơn.
Bản cập nhật
- Ngày 21 tháng 6 năm 2022: Tập lệnh trình chạy cũng cần cẩn thận khi bật tính năng tách biệt nhiều nguồn gốc. Đã thêm một số nội dung giải thích.
- Ngày 5 tháng 8 năm 2021: API tự phân tích JS được đề cập là một trong những API yêu cầu việc tách biệt nhiều nguồn gốc, nhưng phản ánh sự thay đổi gần đây về hướng, API này đã bị loại bỏ.
- Ngày 6 tháng 5 năm 2021: Dựa trên ý kiến phản hồi và các vấn đề được báo cáo, chúng tôi quyết định điều chỉnh tiến trình sử dụng
SharedArrayBuffertrên các trang web tách biệt nhiều nguồn gốc không bị hạn chế trong Chrome M92. - Ngày 16 tháng 4 năm 2021: Thêm ghi chú về chế độ không cần thông tin xác thực COEP mới và COOP same-origin-allow-pops trở thành một điều kiện thoải mái để tách biệt nhiều nguồn gốc.
- Ngày 5 tháng 3 năm 2021: Xoá các giới hạn đối với
SharedArrayBuffer,performance.measureUserAgentSpecificMemory()và các chức năng gỡ lỗi. Các tính năng này hiện đã được bật đầy đủ trong Chrome 89. Đã thêm các tính năng sắp ra mắt,performance.now()vàperformance.timeOrigin, có độ chính xác cao hơn. - Ngày 19 tháng 2 năm 2021: Thêm ghi chú về chính sách tính năng
allow="cross-origin-isolated"và chức năng gỡ lỗi trên Công cụ cho nhà phát triển. - Ngày 15 tháng 10 năm 2020:
self.crossOriginIsolatedcó trên Chrome 87. Phản ánh điều đó,document.domainlà bất biến khiself.crossOriginIsolatedtrả vềtrue.performance.measureUserAgentSpecificMemory()sẽ kết thúc bản dùng thử theo nguyên gốc và được bật theo mặc định trong Chrome 89. Shared Array Buffer trên Android Chrome sẽ có sẵn trong Chrome 88.
Một số API web làm tăng nguy cơ bị tấn công kênh phụ như Spectre. Để 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 lựa chọn tham gia được gọi là được tách biệt trên 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:
| API | Nội dung mô tả |
|---|---|
SharedArrayBuffer
|
Bắt buộc đối với luồng WebAssembly. Tính năng này đã có trên Android Chrome 88. Phiên bản dành cho máy tính hiện được bật theo mặc định với sự trợ giúp của tính năng Tách biệt trang web, nhưng sẽ yêu cầu trạng thái được tách biệt nhiều nguồn gốc và sẽ bị tắt theo mặc định trong Chrome 92. |
performance.measureUserAgentSpecificMemory()
|
Đã có trên Chrome 89. |
performance.now(), performance.timeOrigin
|
Hiện có trên nhiều trình duyệt có độ phân giải giới hạn ở 100 micrô giây trở lên. Với tính năng tách biệt nhiều nguồn gốc, độ phân giải có thể là từ 5 micrô giây trở lên. |
Trạng thái tách biệt nhiều nguồn gốc cũng ngăn chặn việc sửa đổi document.domain. (Việc có thể thay đổi document.domain cho phép giao tiếp giữa các tài liệu trên cùng trang web và đây được coi là lỗ hổng bảo mật trong chính sách cùng nguồn gốc.)
Để chọn sử dụng trạng thái tách biệt nhiều nguồn gốc, bạn cần gửi các tiêu đề HTTP sau đây trên tài liệu chính:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Các tiêu đề này hướng dẫn trình duyệt chặn việc tải các tài nguyên hoặc iframe chưa chọn tải bằng tài liệu trên nhiều nguồn gốc, đồng thời ngăn các cửa sổ nhiều nguồn gốc tương tác trực tiếp với tài liệu của bạn. Điều này cũng có nghĩa là những tài nguyên được tải trên nhiều nguồn gốc yêu cầu bạn phải chọn sử dụng.
Bạn có thể xác định xem một trang web có đang ở trạng thái tách biệt nhiều nguồn gốc hay không bằng cách kiểm tra self.crossOriginIsolated.
Bài viết này cho biết cách sử dụng các tiêu đề mới này. Trong bài viết tiếp theo, tôi sẽ cung cấp thêm thông tin cơ bản và bối cảnh.
Triển khai COOP và COEP để tách biệt trang web của bạn với nhiều nguồn gốc
Tích hợp COOP và COEP
1. Đặt tiêu đề Cross-Origin-Opener-Policy: same-origin ở tài liệu cấp cao nhất
Khi bật COOP: same-origin trên một tài liệu cấp cao nhất, các cửa sổ có cùng nguồn gốc và các cửa sổ được mở từ tài liệu đó sẽ có một nhóm ngữ cảnh duyệt web riêng biệt, trừ phi các cửa sổ đó có cùng nguồn gốc với cùng chế độ cài đặt COOP.
Do đó, tính năng tách biệt được thực thi đối với các cửa sổ đang mở và hoạt động giao tiếp lẫn nhau giữa cả hai cửa sổ sẽ bị tắt.
Nhóm theo bối cảnh duyệt web là một tập hợp các cửa sổ có thể tham chiếu lẫn nhau. Ví dụ: tài liệu cấp cao nhất và các tài liệu con của tài liệu đó được nhúng qua <iframe>.
Nếu một trang web (https://a.example) mở cửa sổ bật lên (https://b.example), thì cửa sổ mở đó và cửa sổ bật lên có chung ngữ cảnh duyệt web, do đó chúng có thể truy cập lẫn nhau thông qua các API DOM, chẳng hạn như window.opener.
Bạn có thể kiểm tra xem trình mở cửa sổ và trình mở cửa sổ có thuộc các nhóm ngữ cảnh duyệt web riêng biệt từ Công cụ cho nhà phát triển hay không.
2. Đảm bảo tài nguyên đã bật CORP hoặc CORS
Đảm bảo rằng tất cả các tài nguyên trong trang đều được tải bằng tiêu đề CORP hoặc CORS HTTP. Đây là bước bắt buộc cho bước 4 – bật COEP.
Dưới đây là những việc bạn cần làm tuỳ thuộc vào tính chất của tài nguyên:
- Nếu tài nguyên dự kiến sẽ được tải chỉ từ cùng một nguồn gốc, hãy đặt tiêu đề
Cross-Origin-Resource-Policy: same-origin. - Nếu tài nguyên dự kiến sẽ được tải chỉ từ cùng một trang web nhưng trên nhiều nguồn gốc, hãy đặt tiêu đề
Cross-Origin-Resource-Policy: same-site. - Nếu tài nguyên được tải từ nhiều nguồn gốc thuộc quyền kiểm soát của bạn, hãy đặt tiêu đề
Cross-Origin-Resource-Policy: cross-originnếu có thể. - Đối với những tài nguyên trên nhiều nguồn gốc mà bạn không có quyền kiểm soát:
- Sử dụng thuộc tính
crossorigintrong thẻ HTML đang tải nếu tài nguyên được phân phát bằng CORS. (Ví dụ:<img src="***" crossorigin>.) - Yêu cầu chủ sở hữu tài nguyên hỗ trợ CORS hoặc CORP.
- Sử dụng thuộc tính
- Đối với iframe, hãy làm theo các nguyên tắc tương tự ở trên và đặt
Cross-Origin-Resource-Policy: cross-origin(hoặcsame-site,same-origintuỳ thuộc vào ngữ cảnh). - Những tập lệnh được tải bằng
WebWorkerphải được phân phát từ cùng một nguồn gốc, vì vậy, bạn không cần phải có tiêu đề CORP hoặc CORS. - Đối với một tài liệu hoặc worker được phân phát bằng
COEP: require-corp, các tài nguyên phụ nhiều nguồn gốc được tải mà không có CORS phải đặt tiêu đềCross-Origin-Resource-Policy: cross-originđể chọn sử dụng tính năng nhúng. Ví dụ: API này áp dụng cho<script>,importScripts,<link>,<video>,<iframe>, v.v.
3. Sử dụng tiêu đề HTTP Chỉ báo cáo COEP để đánh giá các tài nguyên được nhúng
Trước khi bật hoàn toàn COEP, bạn có thể chạy thử bằng cách sử dụng tiêu đề Cross-Origin-Embedder-Policy-Report-Only để kiểm tra xem chính sách này có thực sự hoạt động hay không. Bạn sẽ nhận được báo cáo mà không chặn nội dung đã nhúng.
Áp dụng định kỳ cho tất cả các tài liệu, bao gồm cả tài liệu cấp cao nhất, iframe và tập lệnh trình chạy. Để biết thông tin về tiêu đề HTTP Chỉ báo cáo, hãy xem phần Quan sát các vấn đề bằng API Báo cáo.
4. Bật COEP
Sau khi bạn xác nhận rằng mọi thứ đều hoạt động và tất cả tài nguyên đều có thể tải thành công, hãy chuyển tiêu đề Cross-Origin-Embedder-Policy-Report-Only sang tiêu đề Cross-Origin-Embedder-Policy có cùng giá trị thành tất cả tài liệu, bao gồm cả những tài liệu được nhúng qua iframe và tập lệnh worker.
Xác định xem việc tách riêng có thành công hay không bằng self.crossOriginIsolated
Thuộc tính self.crossOriginIsolated trả về true khi trang web ở trạng thái được tách biệt nhiều nguồn gốc, đồng thời tất cả tài nguyên và cửa sổ được tách riêng trong cùng một nhóm ngữ cảnh duyệt web. Bạn có thể sử dụng API này để xác định xem bạn đã tách riêng thành công nhóm ngữ cảnh duyệt web và có được quyền truy cập vào các tính năng mạnh mẽ như performance.measureUserAgentSpecificMemory() hay chưa.
Gỡ lỗi bằng Công cụ của Chrome cho nhà phát triển
Đối với các tài nguyên hiển thị trên màn hình, chẳng hạn như hình ảnh, việc phát hiện các vấn đề về COEP khá dễ dàng vì yêu cầu sẽ bị chặn và trang sẽ chỉ báo hình ảnh bị thiếu. Tuy nhiên, đối với các tài nguyên không nhất thiết phải có tác động về hình ảnh, chẳng hạn như tập lệnh hoặc kiểu, các vấn đề về COEP có thể không được chú ý. Đối với những trường hợp đó, hãy sử dụng bảng điều khiển Mạng cho nhà phát triển. Nếu COEP có vấn đề, bạn sẽ thấy (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) trong cột Status (Trạng thái).
Sau đó, bạn có thể nhấp vào mục đó để xem thêm thông tin chi tiết.
Bạn cũng có thể xác định trạng thái của iframe và cửa sổ bật lên thông qua bảng điều khiển Ứng dụng. Chuyển đến phần "Khung" ở bên trái và mở rộng "trên cùng" để xem thông tin chi tiết về cấu trúc tài nguyên.
Bạn có thể kiểm tra trạng thái của iframe, chẳng hạn như khả năng sử dụng của SharedArrayBuffer, v.v.
Bạn cũng có thể kiểm tra trạng thái của cửa sổ bật lên, chẳng hạn như cửa sổ đó có bị tách riêng trên nhiều nguồn gốc hay không.
Quan sát các vấn đề bằng API Báo cáo
API Báo cáo là một cơ chế khác mà thông qua đó bạn có thể phát hiện nhiều vấn đề. Bạn có thể định cấu hình API Báo cáo để hướng dẫn trình duyệt của người dùng gửi báo cáo bất cứ khi nào COEP chặn hoạt động tải tài nguyên hoặc COOP tách biệt một cửa sổ bật lên. Chrome đã hỗ trợ API Báo cáo kể từ phiên bản 69 cho nhiều mục đích sử dụng, bao gồm cả COEP và COOP.
Để tìm hiểu cách định cấu hình API Báo cáo và thiết lập máy chủ để nhận báo cáo, hãy chuyển đến phần Sử dụng API Báo cáo.
Ví dụ về báo cáo COEP
Ví dụ về tải trọng báo cáo COEP khi tài nguyên nhiều nguồn gốc bị chặn sẽ có dạng như sau:
[{
"age": 25101,
"body": {
"blocked-url": "https://third-party-test.glitch.me/check.svg?",
"blockedURL": "https://third-party-test.glitch.me/check.svg?",
"destination": "image",
"disposition": "enforce",
"type": "corp"
},
"type": "coep",
"url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]
Ví dụ về báo cáo COOP
Ví dụ về tải trọng báo cáo COOP khi một cửa sổ bật lên được mở riêng biệt sẽ có dạng như sau:
[{
"age": 7,
"body": {
"disposition": "enforce",
"effectivePolicy": "same-origin",
"nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
"type": "navigation-from-response"
},
"type": "coop",
"url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]
Khi nhiều nhóm ngữ cảnh duyệt web cố gắng truy cập vào nhau (chỉ ở chế độ "chỉ báo cáo"), COOP cũng sẽ gửi báo cáo. Ví dụ: báo cáo khi postMessage() được cố gắng sẽ có dạng như sau:
[{
"age": 51785,
"body": {
"columnNumber": 18,
"disposition": "reporting",
"effectivePolicy": "same-origin",
"lineNumber": 83,
"property": "postMessage",
"sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
"type": "access-from-coop-page-to-openee"
},
"type": "coop",
"url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
"age": 51785,
"body": {
"disposition": "reporting",
"effectivePolicy": "same-origin",
"property": "postMessage",
"type": "access-to-coop-page-from-openee"
},
"type": "coop",
"url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]
Kết luận
Sử dụng kết hợp các tiêu đề HTTP COOP và COEP để chọn một trang web ở trạng thái đặc biệt được tách biệt nhiều nguồn gốc. Bạn có thể kiểm tra self.crossOriginIsolated để xác định xem trang web có đang ở trạng thái tách biệt nhiều nguồn gốc hay không.
Chúng tôi sẽ tiếp tục cập nhật bài đăng này khi các tính năng mới được cung cấp cho trạng thái tách biệt nhiều nguồn gốc này, đồng thời tiếp tục cải tiến Công cụ cho nhà phát triển xoay quanh COOP và COEP.
Tài nguyên
- Lý do bạn cần chế độ "được tách biệt trên nhiều nguồn gốc" để có các tính năng mạnh mẽ
- Hướng dẫn bật tính năng tách biệt nhiều nguồn gốc
- Bản cập nhật SharedArrayBuffer trong Android Chrome 88 và Chrome 92 dành cho máy tính
- Theo dõi tổng mức sử dụng bộ nhớ của trang web bằng
measureUserAgentSpecificMemory()