Sử dụng COOP và COEP để thiết lập một môi trường biệt lập trên nhiều nguồn gốc và bật các tính năng mạnh mẽ như SharedArrayBuffer, performance.measureUserAgentSpecificMemory() và bộ hẹn giờ có độ phân giải cao với độ chính xác cao hơn.
Thông tin cập nhật
- Ngày 21 tháng 6 năm 2022: Bạn cũng cần chú ý đến tập lệnh worker khi bật chế độ cách ly nhiều nguồn. Đã thêm một số nội dung giải thích.
- Ngày 5 tháng 8 năm 2021: JS Self-Profiling API được đề cập là một trong những API yêu cầu tính năng cách ly nhiều nguồn gốc, nhưng phản ánh thay đổi gần đây về hướng, API này đã bị xoá.
- 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
SharedArrayBuffertrong các trang web không tách biệt nhiều nguồn gốc để hạn chế trong Chrome M92. - Ngày 16 tháng 4 năm 2021: Thêm ghi chú về một chế độ mới không có thông tin xác thực COEP và COOP same-origin-allow-popups là một điều kiện thoải mái để cách ly nhiều nguồn gốc.
- Ngày 5 tháng 3 năm 2021: Xoá các hạn chế đối với
SharedArrayBuffer,performance.measureUserAgentSpecificMemory()và các chức năng gỡ lỗi. Hiện tại, các chức năng này đã được bật hoàn toàn trong Chrome 89. Đã thêm các chức năng sắp ra mắt,performance.now()vàperformance.timeOrigin, sẽ có độ chính xác cao hơn. - Ngày 19 tháng 2 năm 2021: Thêm một lưu ý 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ó trong Chrome 87. Theo đó,document.domainlà bất biến khiself.crossOriginIsolatedtrả vềtrue.performance.measureUserAgentSpecificMemory()đang kết thúc giai đoạn dùng thử ban đầu và được bật theo mặc định trong Chrome 89. Shared Array Buffer trên Chrome dành cho Android sẽ có từ Chrome 88.
Một số API web làm tăng nguy cơ xảy ra các cuộc tấn công qua kênh phụ như Spectre. Để giảm thiểu rủi ro đó, các 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 tham gia, được gọi là môi trường tách biệt nhiều nguồn gốc. Với trạng thái bị cô lập trên nhiều nguồn gốc, trang web sẽ có thể sử dụng các tính năng đặc quyền, bao gồm:
| API | Mô tả |
|---|---|
SharedArrayBuffer
|
Bắt buộc đối với các luồng WebAssembly. Tính năng này có trên Chrome 88 dành cho Android. Phiên bản dành cho máy tính hiện được bật theo mặc định nhờ tính năng Tách biệt trang web, nhưng sẽ yêu cầu trạng thái 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ó từ Chrome 89. |
performance.now(), performance.timeOrigin
|
Hiện có trên nhiều trình duyệt với độ phân giải giới hạn ở mức 100 micro giây trở lên. Với tính năng cách ly nhiều nguồn gốc, độ phân giải có thể từ 5 micro 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. (Khả năng thay đổi document.domain cho phép giao tiếp giữa các tài liệu trên cùng một trang web và được coi là một kẽ hở trong chính sách yêu cầu các trang web phải có 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 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 và ngăn các cửa sổ trên nhiều nguồn 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 đang được tải trên nhiều nguồn gốc cần có sự đồng ý.
Bạn có thể xác định xem một trang web có ở 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 hướng dẫn cách sử dụng các tiêu đề mới này. Trong một 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 để cách ly trang web của bạn trên nhiều nguồn gốc
Tích hợp COOP và COEP
1. Đặt tiêu đề Cross-Origin-Opener-Policy: same-origin trên tài liệu cấp cao nhất
Bằng cách 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 bối cảnh duyệt web riêng, trừ phi chúng có cùng nguồn gốc với cùng chế độ cài đặt COOP.
Do đó, chế độ cách ly được thực thi cho các cửa sổ đã mở và chế độ giao tiếp lẫn nhau giữa cả hai cửa sổ đều bị vô hiệu hoá.
Nhóm 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ụ: một tài liệu cấp cao nhất và các tài liệu con được nhúng thông qua <iframe>.
Nếu một trang web (https://a.example) mở một cửa sổ bật lên (https://b.example), thì cửa sổ mở và cửa sổ bật lên sẽ dùng chung một bối cảnh duyệt web. Do đó, chúng có quyền truy cập vào nhau thông qua các API DOM như window.opener.
Bạn có thể kiểm tra xem trình mở cửa sổ và cửa sổ được mở có nằm trong các nhóm bối cảnh duyệt web riêng biệt hay không từ Công cụ cho nhà phát triển.
2. Đảm bảo tài nguyên đã bật CORP hoặc CORS
Đảm bảo rằng tất cả tài nguyên trong trang đều được tải bằng tiêu đề HTTP CORP hoặc CORS. Bạn phải thực hiện bước này để bật COEP (bước 4).
Sau đây là những việc bạn cần làm, tuỳ thuộc vào bản chất của tài nguyên:
- Nếu tài nguyên dự kiến chỉ được tải 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 chỉ được tải từ cùng một trang web nhưng có nguồn gốc chéo, hãy đặt tiêu đề
Cross-Origin-Resource-Policy: same-site. - Nếu tài nguyên được tải từ(các) nguồn chéo mà bạn kiểm soát, hãy đặt tiêu đề
Cross-Origin-Resource-Policy: cross-originnếu có thể. - Đối với các tài nguyên trên nhiều nguồn mà bạn không kiểm soát được:
- Sử dụng thuộc tính
crossorigintrong thẻ HTML 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). - Các tập lệnh được tải bằng
WebWorkerphải được phân phát từ cùng một nguồn, vì vậy bạn không cần 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 được nhúng. Ví dụ: điều này áp dụng cho<script>,importScripts,<link>,<video>,<iframe>, v.v.
3. Sử dụng tiêu đề HTTP COEP Report-Only để đá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 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 được nhúng.
Áp dụng đệ quy cho tất cả tài liệu, bao gồm cả tài liệu cấp cao nhất, iframe và tập lệnh worker. Để biết thông tin về tiêu đề HTTP Report-Only, hãy xem bài viết Theo dõi các vấn đề bằng Reporting API.
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ể được 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ị cho tất cả tài liệu, bao gồm cả những tài liệu được nhúng thông qua iframe và tập lệnh worker.
Xác định xem quá trình tách biệt 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 biệt lập trên nhiều nguồn và tất cả tài nguyên cũng như cửa sổ đều được cách ly trong cùng một nhóm bối cảnh duyệt web. Bạn có thể sử dụng API này để xác định xem bạn đã phân lập thành công nhóm ngữ cảnh duyệt web và 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 những tài nguyên được kết xuất trên màn hình (chẳng hạn như hình ảnh), bạn có thể dễ dàng phát hiện các vấn đề về COEP vì yêu cầu sẽ bị chặn và trang sẽ cho biết hình ảnh bị thiếu. Tuy nhiên, đối với những tài nguyên không nhất thiết phải có tác động trực quan (chẳng hạn như tập lệnh hoặc kiểu), bạn có thể không nhận thấy các vấn đề về COEP. Đối với những trường hợp đó, hãy sử dụng bảng điều khiển Mạng của Công cụ dành cho nhà phát triển. Nếu có vấn đề với COEP, bạn sẽ thấy (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) trong cột 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 Ứng dụng. Chuyển đến phần "Frames" (Khung) ở bên trái rồi mở rộng "top" (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ư trạng thái có sẵn 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ị cô lập trên nhiều nguồn gốc hay không.
Theo dõi các vấn đề bằng Reporting API
Reporting API là một cơ chế khác giúp bạn phát hiện nhiều vấn đề. Bạn có thể định cấu hình Reporting API để 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 việc tải một tài nguyên hoặc COOP cô lập một cửa sổ bật lên. Chrome đã hỗ trợ Reporting API 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 Reporting API và thiết lập một máy chủ để nhận báo cáo, hãy truy cập vào phần Sử dụng Reporting API.
Ví dụ về báo cáo COEP
Sau đây là ví dụ về tải trọng báo cáo COEP khi tài nguyên trên nhiều nguồn gốc bị chặn:
[{
"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 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 các nhóm bối cảnh duyệt web khác nhau cố gắng truy cập vào nhau (chỉ ở chế độ "report-only"), COOP cũng sẽ gửi một báo cáo. Ví dụ: báo cáo khi postMessage() bị xâm nhập 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 vào trạng thái đặc biệt biệt lập trên nhiều nguồn. Bạn sẽ có thể kiểm tra self.crossOriginIsolated để xác định xem một trang web có ở trạng thái bị cô lập trên 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 bị cô lập trên nhiều nguồn này và những điểm cải tiến khác được thực hiện đối với Công cụ cho nhà phát triển liên quan đến COOP và COEP.
Tài nguyên
- Lý do bạn cần "được tách biệt trên nhiều nguồn gốc" cho 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
- Các bản cập nhật SharedArrayBuffer trong Chrome 88 trên Android và Chrome 92 trên máy tính
- Theo dõi tổng mức sử dụng bộ nhớ của trang web bằng
measureUserAgentSpecificMemory()