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 trên nhiều nguồn và bảo vệ khỏi 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

Hiện có một giá trị mới cho Cross-Origin Opener Policy (COOP): restrict-properties. Tính năng này mang lại lợi ích về bảo mật và giúp bạn dễ dàng áp dụng cơ chế cách ly nhiều nguồn trong khi 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 cho các trường hợp 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 nên sử dụng restrict-properties

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

Ngăn chặn việc rò rỉ dữ liệu trên nhiều trang web mà không làm gián đoạn

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

Một trang web độc hại có thể lợi dụng điều này để thực hiện các cuộc tấn công như rò rỉ 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, các lựa chọn về Cross-Origin-Opener-Policy vẫn còn hạn chế. Bạn có thể:

  • Đặt same-origin, để chặn tất cả hoạt động tương tác trên nhiều nguồn với cửa sổ bật lên.
  • Đặt same-origin-allow-popups để chặn tất cả hoạt động 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ả hoạt động 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 một cửa sổ bật lên và tương tác với trang mở không thể thực thi COOP. Điều này khiến các trường hợp sử dụng chính như đăng nhập một lần và thanh toán không được bảo vệ khỏi các rò rỉ 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, những thuộc tính có thể dùng để đếm số khung hình và các cuộc tấn công rò rỉ trên nhiều trang web khác sẽ không có sẵn, nhưng bạn được phép giao tiếp cơ bản giữa các cửa sổ thông qua postMessage và closed.

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

  • Nếu bạn cung cấp một dịch vụ trong cửa sổ bật lên, việc đặt Cross-Origin-Opener-Policy: restrict-properties sẽ giúp bạn tự bảo vệ mình khỏi nhiều 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, 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 đếm iframe. Bạn sẽ 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ả cửa sổ mở và cửa sổ được mở đều đặt tiêu đề và các trang là đa nguồn gốc, thì tiêu đề này sẽ hoạt động tương tự như khi một trong hai cửa sổ đã đặt tiêu đề. Nếu chúng có cùng nguồn gốc, thì quyền truy cập đầy đủ sẽ được cấp.

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

Lý do cần có tính năng tách biệt nhiều nguồn gốc

Một số API web làm tăng nguy cơ xảy ra các cuộc tấn công qua kênh phụ 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 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 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 những nguồn gốc khác trừ phi chúng được 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, điều này sẽ làm gián đoạn mọi quy trình 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 chế độ tách biệt nhiều nguồn gốc. Thay vì cắt đứt mối quan hệ với trình mở, nó chỉ hạn chế mối quan hệ này ở mức tối thiểu của tập hợp con giao tiếp window.postMessage() và window.closed.

Bạn có thể bật tính năng cách ly nhiều nguồn gốc bằng 2 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 Tải tài nguyên từ nhiều nguồn mà không có tiêu đề CORP bằng cách sử dụng COEP: credentialless.

Bản minh hoạ

Hãy thử nhiều lựa chọn về tiêu đề trong bản minh hoạ cách ly nhiều nguồn này.

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

Để thử nghiệm Cross-Origin-Opener-Policy: restrict-properties, hãy chọn tham gia bản 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 vào cuộc thảo luận về việc 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 chế độ 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 đặt thuộc tính này chỉ 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ố định không?

Dựa trên ý kiến phản hồi cho đến nay, chúng tôi cho rằng 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 sang các thuộc tính khác. Nếu bạn có trường hợp sử dụng không giải quyết được chỉ bằng postMessage và closed, hãy gửi ý kiến phản hồi của bạn trong luồng Ý định thử nghiệm.

Tài nguyên