谷歌 Chrome 83 稳定版正式发布：新跨域政策、表单控件，改进 Web 体验-联网快讯

Miracle

1357
文章

109
评论

2020年5月24日00:05:19IT相关已关闭评论2,6902331字阅读7分46秒阅读模式

Chrome 83 稳定版发布了，以下是最主要的更新内容：文章源自联网快讯-https://x1995.cn/7760.html

可信类型（Trusted types），有助于防止跨站点脚本漏洞
新的表单元素
新的跨域政策
引入 Web Vitals 计划
检测内存泄漏的新方法

可信类型（Trusted types）文章源自联网快讯-https://x1995.cn/7760.html

基于 DOM 的跨站点脚本（DOM XSS）是最常见的 Web 安全漏洞之一。可信类型（Trusted types）可以帮助防止此类漏洞，因为它们会要求你在将数据传递给潜在的危险之前对其进行处理。文章源自联网快讯-https://x1995.cn/7760.html

以 innerHTML 为例，如果启用了可信类型，那么如果尝试传递一个字符串，它将抛出一个 TypeError，因为浏览器不知道它是否可以信任该字符串。文章源自联网快讯-https://x1995.cn/7760.html

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

相替代地，需要使用诸如 textContent 之类的安全函数，传入可信类型，或者创建该元素并使用appendChild()。文章源自联网快讯-https://x1995.cn/7760.html

// 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);

更新表单控件文章源自联网快讯-https://x1995.cn/7760.html

Chrome 和 Edge 进行了合作，以改善 HTML 表单控件的外观和功能。下图显示了 Chrome 中某些控件的新旧版本对比（左旧右新）。文章源自联网快讯-https://x1995.cn/7760.html

除了新的视觉风格之外，微软还提供了更好的触摸支持和辅助功能，同时改进了键盘支持。文章源自联网快讯-https://x1995.cn/7760.html

文章源自联网快讯-https://x1995.cn/7760.html

新的跨域政策文章源自联网快讯-https://x1995.cn/7760.html

一些 Web API 会增加诸如 Spectre 之类的旁道攻击的风险。为了减轻这种风险，Chrome 提供了一个基于选择加入的隔离环境，称为跨域隔离。这是通过两个新的 HTTP 标头完成的： Cross-Origin-Embedder-Policy
和 Cross-Origin-Opener-Policy。使用这些标头，网页可以安全地使用特权功能，包括：文章源自联网快讯-https://x1995.cn/7760.html

Performance.measureMemory()
JS Self-Profiling API

跨域隔离状态还可以防止对document.domain进行修改。文章源自联网快讯-https://x1995.cn/7760.html

Web vitals文章源自联网快讯-https://x1995.cn/7760.html

有这样一组常见的信号——“Core Web Vitals”——对所有 Web 体验都至关重要。此类核心用户体验需求包括页面内容的加载体验、交互性和视觉稳定性，并且这些共同构成了 2020 Core Web Vitals 的基础。文章源自联网快讯-https://x1995.cn/7760.html

Largest Contentful Paint 会测量感知的加载速度，并在页面的主要内容可能已加载时标记页面加载时间轴中的点。
First Input Delay 可测量响应度，并量化用户在首次尝试与页面进行交互时的体验。
Cumulative Layout Shift 可衡量视觉稳定性，并量化可见页面内容的意外布局移位量。

Origin trials文章源自联网快讯-https://x1995.cn/7760.html

用 measureMemory()测量内存文章源自联网快讯-https://x1995.cn/7760.html

performance.measureMemory() 是一个新的 API，可用于测量页面的内存使用情况并检测内存泄漏。文章源自联网快讯-https://x1995.cn/7760.html

更新原生文件系统 API文章源自联网快讯-https://x1995.cn/7760.html

原生文件系统（Native File System）API 在 Chrome 83 中启动了一项新的源程序试用版，该版本支持可写流，并且可以保存文件句柄。文章源自联网快讯-https://x1995.cn/7760.html

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.
}