Tại sao bạn cần tính năng "tách biệt nhiều nguồn gốc" để có được các tính năng mạnh mẽ

Tìm hiểu lý do cần phải tách biệt nhiều nguồn gốc để sử dụng 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.

Giới thiệu

Trong mục Tạo trang web "tách biệt nhiều nguồn gốc" bằng cách sử dụng COOP và COEP mà chúng tôi đã giải thích cách áp dụng chính sách "nhiều nguồn gốc" tách biệt" bằng cách sử dụng COOP và COEP. Đây là một bài viết đi kèm giải thích tại sao cần phải có chế độ tách biệt nhiều nguồn gốc để bật các tính năng mạnh mẽ trên trình duyệt.

Thông tin khái quát

Web được xây dựng trên cùng một nguồn gốc chính sách: một tính năng bảo mật giúp hạn chế cách tài liệu và tập lệnh có thể tương tác với tài nguyên từ một nguồn khác. Chiến dịch này hạn chế cách các trang web có thể truy cập vào tài nguyên nhiều nguồn gốc. Cho ví dụ: một tài liệu trong https://a.example bị chặn truy cập vào dữ liệu được lưu trữ tại https://b.example.

Tuy nhiên, chính sách cùng nguồn gốc đã có một số trường hợp ngoại lệ trước đây. Mọi trang web đều có thể:

  • Nhúng iframe trên nhiều nguồn gốc
  • Thêm các tài nguyên trên nhiều nguồn gốc như hình ảnh hoặc tập lệnh
  • Mở cửa sổ bật lên trên nhiều nguồn gốc có thông tin tham chiếu DOM

Nếu có thể thiết kế web từ đầu thì những ngoại lệ này sẽ không tồn tại. Thật không may, vào thời điểm cộng đồng web nhận ra những lợi ích chính của việc chính sách cùng nguồn gốc nghiêm ngặt nên trang web vốn đã dựa vào những ngoại lệ này.

Những tác dụng phụ về mặt bảo mật của chính sách cùng nguồn gốc lỏng lẻo như vậy đã được vá thành hai nhiều cách. Một cách là thông qua việc giới thiệu một giao thức mới có tên là Cross Chia sẻ tài nguyên gốc (CORS) mục đích của chúng là đảm bảo rằng máy chủ cho phép chia sẻ tài nguyên với nguồn gốc nhất định. Cách thứ hai là ngầm xoá quyền truy cập của tập lệnh trực tiếp vào trên nhiều nguồn gốc mà vẫn duy trì khả năng tương thích ngược. Chẳng hạn các tài nguyên trên nhiều nguồn gốc được gọi là "không rõ ràng" của chúng tôi. Ví dụ: đây là lý do thao tác với pixel của hình ảnh có nhiều nguồn gốc thông qua CanvasRenderingContext2D không thành công trừ khi CORS được áp dụng cho hình ảnh.

Tất cả những quyết định về chính sách này đều diễn ra trong một nhóm ngữ cảnh duyệt web.

Nhóm bối cảnh duyệt web

Trong một thời gian dài, sự kết hợp giữa CORS và tài nguyên mờ đã đủ để khiến cho trình duyệt. Đôi khi có các trường hợp phức tạp (chẳng hạn như JSON) lỗ hổng bảo mật) được phát hiện và cần được vá, nhưng nhìn chung, nguyên tắc không cho phép truy cập đọc trực tiếp vào các byte thô của các tài nguyên trên nhiều nguồn gốc là thành công.

Tất cả điều này đã thay đổi với Spectre, vốn là tạo mọi dữ liệu được tải vào cùng nhóm ngữ cảnh duyệt web với mã của bạn có thể đọc được. Bằng cách đo lường thời gian một số hoạt động cụ thể diễn ra, kẻ tấn công có thể đoán nội dung của bộ nhớ đệm CPU và thông qua đó, nội dung của tiến trình bộ nhớ. Những cuộc tấn công định thời như vậy có thể xảy ra nhờ bộ tính giờ có độ chi tiết thấp đã có trên nền tảng, nhưng có thể được đẩy nhanh bằng bộ tính giờ chi tiết, cả tường minh (như performance.now()) và ngầm ẩn (như SharedArrayBuffer). Nếu evil.com nhúng một hình ảnh trên nhiều nguồn gốc, thì chúng có thể sử dụng Tấn công bằng Spectre để đọc dữ liệu pixel, khiến các biện pháp bảo vệ phải dựa vào "độ mờ" không hiệu quả.

Hiệu ứng quét

Tốt nhất là tất cả các yêu cầu từ nhiều nguồn gốc đều phải được máy chủ xem xét rõ ràng sở hữu tài nguyên đó. Nếu tính năng rà soát không được cung cấp bởi máy chủ sở hữu tài nguyên thì dữ liệu sẽ không bao giờ xuất hiện trong trình duyệt nhóm bối cảnh của một kẻ ác ý, và do đó sẽ tránh khỏi bất kỳ Bóng ma nào tấn công nào đó mà một trang web có thể thực hiện. Chúng tôi gọi đó là trạng thái tách biệt nhiều nguồn gốc. Đây chính xác là mục tiêu của COOP+COEP.

Khi ở trạng thái tách biệt nhiều nguồn gốc, trang web yêu cầu sẽ được xem là ít hơn nguy hiểm và điều này mở ra các tính năng mạnh mẽ như SharedArrayBuffer, performance.measureUserAgentSpecificMemory()độ phân giải cao đồng hồ hẹn giờ có độ chính xác cao hơn, nhờ đó có thể nếu không thì sẽ được dùng cho các cuộc tấn công giống như Bóng ma. Việc sửa đổi cũng không cho phép sửa đổi document.domain.

