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ế

Sử dụng chế độ tách biệt nhiều nguồn gốc và chống rò rỉ dữ liệu 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ề cơ chế mở trên nhiều nguồn gốc (COOP): restrict-properties. Tính năng này mang lại lợi ích bảo mật và giúp bạn dễ dàng sử dụng tính năng tách biệt nhiều nguồn gốc, đồ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 trong các trường hợp sử dụng khác.

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

Lý do bạn nên dùng restrict-properties

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

Tránh rò rỉ trên nhiều vị trí mà không làm hỏng

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à lấy thông tin tham chiếu đến ứng dụng đó.

Một trang web độc hại có thể lợi dụng thông tin 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 của bạn cho Cross-Origin-Opener-Policy vẫn bị giới hạn. Bạn có thể:

  • Đặt same-origin, để chặn mọi hoạt động 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 mọi lượt tương tác trên nhiều nguồn gốc mở ra trang web của bạn trong 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 mở trong cửa sổ bật lên không thể tương tác với trình mở để thực thi COOP. Điều này bên trái các trường hợp sử dụng chính như đăng nhập một lần và thanh toán mà không được bảo vệ khỏi sự cố rò rỉ trên nhiều trang web.

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

Với restrict-properties, 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 sẽ không được hỗ trợ. Tuy nhiên, hoạt động giao tiếp cơ bản giữa các cửa sổ thông qua postMessage và closed được cho phép.

Điều này giúp cải thiện khả năng 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 một dịch vụ trong cửa sổ bật lên, việc đặt Cross-Origin-Opener-Policy: restrict-properties sẽ tự bảo vệ bạn 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 đó.
  • Nếu bạn cần truy cập vào cửa sổ bật lên nhiều nguồn gốc, việc đặt Cross-Origin-Opener-Policy: restrict-properties 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ả trình mở và trình mở đều đặt tiêu đề và các trang này có nhiều nguồn gốc, thì nó sẽ hoạt động tương tự như một trong số các trang đó đã đặt tiêu đề. Nếu các tập dữ liệu này 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 của 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 đó, 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ó tên là cách ly nhiều nguồn gốc. Khi 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à đồng hồ hẹn giờ có độ chính xác cao với độ phân giải cao hơn, đồng thời tách biệt nguồn gốc với các tính năng khác trừ phi bạn chọn sử dụng.

Cho đến nay, bạn phải thiết lập Cross-Origin-Opener-Policy: same-origin để sử dụng các API này. Tuy nhiên, điều này sẽ làm hỏng mọi quy trình bật lên trên nhiều nguồn gốc mà bạn có thể cần, chẳng hạn như đă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 cho 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 bỏ mối quan hệ mở, mối quan hệ này chỉ giới hạn mối quan hệ đó ở tập hợp con giao tiếp tối thiểu là 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 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 trong 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 lựa chọn tiêu đề trong bản minh hoạ tách biệt nhiều nguồn gốc này.

Thử nghiệm 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 sử dụng 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 đang tích cực tham gia thảo luận về tiêu 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ử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 hạn chế. 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 này 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, có vẻ như window.postMessage và window.closed đã đủ cho phần lớn quy trình công việc. Tuy nhiên, chúng tôi vẫn đang cân nhắc việc cung cấp API này cho các thuộc tính 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 cách dùng postMessage và closed, hãy để lại ý kiến phản hồi về chuỗi Ý định để thử nghiệm.

Tài nguyên