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:
- Loại đáng tin cậy giúp ngăn chặn lỗ hổng tập lệnh trên nhiều trang web.
- Các phần tử biểu mẫu có sự thay đổi quan trọng.
- Có một cách mới để phát hiện tình trạng rò rỉ bộ nhớ.
- API hệ thống tệp gốc bắt đầu bản dùng thử theo nguyên gốc mới với chức năng bổ sung.
- Hiện có các chính sách mới về nhiều nguồn gốc
- Chúng tôi đã ra mắt chương trình Các chỉ số quan trọng về trang web để cung cấp hướng dẫn hợp nhất về các tín hiệu chất lượng mà chúng tôi tin là cần thiết để mang lại trải nghiệm tuyệt vời cho người dùng trên web.
- Và nhiều tính năng khác.
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ị.
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.
- Thời gian hiển thị nội dung lớn nhất đo tốc độ tải dự kiến và đánh dấu một thời điểm trong tiến trình tải trang khi nội dung chính của trang có khả năng đã tải.
- Thời gian phản hồi lần tương tác đầu tiên đo lường khả năng phản hồi và định lượng trải nghiệm mà người dùng cảm thấy khi cố gắng tương tác lần đầu với trang.
- Điểm số tổng hợp về mức thay đổi bố cục đo lường độ ổn định về hình ảnh và xác định mức độ thay đổi bố cục ngoài dự kiến của nội dung trang hiển thị.
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
- Chrome hiện đã hỗ trợ Mã vạch phát hiện API, cho phép phát hiện và giải mã mã vạch.
- Hàm
@supports
CSS mới cung cấp tính năng phát hiện tính năng cho bộ chọn CSS. - Chú giải ARIA mới hỗ trợ khả năng hỗ trợ tiếp cận của trình đọc màn hình đối với nhận xét, đề xuất và phần đánh dấu văn bản có ý nghĩa ngữ nghĩa (tương tự như
<mark>
). - Truy vấn phương tiện
prefers-color-scheme
cho phép tác giả hỗ trợ giao diện tối của riêng họ để họ có toàn quyền kiểm soát các trải nghiệm họ tạo ra. - JavaScript hiện hỗ trợ các mô-đun trong trình thực thi dùng chung.
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.
- Tính năng mới trong Công cụ của Chrome cho nhà phát triển (83)
- Ngừng sử dụng và xoá Chrome 83
- Thông tin cập nhật về ChromeStatus.com cho Chrome 83
- Tính năng mới về JavaScript trên Chrome 83
- Danh sách thay đổi kho lưu trữ nguồn Chromium
Đă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!