Chrome 83穩定版發布:新的跨域政策、表單控件,改進Web 體驗
Chrome 83 穩定版發布了,以下是最主要的更新內容:
● 可信類型(Trusted types),有助於防止跨站點腳本漏洞
● 新的表單元素
● 新的跨域政策
● 引入Web Vitals 計劃
● 檢測內存洩漏的新方法
可信類型(Trusted types)
基於DOM 的跨站點腳本(DOM XSS)是最常見的Web 安全漏洞之一。可信類型(Trusted types)可以幫助防止此類漏洞,因為它們會要求你在將數據傳遞給潛在的危險之前對其進行處理。
以 innerHTML
為例,如果啟用了可信類型,那麼如果嘗試傳遞一個字符串,它將拋出一個TypeError,因為瀏覽器不知道它是否可以信任該字符串。
// Trusted types turned onconst elem = document.getElementById('myDiv');elem.innerHTML = `Hello, world!`;// Will throw a TypeError
相替代地,需要使用諸如 textContent
之類的安全函數,傳入可信類型,或者創建該元素並使用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 進行了合作,以改善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