"Tách biệt nhiều nguồn gốc" cho trang web của bạn bằng COOP và COEP

Sử dụng COOP và COEP để thiết lập môi trường tách biệt 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.

Eiji Kitamura

Ngày xuất bản: 13 tháng 4 năm 2020, Ngày cập nhật gần đây nhất: 21 tháng 6 năm 2022

Thận trọng: SharedArrayBuffer trên Chrome dành cho máy tính yêu cầu tách biệt nhiều nguồn gốc kể từ Chrome 92. Tìm hiểu thêm tại bài viết Nội dung cập nhật về SharedArrayBuffer.

Tài liệu này trình bày cách sử dụng COOP và COEP. Bạn có thể đọc thêm về lý do vấn đề này quan trọng trong bài viết "Tách biệt nhiều nguồn gốc" cho trang web bằng COOP và COEP.

Một số API web làm tăng nguy cơ xảy ra các cuộc tấn công kênh bên 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 sử dụng, gọi 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 sẽ có thể sử dụng các tính năng đặc quyền, bao gồm:

Các tính năng sẽ có sẵn sau khi tách biệt nhiều nguồn gốc.

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 được bật theo mặc định với sự trợ giúp của tính năng Cô lập 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	Có trong nhiều trình duyệt, với độ phân giải giới hạn ở mức 100 micrô giây trở lên. Khi tách biệt nhiều nguồn gốc, độ phân giải có thể là 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 một trang web và được coi là một lỗ hổng 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 tải tài nguyên hoặc iframe chưa chọn được tải bằng tài liệu khác nguồn gốc, đồng thời ngăn các cửa sổ khác 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 khác nguồn gốc cầ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.

Lưu ý: Tài liệu này dành cho những người muốn chuẩn bị trang web của họ để sử dụng SharedArrayBuffer, luồng WebAssembly, performance.measureUserAgentSpecificMemory() hoặc bộ hẹn giờ có độ phân giải cao với độ chính xác cao hơn theo cách mạnh mẽ hơn trên các nền tảng trình duyệt.

Bảng thuật ngữ

Tài liệu này sử dụng nhiều thuật ngữ có tên và viết tắt tương tự nhau. Để làm rõ, chúng tôi đã tuyển chọn một bảng chú giải thuật ngữ nhỏ:

• COEP: Chính sách đối với trình nhúng khác nguồn gốc
• COOP: Chính sách về trình mở khác nguồn gốc
• CORP: Chính sách tài nguyên trên nhiều nguồn gốc
• CORS: Chia sẻ tài nguyên trên nhiều nguồn gốc
• CORB: Chặn đọc nhiều nguồn gốc

Tách biệt nhiều nguồn gốc cho trang web của bạn

Mẹo: Tìm hiểu các bước thực tế để bật tính năng tách biệt nhiều nguồn gốc.

