Đảm bảo trang web "tách biệt nhiều nguồn gốc" bằng COOP và COEP

Sử dụng COOP và COEP để thiết lập một 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ộ tính giờ có độ phân giải cao với độ chính xác cao hơn.

Eiji Kitamura

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 chú ý khi tách biệt nhiều nguồn gốc đã được bật. Đã 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ách biệt nhiều nguồn gốc, nhưng phản ánh những thay đổi gần đây của chỉ đường, nó đã 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 SharedArrayBuffer trong các trang web không tách biệt nhiều nguồn gốc bị hạn chế trong Chrome M92.
• Ngày 16 tháng 4 năm 2021: Thêm ghi chú về việc không sử dụng thông tin xác thực COEP mới chế độ và COOP cùng nguồn gốc-cho phép-bật-lên để thư giãn điều kiện cho nhiều nguồn gốc tách biệt.
• Ngày 5 tháng 3 năm 2021: Loại bỏ các giới hạn đối với SharedArrayBuffer, performance.measureUserAgentSpecificMemory() và các chức năng gỡ lỗi, 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 có, performance.now() và performance.timeOrigin, sẽ có mức độ ảnh hưởng cao hơn độ chính xác.
• Ngày 19 tháng 2 năm 2021: Thêm ghi chú về chính sách đối với 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. Phản ánh rằng document.domain là không thể thay đổi khi self.crossOriginIsolated trả 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ó trong Chrome 88.

Một số API web làm tăng nguy cơ bị tấn công kênh bê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à 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:

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 sẽ cho phép giao tiếp giữa các tài liệu cùng trang web và bị coi là một lỗ hổng trong cùng nguồn gốc.)

Để chọn sử dụng một trạng thái tách biệt nhiều nguồn gốc, bạn cần gửi thông tin sau Tiêu đề HTTP 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 mà chưa được chọn tải bằng các tài liệu nhiều nguồn gốc, đồng thời ngăn cửa sổ có nhiều nguồn gốc tương tác trực tiếp với tài liệu. Việc này cũng tức là những tài nguyên được tải trên nhiều 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 đang 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 cuộc trò chuyện tiếp theo bài viết Tôi sẽ cung cấp thêm thông tin cơ bản và ngữ cảnh.

Triển khai COOP và COEP để tách biệt 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

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 điểm gốc và các cửa sổ đã mở từ tài liệu, sẽ có chế độ duyệt web riêng nhóm bối cảnh trừ phi chúng có cùng nguồn gốc và có cùng chế độ cài đặt COOP. Do đó, sự tách biệt được thực thi đối với các cửa sổ mở và quá trình giao tiếp lẫn nhau giữa cả hai cửa sổ đều bị tắt.

