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, bạn phải thực hiện hành động này.

Maud Nalpas
Maud Nalpas
X GitHub
Eiji Kitamura

Điều gì sẽ thay đổi và tại sao?

Kể từ Chrome 115, các trang web sẽ không thể đặt document.domain: Chrome sẽ đặt document.domain thành không thể thay đổi. Để 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 API Tin nhắn kênh.

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 sẽ ngừng sử dụng 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 phải đặt document.domain là không thể thay đổi?

document.domain được thiết kế để lấy 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ó cũng gây ra rủi ro bảo mật vì nới lỏng chính sách về cùng nguồn gốc. Các mối lo ngại về bảo mật liên quan đến document.domain đã dẫn đến một thay đổi trong quy cách nhắc người dùng tránh sử dụng tính năng này.

Chi tiết: Tại sao phải đặt document.domain là không thể thay đổi?

Cách sử dụng document.domain 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ó miền con khác nhau.

Sau đây là cách 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 là 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 gốc trên https://parent.example.com so với https://video.example.com.

Các trang web đặt document.domain để cho phép các tài liệu trên cùng một trang web giao tiếp dễ dàng hơn. Vì thay đổi này nới lỏng chính sách 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, và ngược lại.

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

Mối lo ngại về bảo mật với document.domain

Các mối lo ngại về bảo mật liên quan đến document.domain đã dẫn đến một thay đổi trong quy cách cảnh báo người dùng tránh sử dụng tính năng này.

Ví dụ: khi hai trang đặt document.domain, các trang đó có thể giả vờ như thể chúng có cùng một nguồn gốc. Điều này đặc biệt quan trọng khi các trang này sử dụng một dịch vụ lưu trữ dùng chung với nhiều miền con. 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ữ, giúp 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ề các tác động bảo mật của việc thiết lập 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 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 bạn trong bảng điều khiển Các vấn đề của DevTools. Cảnh báo này được thêm vào vào năm 2022. Hãy chú ý đến cờ màu vàng ở phía trên bên phải của DevTools.

Ảnh chụp màn hình cảnh báo về vấn đề trong DevTools

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, thì Chrome đã gửi cho bạn các 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 xây dựng giải pháp nội bộ của riêng bạn.

Làm cách nào để xem thay đổi này trong thực tế?

Thay đổi này sẽ được triển khai từng bước, bắt đầu từ Chrome 115. Để xem thay đổi này trong thực tế ngay cả khi thay đổi chưa được triển khai trong trình duyệt Chrome, bạn có thể bật thay đổi này như 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 phương án thay thế nào?

Cách tốt nhất là không sửa đổi document.domain, ví dụ: 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. Cách này hoạt động trong tất cả phiên bản của tất cả trình duyệt. Tuy nhiên, việc này có thể yêu cầu bạn phải làm lạ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 trên nhiều nguồn gốc.

Sử dụng postMessage() hoặc API nhắn tin qua kênh thay vì document.domain

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

Trong ví dụ sau:

  1. https://parent.example.com yêu cầu https://video.example.com trong một khung 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 phần tử mẹ.
  3. https://parent.example.com xác nhận thành công.

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. Nếu bạn có các yêu cầu cụ thể không hoạt động với postMessage() hoặc API nhắn tin qua kênh, 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 mục tiêu.

Origin-Agent-Cluster: ?0

Tiêu đề Origin-Agent-Cluster hướng dẫn trình duyệt liệu tài liệu có được xử lý 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 tách biệt 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 tiêu đề này trở thành không thể thay đổi theo mặc định.

Tất cả các tài liệu khác yêu cầu hành vi đó cũng cần gửi Origin-Agent-Cluster (lưu ý rằng document.domain không có hiệu lực nếu chỉ 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ể tuỳ ý định cấu hình chính sách OriginAgentClusterDefaultEnabled thành false để đặt document.domain theo mặc định 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 Quản lý và xem danh sách chính sách 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