Chrome tắt tính năng sửa đổi document.domain

Nếu trang web của bạn dựa vào việc thiết lập document.domain, thì bạn phải thực hiện hành động.

Maud Nalpas
Eiji Kitamura

Những thay đổi và lý do

Kể từ Chrome 115, các trang web sẽ không thể đặt document.domain: Chrome sẽ khiến document.domain không thay đổi được. Để giao tiếp trên nhiều nguồn gốc, bạn cần sử dụng các phương pháp thay thế, chẳng hạn như postMessage() hoặc Channel Messaging API.

Xin lưu ý rằng thay đổi này sẽ được triển khai từng bước.

Chúng tôi dự kiến các trình duyệt khác cuối cùng cũng sẽ ngừng cung cấp và xoá chức năng này. Hãy xem phần khả năng tương thích với trình duyệt để biết thông tin chi tiết.

Tại sao lại khiến document.domain không thay đổi được?

document.domain được thiết kế để nhận hoặc đặt tên máy chủ của nguồn gốc. Nhiều trang web đặt document.domain để cho phép giao tiếp giữa các trang cùng trang web nhưng khác nguồn gốc.

Mặc dù đây là một kỹ thuật thuận tiện, nhưng nó lại gây ra rủi ro bảo mật vì nới lỏng chính sách cùng nguồn gốc. Mối lo ngại về bảo mật đối với document.domain đã dẫn đến sự thay đổi trong quy cách cảnh báo người dùng không nên sử dụng.

Chi tiết: Tại sao nên đặt document.domain là bất biến?

Cách document.domain được dùng hiện nay

Nhiều trang web đặt document.domain để cho phép giao tiếp giữa các trang cùng trang web nhưng khác nguồn gốc.

Các trang web cùng trang web nhưng khác nguồn gốc có cùng eTLD+1 nhưng có các miền con khác nhau.

Sau đây là mức sử dụng document.domain cho đến thời điểm hiện tại:

Giả sử một trang trên https://parent.example.com nhúng một trang iframe từ https://video.example.com. Các trang này có cùng eTLD+1 (example.com) với các miền con khác nhau. Khi document.domain của cả hai trang được đặt thành 'example.com', trình duyệt sẽ coi hai nguồn gốc này như thể chúng có cùng nguồn gốc.

Đặt document.domain cho https://parent.example.com:

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Đặt document.domain cho https://video.example.com:

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Giờ đây, bạn có thể tạo một thao tác DOM trên nhiều nguồn trên https://parent.example.com đối với https://video.example.com.

Các trang web đặt document.domain để các tài liệu trên cùng một trang web có thể giao tiếp dễ dàng hơn. Vì thay đổi này nới lỏng chính sách yêu cầu các trang web phải có cùng nguồn gốc, nên trang mẹ có thể truy cập vào tài liệu của iframe và duyệt qua cây DOM, cũng như ngược lại.

Đây là một kỹ thuật thuận tiện, tuy nhiên, nó lại gây ra rủi ro bảo mật.

Các mối lo ngại về bảo mật đối với document.domain

Mối lo ngại về bảo mật đối với document.domain đã dẫn đến sự thay đổi trong quy cách cảnh báo người dùng tránh sử dụng.

Ví dụ: khi hai trang đặt document.domain, chúng có thể giả vờ như thể chúng có cùng nguồn gốc. Điều này đặc biệt quan trọng khi các trang này sử dụng dịch vụ lưu trữ dùng chung với các miền con khác nhau. Việc đặt document.domain sẽ mở ra quyền truy cập vào tất cả các trang web khác do cùng một dịch vụ lưu trữ. Điều này khiến kẻ tấn công dễ dàng truy cập vào các trang web của bạn hơn. Điều này có thể xảy ra vì document.domain bỏ qua phần số cổng của miền.

Để tìm hiểu thêm về những tác động đến bảo mật khi đặt document.domain, hãy đọc trang "Document.domain" trên MDN.

Khả năng tương thích với trình duyệt

Làm cách nào để biết liệu trang web của tôi có bị ảnh hưởng hay không?

Nếu trang web của bạn chịu ảnh hưởng của thay đổi này, Chrome sẽ cảnh báo cho bạn trong bảng Vấn đề của Công cụ cho nhà phát triển. Cảnh báo này đã được thêm vào năm 2022. Hãy chú ý đến cờ màu vàng ở phía trên bên phải của Công cụ cho nhà phát triển.