Nhóm ngữ 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. Cho ví dụ: tài liệu cấp cao nhất và các tài liệu con được nhúng qua <iframe>. Nếu trang web (https://a.example) mở cửa sổ bật lên (https://b.example), cửa sổ mở và cửa sổ bật lên có cùng ngữ cảnh duyệt web, do đó chúng có quyền truy cập với 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ó đang duyệt web riêng biệt không nhóm ngữ cảnh trong Công cụ cho nhà phát triển.

2. Đảm bảo các tài nguyên đã bật CORP hoặc CORS

Đảm bảo rằng tất cả tài nguyên trên trang đều được tải bằng 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 bản 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 trang web 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 thuộc quyền kiểm soát của bạn, hãy đặt giá trị 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 đang tải nếu tài nguyên đang được phân phát bằng CORS. (Ví dụ: <img src="***" crossorigin>.)
  • Yêu cầu chủ sở hữu của tài nguyên hỗ trợ CORS hoặc CORP.
• Đối với iframe, hãy thực hiện theo các nguyên tắc tương tự ở trên và đặt Cross-Origin-Resource-Policy: cross-origin (hoặc same-site, same-origin tuỳ thuộc vào ngữ cảnh).
• Những tập lệnh được tải bằng WebWorker phải được phân phát từ cùng nguồn gốc, do đó, bạn không cần tiêu đề CORP hoặc CORS.
• Đối với một tài liệu hoặc một worker được cung cấp bằng COEP: require-corp, có nhiều nguồn gốc các tài nguyên phụ được tải mà không có CORS phải đặt tiêu đề Cross-Origin-Resource-Policy: cross-origin thành chọn 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 Chỉ để báo cáo COEP để đá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ử nghiệm bằng cách sử dụng Tiêu đề Cross-Origin-Embedder-Policy-Report-Only để kiểm tra xem chính sách thực sự hiệu quả. Bạn sẽ nhận được báo cáo mà không chặn nội dung được nhúng.

Áp dụng định kỳ 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 trình chạy. Để biết thông tin về tiêu đề HTTP Chỉ báo cáo, hãy xem Quan sát các vấn đề bằng cách sử dụng 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 tốt và mọi tài nguyên đều có thể đã tải thành công, hãy chuyển đổi Cross-Origin-Embedder-Policy-Report-Only tiêu đề vào tiêu đề Cross-Origin-Embedder-Policy có cùng giá trị với tất cả bao gồm các tài liệu được nhúng qua iframe và tập lệnh trình chạy.

Xác định xem việc tách biệt có thành công bằng self.crossOriginIsolated hay không

Thuộc tính self.crossOriginIsolated trả về true khi trang web ở trong một trạng thái tách biệt nhiều nguồn gốc, đồng thời tất cả tài nguyên và cửa sổ đều được tách biệt 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 mình đã tách 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().

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 như hình ảnh, công cụ này khá dễ để phát hiện các vấn đề 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 các tài nguyên không nhất thiết phải có tác động trực quan (chẳng hạn như kịch bản hoặc phong cách), các vấn đề COEP có thể mà không bị phát hiện. Đối với những giải pháp đó, hãy sử dụng bảng điều khiển Mạng Công cụ cho nhà phát triển. Nếu đã xảy ra vấn đề với COEP, bạn sẽ thấy (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) trong phần Trạng thái .

Sau đó, bạn có thể nhấp vào mục đó để xem thêm 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 Application (Ứng dụng). Chuyển đến phần "Khung" ở phía bên trái mở rộng "trên cùng" để xem phân tích 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à hơn thế nữa

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ổ bật lên có phải là trên nhiều nguồn gốc hay không bị tách biệt.

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 của người dùng trình duyệt để 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 riêng một cửa sổ bật lên. Chrome đã hỗ trợ API Báo cáo kể từ khi 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 hãy chuyển đến phần Sử dụng tính năng Báo cáo .

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

Ví dụ: COEP báo cáo khi tài nguyên trê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ề hàm COOP báo cáo tải trọng khi cửa sổ bật lên được mở tách 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 theo bối cảnh duyệt web khác nhau cố gắng truy cập vào nhau (chỉ bật "chỉ báo cáo" ), COOP cũng sẽ gửi báo cáo. Ví dụ: báo cáo khi postMessage() được thử 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 tiêu đề HTTP COOP và COEP để chọn một trang web tham gia vào trạng thái tách biệt nhiều nguồn gốc. Bạn sẽ có thể kiểm tra self.crossOriginIsolated để xác định xem một trang web có phải là nhiều nguồn gốc hay không trạng thái tách biệt.

Chúng tôi sẽ cập nhật bài đăng này khi các tính năng mới ra mắt trạng thái tách biệt nhiều nguồn gốc, đồng thời cải tiến hơn nữa cho Công cụ cho nhà phát triển về COOP và COEP.

Tài nguyên

• Lý do bạn cần đến tính năng "được 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
• Nội dung cập nhật về SharedArrayBuffer trong Android Chrome 88 và Chrome dành cho máy tính 92
• Theo dõi tổng mức sử dụng bộ nhớ trên trang web của bạn bằng measureUserAgentSpecificMemory()