Điểm mới trong Chrome 83

Chrome 83 hiện đang bắt đầu ra mắt ổn định.

Dưới đây là những gì bạn cần phải biết:

Tôi là Pete LePage, làm việc và quay video tại nhà. Hãy cùng tìm hiểu sâu hơn và xem có gì mới dành cho nhà phát triển trong Chrome 83!

Loại đáng tin cậy

Tập lệnh trên nhiều trang web dựa trên DOM là một trong những lỗ hổng bảo mật phổ biến nhất trên web. Bạn cũng có thể dễ dàng vô tình giới thiệu một thuộc tính đến trang của mình. Các kiểu đáng tin cậy có thể giúp ngăn chặn các loại lỗ hổng bảo mật này, vì các kiểu này yêu cầu bạn phải xử lý dữ liệu trước khi truyền dữ liệu vào một hàm tiềm ẩn nguy hiểm.

Lấy innerHTML làm ví dụ: khi bật các loại đáng tin cậy, nếu tôi cố gắng truyền một chuỗi, thì chuỗi sẽ không thành công với TypeError vì trình duyệt không biết liệu chuỗi có thể tin cậy hay không.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

Thay vào đó, tôi cần sử dụng một hàm an toàn, như textContent, truyền vào một loại đáng tin cậy hoặc tạo phần tử và sử dụng appendChild().

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

Trước khi bật các loại thành phần đáng tin cậy, bạn nên xác định và khắc phục mọi lỗi vi phạm bằng cách sử dụng tiêu đề CSP report-only.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

Sau đó, khi đã cài đặt xong mọi thứ, bạn có thể bật máy ảnh đúng cách. Thông tin đầy đủ có trong phần Ngăn chặn các lỗ hổng bảo mật tập lệnh trên nhiều trang web dựa trên DOM bằng các Loại đáng tin cậy trên web.dev.

Nội dung cập nhật đối với các chế độ kiểm soát biểu mẫu

Chúng tôi sử dụng các thành phần kiểm soát biểu mẫu HTML mỗi ngày và chúng đóng vai trò then chốt đối với rất nhiều hoạt động tương tác của web. Các tính năng này dễ sử dụng, tích hợp sẵn khả năng hỗ trợ tiếp cận và quen thuộc với người dùng của chúng tôi. Kiểu của các đối tượng kiểm soát biểu mẫu có thể không nhất quán trên các trình duyệt và hệ điều hành. Và chúng tôi thường phải gửi một số quy tắc CSS chỉ để có giao diện nhất quán trên các thiết bị.

Trước đây, hãy tạo kiểu mặc định cho các đối tượng kiểm soát biểu mẫu.
Sau đó, hãy cập nhật kiểu của các đối tượng kiểm soát biểu mẫu.

Tôi thực sự ấn tượng với công việc mà Microsoft đang làm nhằm hiện đại hoá giao diện của các tuỳ chọn điều khiển biểu mẫu. Ngoài kiểu hình ảnh đẹp hơn, các tính năng này còn hỗ trợ cảm ứng tốt hơn và hỗ trợ tiếp cận tốt hơn, bao gồm cả tính năng hỗ trợ bàn phím đã được cải thiện!

Các đối tượng điều khiển biểu mẫu mới đã có trong Microsoft Edge và hiện đã có trong Chrome 83. Để biết thêm thông tin, hãy xem phần Cập nhật cho chế độ Điều khiển biểu mẫu và Tiêu điểm trên blog Chromium.

Bản dùng thử theo nguyên gốc

Đo lường bộ nhớ bằng measureMemory()

Khi bắt đầu bản dùng thử theo nguyên gốc trong Chrome 83, performance.measureMemory() là một API mới giúp bạn có thể đo lường mức sử dụng bộ nhớ của trang và phát hiện tình trạng rò rỉ bộ nhớ.

Rò rỉ bộ nhớ rất dễ gây ra:

  • Quên huỷ đăng ký trình nghe sự kiện
  • Chụp các đối tượng từ iframe
  • Không đóng trình thực thi
  • Tích luỹ đối tượng trong mảng
  • và cứ tiếp tục như vậy.

Lỗi rò rỉ bộ nhớ dẫn đến việc các trang xuất hiện chậm và bị đầy cho người dùng.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

Hãy xem phần Theo dõi tổng mức sử dụng bộ nhớ của trang web bằng measureMemory() trên web.dev để biết toàn bộ thông tin chi tiết về API mới.