Ảnh chụp màn hình cảnh báo về vấn đề trong Công cụ cho nhà phát triển

Bạn cũng có thể chạy trang web của mình thông qua quy trình kiểm tra API không dùng nữa của LightHouse để tìm tất cả API dự kiến sẽ bị xoá khỏi Chrome.

Nếu bạn đã thiết lập API Báo cáo, Chrome đã gửi cho bạn báo cáo về việc ngừng sử dụng để thông báo cho bạn về việc ngừng sử dụng sắp tới này. Tìm hiểu thêm về cách sử dụng API Báo cáo với các dịch vụ thu thập báo cáo hiện có hoặc bằng cách tự xây dựng giải pháp nội bộ.

Làm cách nào để xem thay đổi này có hiệu lực?

Thay đổi này sẽ được triển khai từng bước, bắt đầu từ Chrome 115. Để xem thay đổi này có hiệu lực ngay cả khi thay đổi chưa được triển khai trong trình duyệt Chrome của bạn, bạn có thể bật thay đổi này theo các bước sau:

  1. Mở chrome://flags/#origin-agent-cluster-default
  2. Chọn Bật.
  3. Khởi động lại Chrome.

Tôi có thể sử dụng những phương án thay thế nào?

Lựa chọn tốt nhất là không sửa đổi document.domain, chẳng hạn như bằng cách lưu trữ trang và tất cả các khung thành phần trên cùng một nguồn gốc. Tính năng này hoạt động trong tất cả các phiên bản của mọi trình duyệt. Tuy nhiên, việc này có thể đòi hỏi phải sửa đổi đáng kể một ứng dụng, vì vậy, bạn cũng nên xem xét các giải pháp thay thế tiếp tục hỗ trợ quyền truy cập từ nhiều nguồn.

Sử dụng postMessage() hoặc Channel Messaging API thay vì document.domain

Trong hầu hết các trường hợp sử dụng, postMessage() hoặc Channel Messaging API trên nhiều nguồn có thể thay thế document.domain.

Trong ví dụ sau:

  1. Các yêu cầu https://parent.example.com https://video.example.com trong iframe để thao tác với DOM bằng cách gửi thông báo qua postMessage().
  2. https://video.example.com thao tác với DOM ngay khi nhận được thông báo và thông báo thành công cho thành phần mẹ.
  3. https://parent.example.com ghi nhận thành công này.

Trên https://parent.example.com:

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

Trên https://video.example.com:

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

Hãy thử và xem cách hoạt động của tính năng này. Nếu bạn có các yêu cầu cụ thể không hoạt động với postMessage() hoặc Channel Messaging API, hãy cho chúng tôi biết trên Twitter qua @ChromiumDev hoặc đặt câu hỏi trên Stack Overflow bằng thẻ document.domain.

Khi không còn cách nào khác, hãy gửi tiêu đề Origin-Agent-Cluster: ?0

Nếu có lý do chính đáng để tiếp tục đặt document.domain, bạn có thể gửi tiêu đề phản hồi Origin-Agent-Cluster: ?0 cùng với tài liệu đích.

Origin-Agent-Cluster: ?0

Tiêu đề Origin-Agent-Cluster hướng dẫn trình duyệt xem có nên xử lý tài liệu bằng cụm tác nhân theo khoá nguồn gốc hay không. Để tìm hiểu thêm về Origin-Agent-Cluster, hãy đọc bài viết Yêu cầu cách ly hiệu suất bằng tiêu đề Origin-Agent-Cluster.

Khi bạn gửi tiêu đề này, tài liệu của bạn có thể tiếp tục đặt document.domain ngay cả sau khi tài liệu đó trở nên bất biến theo mặc định.

Tất cả những tài liệu khác yêu cầu hành vi đó cũng sẽ cần gửi Origin-Agent-Cluster (lưu ý rằng document.domain sẽ không có hiệu lực nếu chỉ có một tài liệu đặt hành vi đó).

Định cấu hình OriginAgentClusterDefaultEnabled cho chính sách doanh nghiệp

Quản trị viên có thể định cấu hình chính sách OriginAgentClusterDefaultEnabled thành false (không bắt buộc) để theo mặc định, người dùng có thể đặt document.domain trên các phiên bản Chrome trong tổ chức của bạn. Để tìm hiểu thêm, hãy đọc bài viết Danh sách chính sách và hoạt động quản lý của Chrome Enterprise | Tài liệu.

Tài nguyên

Lời cảm ơn

Ảnh chụp của Finan Akbar trên Unsplash