1. Đặt 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 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 các cửa sổ đó có cùng nguồn gốc và cùng chế độ cài đặt COOP. Do đó, tính năng tách biệt được thực thi cho các cửa sổ đã mở và hoạt động giao tiếp lẫn nhau giữa cả hai cửa sổ đều bị tắt.

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 bằng <iframe>. Nếu một trang web (https://a.example) mở một cửa sổ hộp thoại (https://b.example), thì cửa sổ mở và cửa sổ hộp thoại sẽ có cùng bối cảnh duyệt web, do đó, chúng có quyền truy cập vào nhau bằng các API DOM 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ó nằm trong các nhóm bối cảnh duyệt web riêng biệt từ Công cụ cho nhà phát triển hay không.

2. Bật CORP hoặc CORS trên tài nguyên

Đả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 bốn.

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 khác 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ừ (các) nguồn gốc khác nhau mà bạn kiểm soát, hãy đặt tiêu đề Cross-Origin-Resource-Policy: cross-origin nếu có thể.
• Đối với các 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 crossorigin trong 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.
• Đối với iframe, hãy làm theo các nguyên tắc tương tự và đặt Cross-Origin-Resource-Policy: cross-origin (hoặc same-site, same-origin tuỳ thuộc vào ngữ cảnh).
• Các tập lệnh được tải bằng WebWorker phải được phân phát từ cùng một nguồn gốc, vì vậy, bạn không cần tiêu đề CORP hoặc CORS.
• Đối với tài liệu hoặc trình chạy được phân phát bằng COEP: require-corp, các tài nguyên phụ khác 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.

Thuật ngữ chính: Cùng trang web là các trang web có cùng lược đồ và cùng eTLD+1. Cùng nguồn gốc là những trang web có cùng tổ hợp giao thức, tên máy chủ và cổng. Đọc thêm về sự khác biệt giữa cùng trang web và cùng nguồn gốc.

Cách ly trong iframe

Bạn có thể bật tính năng tách biệt nhiều nguồn gốc trên một tài liệu được nhúng trong một iframe bằng cách áp dụng chính sách về quyền allow="cross-origin-isolated" cho thẻ <iframe> và đáp ứng các điều kiện này. Toàn bộ chuỗi tài liệu, bao gồm cả khung mẹ và khung con, cũng phải được tách biệt nhiều nguồn gốc.

3. Sử dụng tiêu đề HTTP COEP Report-Only để đánh giá 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 chính sách này 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 Quan sát các vấn đề bằng API Báo cáo.

4. Bật COEP

Bạn chỉ có thể thực hiện bước này sau khi đảm bảo rằng các tài nguyên đã bật CORP hoặc CORS.

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ị cho tất cả tài liệu, bao gồm cả những tài liệu được nhúng bằng iframe và tập lệnh worker.

Lưu ý: Squoosh, một PWA tối ưu hoá hình ảnh, sử dụng COOP/COEP để có quyền truy cập vào Luồng Wasm (và Bộ đệm mảng dùng chung) và trên Chrome cho Android.

Thận trọng: Chúng tôi đang tìm hiểu cách triển khai Cross-Origin-Resource-Policy trên quy mô lớn, vì tính năng tách biệt nhiều nguồn gốc yêu cầu tất cả tài nguyên phụ phải chọn sử dụng một cách rõ ràng. Một lựa chọn là chế độ không có thông tin xác thực COEP cho phép tải tài nguyên mà không cần tiêu đề CORP bằng cách xoá tất cả thông tin xác thực của tài nguyên. Chế độ không có thông tin xác thực có trong Chrome 96 và Edge, nhưng chưa được các trình duyệt khác hỗ trợ.

Xác định xem việc tách biệt có thành công hay không

Thuộc tính self.crossOriginIsolated trả về true khi trang web ở trạng thái tách biệt nhiều nguồn gốc và tất cả tài nguyên cũng như cửa sổ đều được tách biệt 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 có tách biệt thành công nhóm bối cảnh duyệt web và có quyền truy cập vào các tính năng như performance.measureUserAgentSpecificMemory() hay không.

Gỡ lỗi vấn đề

Bạn có thể gặp vấn đề với COOP và COEP. Bạn có thể sử dụng công cụ cho nhà phát triển của trình duyệt hoặc API báo cáo để gỡ lỗi.

Gỡ lỗi bằng Chrome DevTools

Đối với các tài nguyên được kết xuất trên màn hình 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 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, thì các vấn đề về COEP có thể không được chú ý. Đối với những yêu cầu đó, hãy sử dụng bảng điều khiển Mạng của Công cụ 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 nhập để 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ổ hộp thoại thông qua bảng điều khiển Application (Ứng dụng). Chuyển đến phần "Frames" (Khung) ở bên trái và 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ư 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ổ hộp thoại, chẳng hạn như liệu cửa sổ đó có bị tách biệt nhiều nguồn gốc hay không.

Quan sát các vấn đề bằng API Báo cáo

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 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 việc tải tài nguyên hoặc COOP tách biệt cửa sổ hộp thoại. 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.

Lưu ý: Bạn đã sử dụng Reporting API với tiêu đề Report-To chưa? Chrome đang chuyển sang phiên bản mới của Reporting API, thay thế Report-To bằng Reporting-Endpoints; hãy cân nhắc việc chuyển sang phiên bản mới. Hãy xem bài viết Di chuyển sang Reporting API phiên bản 1 để biết thông tin chi tiết.

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.

Ví dụ về báo cáo COEP

Dưới đây là ví dụ về tải trọng báo cáo COEP khi tài nguyên khác nguồn gốc bị chặn:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.example.org/check.svg?",
    "blockedURL": "https://third-party-test.example.org/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.example.com/?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"
}]

Thận trọng: blocked-url chỉ tồn tại để tương thích ngược và sẽ bị xoá.

Báo cáo COOP mẫu

Dưới đây là ví dụ về tải trọng báo cáo COOP khi một hộp thoại được mở riêng biệt:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.example.org/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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ế độ "chỉ báo cáo"), COOP cũng sẽ gửi báo cáo. Ví dụ: báo cáo khi có người cố gắng truy cập vào postMessage() 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.example.com/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/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"
}]

Những điểm cần nhớ

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 tách biệt nhiều nguồn gốc đặc biệt. Bạn có thể kiểm tra self.crossOriginIsolated để 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.

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 và các điểm cải tiến khác được thực hiện cho Công cụ cho nhà phát triển xung quanh COOP và COEP.

Tài nguyên

• Lý do bạn cần "tách biệt 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
• Theo dõi tổng mức sử dụng bộ nhớ của trang web bằng measureUserAgentSpecificMemory()

Nội dung cập nhật tài liệu

• Ngày 21 tháng 6 năm 2022: Tập lệnh worker cũng cần được chú ý 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 tài nguyên JS đã được đề cập là một trong những API yêu cầu tách biệt nhiều nguồn gốc, nhưng do thay đổi gần đây về hướng đi, 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 hạn chế việc sử dụng SharedArrayBuffer trong các trang web không tách biệt nhiều nguồn gốc trong Chrome M92.
• Ngày 16 tháng 4 năm 2021: Thêm ghi chú về chế độ không có thông tin xác thực COEP và COOP same-origin-allow-popups để làm điều kiện nới lỏng cho tính năng 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à chức năng gỡ lỗi. Các chức năng này hiện đã đượ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 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.crossOriginIsolated có trong Chrome 87. Do đó, document.domain không thể thay đổi khi self.crossOriginIsolated trả về true. performance.measureUserAgentSpecificMemory() sẽ kết thúc giai đoạ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 Chrome dành cho Android sẽ có từ phiên bản Chrome 88.