所在位置：首頁 — IT資訊 — 谷歌

谷歌 Chrome 83 穩(wěn)定版正式發(fā)布：新跨域政策、表單控件，改進(jìn) Web 體驗(yàn)

作者：系統(tǒng)天地日期：2020-05-22

Chrome 83 穩(wěn)定版發(fā)布了，以下是最主要的更新內(nèi)容：

可信類型（Trusted types），有助于防止跨站點(diǎn)腳本漏洞
新的表單元素
新的跨域政策
引入 Web Vitals 計(jì)劃
檢測內(nèi)存泄漏的新方法

可信類型（Trusted types）

基于 DOM 的跨站點(diǎn)腳本（DOM XSS）是最常見的 Web 安全漏洞之一。可信類型（Trusted types）可以幫助防止此類漏洞，因?yàn)樗鼈儠竽阍趯?shù)據(jù)傳遞給潛在的危險(xiǎn)之前對其進(jìn)行處理。

以 innerHTML 為例，如果啟用了可信類型，那么如果嘗試傳遞一個(gè)字符串，它將拋出一個(gè) TypeError，因?yàn)闉g覽器不知道它是否可以信任該字符串。

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

相替代地，需要使用諸如 textContent 之類的安全函數(shù)，傳入可信類型，或者創(chuàng)建該元素并使用appendChild()。

// Use a safe functionelem.textContent = ''; // OK// Pass in a trusted typeimport DOMPurify from 'dompurify';const str = `Hello, world!`;elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});// Create an elementconst img = document.createElement('img');img.src = 'xyz.jpg';elem.appendChild(img);

更新表單控件

Chrome 和 Edge 進(jìn)行了合作，以改善 HTML 表單控件的外觀和功能。下圖顯示了 Chrome 中某些控件的新舊版本對比（左舊右新）。

谷歌 Chrome 83 穩(wěn)定版正式發(fā)布：新跨域政策、表單控件，改進(jìn) Web 體驗(yàn)

除了新的視覺風(fēng)格之外，微軟還提供了更好的觸摸支持和輔助功能，同時(shí)改進(jìn)了鍵盤支持。

谷歌 Chrome 83 穩(wěn)定版正式發(fā)布：新跨域政策、表單控件，改進(jìn) Web 體驗(yàn)

新的跨域政策

一些 Web API 會增加諸如 Spectre 之類的旁道攻擊的風(fēng)險(xiǎn)。為了減輕這種風(fēng)險(xiǎn)，Chrome 提供了一個(gè)基于選擇加入的隔離環(huán)境，稱為跨域隔離。這是通過兩個(gè)新的 HTTP 標(biāo)頭完成的： Cross-Origin-Embedder-Policy
和 Cross-Origin-Opener-Policy。使用這些標(biāo)頭，網(wǎng)頁可以安全地使用特權(quán)功能，包括：

Performance.measureMemory()
JS Self-Profiling API

跨域隔離狀態(tài)還可以防止對document.domain進(jìn)行修改。

Web vitals

有這樣一組常見的信號——“Core Web Vitals”——對所有 Web 體驗(yàn)都至關(guān)重要。此類核心用戶體驗(yàn)需求包括頁面內(nèi)容的加載體驗(yàn)、交互性和視覺穩(wěn)定性，并且這些共同構(gòu)成了 2020 Core Web Vitals 的基礎(chǔ)。

谷歌 Chrome 83 穩(wěn)定版正式發(fā)布：新跨域政策、表單控件，改進(jìn) Web 體驗(yàn)

Largest Contentful Paint 會測量感知的加載速度，并在頁面的主要內(nèi)容可能已加載時(shí)標(biāo)記頁面加載時(shí)間軸中的點(diǎn)。
First Input Delay 可測量響應(yīng)度，并量化用戶在首次嘗試與頁面進(jìn)行交互時(shí)的體驗(yàn)。
Cumulative Layout Shift 可衡量視覺穩(wěn)定性，并量化可見頁面內(nèi)容的意外布局移位量。

Origin trials

用 measureMemory()測量內(nèi)存

performance.measureMemory() 是一個(gè)新的 API，可用于測量頁面的內(nèi)存使用情況并檢測內(nèi)存泄漏。

更新原生文件系統(tǒng) API

原生文件系統(tǒng)（Native File System）API 在 Chrome 83 中啟動(dòng)了一項(xiàng)新的源程序試用版，該版本支持可寫流，并且可以保存文件句柄。

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

可寫流使寫入文件變得更加容易，并且可以輕松地將響應(yīng)從一個(gè)流傳輸?shù)搅硪粋€(gè)流。

將文件句柄保存到 IndexedDB 允許用戶存儲狀態(tài)或記住用戶正在處理哪些文件。例如，保留最近編輯的文件列表、打開用戶正在使用的最后一個(gè)文件等等。

其他