Tương tác bảo mật trong cửa sổ bật lên bằng các thuộc tính hạn chế

Được tách biệt nhiều nguồn gốc và bảo vệ rò rỉ trên nhiều trang web trong khi tương tác với cửa sổ bật lên.

Arthur Hemery
GitHub
Maud Nalpas
Maud Nalpas
X GitHub

Hiện đã có giá trị mới cho Chính sách về trình mở trên nhiều nguồn gốc (COOP): restrict-properties. Tính năng này mang lại các lợi ích bảo mật và giúp bạn dễ dàng áp dụng tính năng phân tách nhiều nguồn gốc hơn, đồng thời cho phép trang web của bạn tương tác với cửa sổ bật lên của bên thứ ba để thanh toán, xác thực hoặc các trường hợp sử dụng khác.

Để bắt đầu thử nghiệm với restrict-properties, hãy tham gia bản dùng thử theo nguyên gốc bắt đầu từ Chrome 116.

Lý do bạn nên sử dụng restrict-properties

restrict-properties có hai trường hợp sử dụng chính:

Ngăn chặn rò rỉ giữa các trang web mà không bị rò rỉ

Theo mặc định, mọi trang web đều có thể mở ứng dụng của bạn trong cửa sổ bật lên và nhận thông tin tham chiếu đến ứng dụng đó.

Các trang web độc hại có thể lợi dụng lợi thế này để thực hiện các cuộc tấn công như rò rỉ dữ liệu trên nhiều trang web. Để giảm thiểu rủi ro này, bạn có thể sử dụng tiêu đề Cross-Origin-Opener-Policy (COOP).

Cho đến nay, bạn chỉ có một số lựa chọn cho Cross-Origin-Opener-Policy. Bạn có thể:

  • Đặt same-origin, để chặn tất cả các lượt tương tác trên nhiều nguồn gốc với cửa sổ bật lên.
  • Đặt same-origin-allow-popups để chặn tất cả các lượt tương tác trên nhiều nguồn gốc mở trang web của bạn trong một cửa sổ bật lên.
  • Đặt unsafe-none để cho phép tất cả các lượt tương tác trên nhiều nguồn gốc với cửa sổ bật lên.

Điều này khiến các trang web cần được mở trong cửa sổ bật lên và tương tác với trình mở không thể thực thi COOP. Đây là những trường hợp sử dụng chính ở bên trái, chẳng hạn như đăng nhập một lần và các khoản thanh toán không được bảo vệ khỏi các sự cố rò rỉ dữ liệu trên nhiều trang web.

Cross-Origin-Opener-Policy: restrict-properties sẽ giải quyết vấn đề này.

Với restrict-properties, bạn không thể sử dụng các thuộc tính có thể dùng để đếm khung hình và các cuộc tấn công khác gây rò rỉ trên nhiều trang web. Tuy nhiên, bạn có thể giao tiếp cơ bản giữa các cửa sổ qua postMessage và closed.

Điều này giúp tăng cường tính bảo mật của trang web trong khi vẫn duy trì các trường hợp sử dụng chính. Ví dụ:

  • Nếu bạn cung cấp dịch vụ trong một cửa sổ bật lên, việc đặt Cross-Origin-Opener-Policy: restrict-properties sẽ giúp bạn bảo vệ mình khỏi một loạt các cuộc tấn công rò rỉ trên nhiều trang web. Bạn vẫn có thể mở tất cả các trang mà bạn có thể mở trước đây.
  • Nếu bạn cần truy cập vào một cửa sổ bật lên trên nhiều nguồn gốc, thì việc đặt Cross-Origin-Opener-Policy: restrict-properties cũng sẽ bảo vệ trang web của bạn khỏi việc tính iframe. Bạn có thể mở cùng một nhóm cửa sổ bật lên mà bạn có thể mở hôm nay.
  • Nếu cả trình mở và trình mở được đặt tiêu đề và các trang là nhiều nguồn gốc, thì tiêu đề sẽ hoạt động tương tự như khi một trong các trang đó đã đặt tiêu đề. Nếu các video này có cùng nguồn gốc, thì bạn sẽ có toàn quyền truy cập.

Tách biệt nhiều nguồn gốc trên trang web

Lý do chúng ta cần tách biệt nhiều nguồn gốc

Một số API web làm tăng nguy cơ bị tấn công kênh bên như Spectre. Để giảm thiểu rủi ro đó, 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 có tên 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 có thể sử dụng các tính năng đặc quyền bao gồm SharedArrayBuffer, performance.measureUserAgentSpecificMemory() và bộ hẹn giờ có độ chính xác cao với độ phân giải tốt hơn, đồng thời tách biệt nguồn gốc với các nguồn gốc khác trừ khi người dùng chọn sử dụng.

Cho đến nay, để sử dụng các API này, bạn phải đặt Cross-Origin-Opener-Policy: same-origin. Tuy nhiên, việc này sẽ làm gián đoạn mọi luồng cửa sổ bật lên trên nhiều nguồn gốc mà bạn có thể cần, chẳng hạn như tính năng đăng nhập một lần và Thanh toán.

Giờ đây, bạn có thể sử dụng Cross-Origin-Opener-Policy: restrict-properties thay vì Cross-Origin-Opener-Policy: same-origin để bật tính năng tách biệt nhiều nguồn gốc. Thay vì cắt đứt mối quan hệ với trình mở, phương thức này chỉ giới hạn mối quan hệ đó ở nhóm giao tiếp tối thiểu của window.postMessage() và window.closed.

Bạn có thể bật tính năng tách biệt nhiều nguồn gốc bằng hai tiêu đề sau:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

hoặc

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

Tìm hiểu thêm về credentialless tại bài viết Tải tài nguyên trên nhiều nguồn gốc mà không cần tiêu đề CORP bằng COEP: credentialless.

Bản minh hoạ

Hãy thử nhiều tuỳ chọn tiêu đề trong bản minh hoạ cách tách biệt nhiều nguồn gốc này.

Thử nghiệm với bản dùng thử theo nguyên gốc

Để thử nghiệm với Cross-Origin-Opener-Policy: restrict-properties, hãy chọn tham gia dùng thử theo nguyên gốc.

Hỗ trợ trình duyệt

Cross-Origin-Opener-Policy: restrict-properties hiện chỉ được hỗ trợ trong Chrome. Các trình duyệt khác tích cực tham gia thảo luận để chuẩn hoá.

Câu hỏi thường gặp

Trang web của tôi cần giao tiếp với các cửa sổ bật lên cùng nguồn gốc, tôi có nên sử dụng COOP: restrict-properties để bật tính năng tách biệt nhiều nguồn gốc không?

Việc đặt COOP: restrict-properties trên cả cửa sổ bật lên và trang chính sẽ không gây ra các hạn chế. Việc chỉ đặt thuộc tính này trên cửa sổ bật lên hoặc chỉ trên trang chính sẽ ngăn mọi quyền truy cập vào các thuộc tính khác ngoài postMessage và closed trên trình mở, ngay cả khi các thuộc tính đó có cùng nguồn gốc.

Tập hợp các thuộc tính được phép có được khắc phục không?

Dựa trên ý kiến phản hồi cho đến nay, có thể window.postMessage và window.closed là đủ cho phần lớn quy trình làm việc, nhưng chúng tôi vẫn đang cân nhắc việc mở rộng cho các tài sản khác. Nếu bạn có một trường hợp sử dụng không thể giải quyết được chỉ bằng postMessage và closed, hãy để lại ý kiến phản hồi trên luồng Ý định để thử nghiệm.

Tài nguyên