Các bản cập nhật dành cho API Hệ thống tệp gốc

API Hệ thống tệp gốc đã bắt đầu bản dùng thử theo nguyên gốc mới trong Chrome 83 với khả năng hỗ trợ các luồng có thể ghi và khả năng lưu tên người dùng tệp.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

Luồng có thể ghi giúp việc ghi vào tệp dễ dàng hơn nhiều và vì đây là luồng nên bạn có thể dễ dàng chuyển các phản hồi từ luồng này sang luồng khác.

Việc lưu tên người dùng tệp vào IndexedDB cho phép bạn lưu trữ trạng thái hoặc ghi nhớ những tệp mà người dùng đang làm việc. Ví dụ: giữ danh sách các tệp được chỉnh sửa gần đây, mở tệp cuối cùng mà người dùng đang làm việc, v.v.

Bạn sẽ cần có mã thông báo bản dùng thử theo nguyên gốc mới để sử dụng các tính năng này. Vì vậy, hãy xem bài viết cập nhật API Hệ thống tệp gốc: Đơn giản hoá quyền truy cập vào tệp cục bộ trên web.dev để biết toàn bộ thông tin chi tiết và cách nhận mã thông báo bản dùng thử theo nguyên gốc mới.

Các phiên bản thử theo nguyên gốc khác

Hãy kiểm tra danh sách đầy đủ các tính năng trong bản dùng thử theo nguyên gốc.

Các chính sách mới trên 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 gọi là được tách biệt nhiều nguồn gốc. Trạng thái tách biệt nhiều nguồn gốc cũng ngăn chặn việc sửa đổi document.domain. Việc có thể thay đổi document.domain cho phép giao tiếp giữa các tài liệu trên cùng một trang web và được coi là một lỗ hổng trong chính sách về cùng nguồn gốc.

Hãy xem bài đăng của Eiji Tạo trang web "được tách biệt nhiều nguồn gốc" bằng COOP và COEP để biết đầy đủ thông tin chi tiết.

Các chỉ số quan trọng về trang web

Việc đo lường chất lượng trải nghiệm người dùng có nhiều khía cạnh. Mặc dù một số khía cạnh của trải nghiệm người dùng là tuỳ theo trang web và bối cảnh cụ thể, nhưng có một bộ tín hiệu chung – "Các chỉ số quan trọng về trang web" – điều đó đóng vai trò quan trọng đối với tất cả trải nghiệm web. Những nhu cầu cốt lõi về trải nghiệm người dùng đó bao gồm trải nghiệm tải, khả năng tương tác và độ ổn định về hình ảnh của nội dung trên trang. Tất cả những nhu cầu đó là nền tảng của Các chỉ số quan trọng về trang web năm 2020.

Tất cả những chỉ số này đều nắm bắt được kết quả quan trọng tập trung vào người dùng, có thể đo lường theo trường và có công cụ và chỉ số chẩn đoán tương đương trong phòng thí nghiệm. Ví dụ: mặc dù Thời gian hiển thị nội dung lớn nhất là chỉ số tải hàng đầu, nhưng chỉ số này cũng phụ thuộc nhiều vào Thời gian hiển thị nội dung đầu tiên (FCP) và Thời gian đạt byte đầu tiên (TTFB). Những chỉ số này vẫn rất quan trọng để theo dõi và cải thiện.

Để tìm hiểu thêm, hãy xem phần Giới thiệu các chỉ số quan trọng về trang web: các chỉ số thiết yếu cho một trang web hoạt động tốt trên Chromium Blog để biết toàn bộ thông tin chi tiết.

Và các dữ liệu khác

Bạn có thắc mắc về những gì sắp xảy ra trong tương lai? Hãy khám phá Trình theo dõi API Fuuu để biết thêm thông tin!

Tài liệu đọc thêm

Phần này chỉ đề cập đến một số điểm chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm những thay đổi khác trong Chrome 83.

Đăng ký

Nếu bạn muốn luôn nhận được thông tin mới nhất về video của chúng tôi, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome và bạn sẽ nhận được thông báo qua email bất cứ khi nào chúng tôi ra mắt video mới.

Tôi là Pete LePage và tôi cần cắt tóc, nhưng ngay sau khi Chrome 84 được phát hành, tôi sẽ sẵn sàng cho bạn biết -- những điểm mới trong Chrome!