Chính sách về trình nhúng trên nhiều nguồn gốc

Trình nhúng nhiều nguồn gốc Chính sách (COEP) ngăn chặn tài liệu tải bất kỳ tài nguyên trên nhiều nguồn gốc nào không cấp quyền rõ ràng quyền đối với tài liệu (sử dụng CORP hoặc CORS). Với tính năng này, bạn có thể khai báo để một tài liệu không thể tải các tài nguyên đó.

Cách hoạt động của COEP

Để kích hoạt chính sách này, hãy thêm tiêu đề HTTP sau đây vào tài liệu:

Cross-Origin-Embedder-Policy: require-corp

Từ khoá require-corp là giá trị duy nhất được chấp nhận cho COEP. Việc này khiến chính sách quy định rằng tài liệu chỉ có thể tải các tài nguyên từ cùng một nguồn gốc, hoặc các tài nguyên được đánh dấu rõ ràng là có thể tải từ một nguồn khác.

Để có thể tải từ một nguồn gốc khác, các tài nguyên này cần hỗ trợ Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) hoặc Chính sách về tài nguyên trên nhiều nguồn gốc (CORP).

Chia sẻ tài nguyên trên nhiều nguồn gốc

Nếu một tài nguyên trên nhiều nguồn gốc hỗ trợ tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS), thì bạn có thể sử dụng crossorigin thuộc tính để tải tệp lên trang web của bạn mà không bị COEP chặn.

<img src="https://third-party.example.com/image.jpg" crossorigin>

Ví dụ: nếu tài nguyên hình ảnh này được phân phát với tiêu đề CORS, hãy sử dụng crossorigin để yêu cầu tìm nạp tài nguyên dùng CORS chế độ. Việc này cũng ngăn việc tải hình ảnh trừ phi đặt tiêu đề CORS.

Tương tự, bạn có thể tìm nạp dữ liệu trên nhiều nguồn gốc thông qua phương thức fetch(). Phương thức này không yêu cầu xử lý đặc biệt miễn là máy chủ phản hồi bằng quyền HTTP tiêu đề.

Chính sách về tài nguyên trên nhiều nguồn gốc

Chính sách về tài nguyên trên nhiều nguồn gốc (CORP) ban đầu được giới thiệu là chọn sử dụng để bảo vệ tài nguyên của bạn không bị do một nguồn gốc khác tải. Trong bối cảnh COEP, CORP có thể chỉ định tài nguyên chính sách của chủ sở hữu về người có thể tải tài nguyên.

Tiêu đề Cross-Origin-Resource-Policy có thể nhận 3 giá trị:

Cross-Origin-Resource-Policy: same-site

Bạn chỉ có thể tải các tài nguyên được đánh dấu là same-site qua cùng một trang web.

Cross-Origin-Resource-Policy: same-origin

Bạn chỉ có thể tải các tài nguyên được đánh dấu là same-origin qua cùng một nguồn gốc.

Cross-Origin-Resource-Policy: cross-origin

Bất kỳ trang web nào cũng có thể tải các tài nguyên được đánh dấu là cross-origin. (Điều này đã được thêm vào thông số kỹ thuật CORP cùng với COEP.)

Chính sách về trình mở trên nhiều nguồn gốc

Chính sách về trình mở nhiều nguồn gốc (COOP) giúp bạn đảm bảo cửa sổ cấp cao nhất tách biệt với các tài liệu khác bằng cách đặt chúng trong một nhóm ngữ cảnh duyệt web khác nhau, do đó họ không thể tương tác trực tiếp với cửa sổ cấp cao nhất. Ví dụ: nếu một tài liệu có COOP mở cửa sổ bật lên, Tài sản window.opener sẽ là null. Ngoài ra, thuộc tính .closed của tham chiếu đến hàm mở sẽ trả về true.

COOP

Tiêu đề Cross-Origin-Opener-Policy có thể nhận 3 giá trị:

Cross-Origin-Opener-Policy: same-origin

Những tài liệu được đánh dấu là same-origin có thể có cùng bối cảnh duyệt web nhóm có tài liệu cùng nguồn gốc cũng được đánh dấu rõ ràng là same-origin.

COOP

Cross-Origin-Opener-Policy: same-origin-allow-popups

Tài liệu cấp cao nhất có same-origin-allow-popups giữ lại các tệp tham chiếu đến mọi cửa sổ bật lên không đặt COOP hoặc chọn không tách biệt bằng cách thiết lập COOP là unsafe-none.

COOP

Cross-Origin-Opener-Policy: unsafe-none

unsafe-none là giá trị mặc định và cho phép thêm tài liệu vào nhóm bối cảnh duyệt xem, trừ phi trình mở có một COOP là same-origin.

Tóm tắt

Nếu bạn muốn đảm bảo có quyền truy cập vào các tính năng mạnh mẽ như SharedArrayBuffer, performance.measureUserAgentSpecificMemory() hoặc độ phân giải cao đồng hồ hẹn giờ có độ chính xác cao hơn, hãy nhớ rằng rằng tài liệu của bạn cần sử dụng cả COEP với giá trị require-corp và COOP bằng giá trị same-origin. Trong trường hợp không có một trong hai lựa chọn này, trình duyệt sẽ không đảm bảo đủ tách biệt để bật các tính năng mạnh mẽ đó một cách an toàn. Bạn có thể xác định trường hợp của trang bằng cách kiểm tra xem self.crossOriginIsolated sẽ trả về true.

Hãy tìm hiểu các bước triển khai phương thức này trong bài viết Tạo trang web của bạn "nhiều nguồn gốc" tách biệt" bằng cách dùng COOP và COEP.

Tài nguyên