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 cài đặt document.domain thì bạn bắt buộc phải thực hiện hành động.

Maud Nalpas
Maud Nalpas
Twitter 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ể thiết lập document.domain: Chrome sẽ đặt document.domain ở chế độ không thể thay đổi. Để giao tiếp 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 dần dần.

Chúng tôi cho rằng các trình duyệt khác sẽ không dùng nữa và xoá chức năng này. Xem lại phần khả năng tương thích của trình duyệt để biết chi tiết.

Tại sao nên đặt document.domain ở chế độ 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 thiết lập document.domain để cho phép giao tiếp giữa các trang cùng một trang web nhưng trên nhiều nguồn gốc.

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

Chi tiết: Tại sao nên đặt document.domain được?

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

Nhiều trang web thiết lập document.domain để cho phép giao tiếp giữa các trang cùng một trang web nhưng trên nhiều nguồn gốc.

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

Dưới đây là cách document.domain được sử dụng cho đến bây giờ:

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 bạn đặt document.domain của cả hai trang thành 'example.com', trình duyệt sẽ xử lý 2 nguồn 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 thao tác DOM trên nhiều nguồn gốc trên https://parent.example.com dựa trên https://video.example.com.

Các trang web thiết lập document.domain để giúp 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ì sự thay đổi này sẽ giúp duy trì chính sách cùng nguồn gốc, nên trang gốc có thể truy cập vào tài liệu của iframe đó và chuyển qua cây DOM, và ngược lại.

Đây là một kỹ thuật tiện lợi, nhưng kỹ thuật này tiềm ẩn rủi ro bảo mật.

Các 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 xung quanh document.domain đã dẫn đến sự thay đổi trong quy cách nhằm cảnh báo người dùng nên tránh sử dụng ứng dụng này.

Ví dụ: khi 2 trang thiết lập document.domain, các trang đó có thể giả vờ như 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 một 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ả trang web khác do cùng dịch vụ đó lưu trữ, giúp kẻ tấn công dễ dàng truy cập 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 vấ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 trang web của tôi có bị ảnh hưởng hay không?

Nếu sự thay đổi này ảnh hưởng đến trang web của bạn, thì Chrome sẽ cảnh báo cho bạn trong bảng điều khiển 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 lưu ý 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ấ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 kiểm tra API không dùng nữa cho LightHouse để tìm tất cả các API được lên lịch xóa khỏi Chrome.

Nếu bạn đã thiết lập API Báo cáo, thì Chrome sẽ 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 dần, kể từ Chrome 115. Để xem thay đổi này hoạt động như thế nào 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 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 giải pháp thay thế nào?

Lựa chọn tốt nhất là hoàn toàn 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. Phương thức này hoạt động trong tất cả phiên bản của mọi trình duyệt. Tuy nhiên, điều này có thể đòi hỏi ứng dụng phải điều chỉnh đáng kể. 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 nhiều nguồn gốc.

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 (API Gửi thông báo kênh) trên nhiều nguồn gốc có thể thay thế document.domain.

Trong ví dụ sau đây:

  1. https://parent.example.com yêu cầu https://video.example.com trong một iframe để thao tác DOM bằng cách gửi thông báo qua postMessage().
  2. https://video.example.com thao tác DOM ngay khi nhận được thông báo và thông báo lại thành công cho thành phần 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 dùng thử và xem cách thức hoạt động của công cụ này. Nếu bạn có yêu cầu cụ thể không hoạt động được với postMessage() hoặc Channel Messaging API, hãy cho chúng tôi biết trên Twitter qua @ChromiumDev hoặc 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 rõ rà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 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 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ả khi tiêu đề 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 sẽ cần gửi Origin-Agent-Cluster (lưu ý rằng document.domain không có hiệu lực nếu chỉ có một tài liệu thiết lập hành vi đó).

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

Quản trị viên của bạn có thể đị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 trên tổ chức của bạn. Để tìm hiểu thêm, hãy đọc Danh sách và quản lý chính sách Chrome Enterprise | Tài liệu.

Tài nguyên

Xác nhận

Ảnh của Finan Akbar trên Unsplash