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.
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ả.
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() và độ 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 đó.
Để 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.
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.
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.
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.