Chrome 83 穩定版釋出：新的跨域政策、表單控制元件，和改進的 Web 體驗

Chrome 83 穩定版釋出了，以下是最主要的更新內容：

• 可信型別（Trusted types），有助於防止跨站點指令碼漏洞
• 新的表單元素
• 新的跨域政策
• 引入 Web Vitals 計劃
• 檢測記憶體洩漏的新方法

可信型別（Trusted types）

基於 DOM 的跨站點指令碼（DOM XSS）是最常見的 Web 安全漏洞之一。可信型別（Trusted types）可以幫助防止此類漏洞，因為它們會要求你在將資料傳遞給潛在的危險之前對其進行處理。

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

更新表單控制元件

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

除了新的視覺風格之外，微軟還提供了更好的觸控支援和輔助功能，同時改進了鍵盤支援。

新的跨域政策

一些 Web API 會增加諸如 Spectre 之類的旁道攻擊的風險。為了減輕這種風險，Chrome 提供了一個基於選擇加入的隔離環境，稱為跨域隔離。這是透過兩個新的 HTTP 標頭完成的： Cross-Origin-Embedder-Policy
和 Cross-Origin-Opener-Policy。使用這些標頭，網頁可以安全地使用特權功能，包括：

• Performance.measureMemory()
• JS Self-Profiling API

跨域隔離狀態還可以防止對document.domain進行修改。

Web vitals

有這樣一組常見的訊號——“Core Web Vitals”——對所有 Web 體驗都至關重要。此類核心使用者體驗需求包括頁面內容的載入體驗、互動性和視覺穩定性，並且這些共同構成了 2020 Core Web Vitals 的基礎。

• Largest Contentful Paint 會測量感知的載入速度，並在頁面的主要內容可能已載入時標記頁面載入時間軸中的點。
• First Input Delay 可測量響應度，並量化使用者在首次嘗試與頁面進行互動時的體驗。
• Cumulative Layout Shift 可衡量視覺穩定性，並量化可見頁面內容的意外佈局移位量。

Origin trials

用 measureMemory()測量記憶體

performance.measureMemory() 是一個新的 API，可用於測量頁面的記憶體使用情況並檢測記憶體洩漏。

更新原生檔案系統 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 允許使用者儲存狀態或記住使用者正在處理哪些檔案。例如，保留最近編輯的檔案列表、開啟使用者正在使用的最後一個檔案等等。

其他

• Chrome 現在支援條形碼檢測 API，該 API 提供了檢測和解碼條形碼的功能。
• 新的 CSS @supports 函式為 CSS 選擇器提供功能檢測。
• 新的 ARIA 註釋支援螢幕閱讀器可訪問帶有語義（類似於<mark>的語義）的註釋、建議和文字高亮。
• Preferreds-Color-Scheme 媒體查詢使作者能夠選擇自己的深色主題，他們可以完全控制自己構建的體驗。
• JavaScript 現在支援共享工作程式中的模組。

詳情可查閱：https://developers.google.com/web/updates/2020/05/nic83