Chrome 83 现已开始发布为稳定版。
以下是您有必要知道的信息:
- 可信类型有助于防范跨站脚本攻击漏洞。
- 对表单元素进行重要改造。
- 有一种新方法可以检测内存泄漏。
- 原生文件系统 API 会启动新的源试用,并添加更多功能。
- 新增了跨源政策
- 我们推出了网页指标计划,旨在针对我们认为对提供出色的网络用户体验至关重要的质量信号提供统一指南。
- 以及更多。
我是 Pete LePage,在家工作和拍摄,下面就来深入了解一下 Chrome 83 为开发者提供了哪些新功能!
可信类型
基于 DOM 的跨站脚本攻击是网络中最常见的安全漏洞之一。不小心在网页中引入一个标记很容易发生。可信类型有助于防止这些类型的漏洞,因为它们需要先处理数据,然后才能将其传递给可能不安全的函数。
以 innerHTML
为例,启用可信类型后,如果我尝试传递一个字符串,该字符串将会失败并显示 TypeError,因为浏览器不知道它是否可以信任该字符串。
// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError
相反,我需要使用安全函数(例如 textContent
)传入可信类型,或者创建元素并使用 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);
在启用可信类型之前,您需要使用 report-only
CSP 标头识别并修复任何违规行为。
Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com
设置好所有按钮后,您就可以正常开启它了。 有关完整详情,请参阅 web.dev 上的使用可信类型防范基于 DOM 的跨站脚本攻击漏洞一文。
表单控件更新
我们每天都在使用 HTML 表单控件,它们是大部分 Web 交互的关键。这类应用易于使用,内置无障碍功能,而且我们的用户非常熟悉。表单控件的样式设置在不同浏览器和操作系统之间可能会不一致。而且,我们经常需要发布一些 CSS 规则,才能在不同设备上实现一致的呈现效果。
Microsoft 在对表单控件的外观进行现代化改造方面所做的工作让我印象深刻。除了更好的视觉风格外,它们还提供更好的触控支持和无障碍功能,包括改进了键盘支持!
新的表单控件现已登陆 Microsoft Edge,现可在 Chrome 83 中使用。如需了解详情,请参阅 Chromium 博客中的表单控件和焦点更新。
源试用
使用 measureMemory()
测量内存
从 Chrome 83 中开始试用源试用,performance.measureMemory()
是一个新 API,可用于衡量网页的内存用量并检测内存泄漏。
内存泄漏很容易引入:
- 忘记取消注册事件监听器
- 从 iframe 中捕获对象
- 未关闭 worker
- 在数组中累积对象
- 等等
内存泄漏会导致页面显示速度变慢,并让用户感到臃肿。
if (performance.measureMemory) {
try {
const result = await performance.measureMemory();
console.log(result);
} catch (err) {
console.error(err);
}
}
如需了解新 API 的所有详细信息,请参阅 web.dev 上的使用 measureMemory()
监控网页的总内存用量。
Native File System API 更新
Native File System API 在 Chrome 83 中开始了新的源试用,它支持可写流并能够保存文件句柄。
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.
}
可写流可以更轻松地向文件写入数据,并且由于它是一种流,您可以轻松地将响应从一个流传输到另一个流。
将文件句柄保存到 IndexedDB 后,您可以存储状态,或者记住用户正在处理的文件。例如,保留最近编辑文件的列表、打开用户正在处理的最后一个文件,等等。
您需要新的源试用令牌才能使用这些功能,请阅读我在 web.dev 上更新的文章 Native File System API:简化对本地文件的访问,其中介绍了所有详细信息,以及如何获取新的源试用令牌。
其他源试用
请查看源试用中功能的完整列表。
新的跨源政策
某些 Web API 会增加发生旁路攻击(例如 Spectre)的风险。为了降低这种风险,浏览器提供了一个基于选择启用的隔离环境,称为“跨域隔离”。跨域隔离状态还会阻止对 document.domain
的修改。能够更改 document.domain
将允许同站点文档之间进行通信,并已被视为同源政策中的漏洞。
如需了解完整详情,请参阅 Eiji 的博文使用 COOP 和 COEP 将您的网站“跨域隔离”。
网页指标
衡量用户体验质量涉及许多方面。虽然用户体验的某些方面因网站和上下文而异,但有一组通用信号,即“核心网页指标”,这对所有网络体验都至关重要。这些核心用户体验需求包括网页内容的加载体验、互动和视觉稳定性,这些需求共同也是 2020 年核心网页指标的基础。
- Largest Contentful Paint 用于衡量用户感知的加载速度,并在网页加载时间轴中标记页面主要内容可能已加载的时间点。
- First Input Delay衡量响应速度,并量化用户尝试首次与网页互动时的体验。
- Cumulative Layout Shift 可衡量视觉稳定性,并量化可见网页内容的意外布局偏移量。
所有这些指标都能捕获以用户为中心的重要结果,可在现场进行测量,并且具有配套的实验室诊断指标等效项和工具。例如,虽然 Largest Contentful Paint 是主要加载指标,但它也高度依赖于首次内容绘制 (FCP) 和首字节时间 (TTFB),而这两项指标对于监控和改进仍然至关重要。
如需了解详情,请参阅 Chromium 博客上的隆重推出网页指标:健康网站的基本指标,了解完整详情。
其他数据
- Chrome 现在支持 Barcode Detection API,该 API 可提供检测和解码条形码的功能。
- 新的 CSS
@supports
函数可为 CSS 选择器提供功能检测。 - 新的 ARIA 注解支持屏幕阅读器使用具有语义含义的评论、建议和文本突出显示(类似于
<mark>
)。 - 借助
prefers-color-scheme
媒体查询,作者可以支持自己的深色主题,以便完全控制所构建的体验。 - JavaScript 现在支持共享工作器中的模块。
想要了解未来有哪些新功能?请查看 Fugu API 跟踪器!
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 83 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (83)
- Chrome 83 弃用和移除
- Chrome 83 版 ChromeStatus.com 更新
- Chrome 83 中的 JavaScript 的新变化
- Chromium 源代码库变更列表
订阅
如果您想及时了解我们视频的最新动态,请订阅我们的 Chrome Developers YouTube 频道。每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage,需要剪个头发,但 Chrome 84 发布之后,我会立即告诉您 - Chrome 有什么新变化!