Chrome 83 現已推出穩定版。
以下是一些注意事項:
- 信任類型有助於防範跨網站指令碼攻擊安全漏洞。
- 表單元素具有重要的「改變」。
- 提供偵測記憶體流失的新方法。
- 原生檔案系統 API 會開始新的來源試用並新增功能。
- YouTube 推出新的跨來源政策
- 我們推出了網站體驗指標計畫,提供統整過的品質信號指南,說明我們認為這些信號對於在網路上提供優質使用者體驗至關重要。
- 以及其他方式。
我是 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 表單控制項,而這些控制項是與網頁主要互動的關鍵。不僅易於使用、內建無障礙功能,使用者也熟悉這些工具。在各瀏覽器和作業系統中,表單控制項的樣式可能不一致。我們經常必須傳送多項 CSS 規則, 才能確保不同裝置的外觀一致。
Microsoft 致力於翻新表單控制項的外觀,我真的覺得十分驚訝。除了精美的視覺風格外,這些機型也提供更優異的觸控支援和更優質的無障礙功能,包括更完善的鍵盤支援!
新的表單控制項已納入 Microsoft Edge,目前可在 Chrome 83 版中使用。詳情請參閱 Chromium 網誌上的「表單控制項與焦點更新」。
來源試用
使用 measureMemory()
測量記憶體
在 Chrome 83 版中開始來源試用,performance.measureMemory()
是一項新的 API,可讓您測量網頁的記憶體用量,並偵測記憶體流失情形。
記憶體流失很容易引入:
- 忘記取消註冊事件監聽器
- 從 iframe 擷取物件
- 不關閉工作站
- 累積陣列中的物件
- 諸如此類
記憶體流失情形會導致網頁顯示速度緩慢,並會對使用者造成疲乏。
if (performance.measureMemory) {
try {
const result = await performance.measureMemory();
console.log(result);
} catch (err) {
console.error(err);
}
}
請前往 web.dev 查看使用 measureMemory()
監控網頁的記憶體總用量,瞭解新 API 的所有詳細資料。
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 可讓您儲存狀態,或記住使用者正在處理的檔案。例如,保留最近編輯的檔案清單、開啟使用者正在處理的最後一個檔案等。
您需要新的來源試用權杖才能使用這些功能,請查看我更新的「Native File System API:簡化 web.dev 上的本機檔案存取權」一文,同時提供所有詳細資料,以及如何取得新的來源試用權杖。
其他來源試用
請查看來源試用的完整功能清單。
新增跨來源政策
有些網路 API 會增加 Spectre 等旁路攻擊的風險。為降低風險,瀏覽器提供了選擇跨來源隔離的選擇式獨立環境。跨來源隔離狀態也會防止 document.domain
修改。藉由修改 document.domain
,您可以允許相同站台文件之間的通訊,而且已視為相同來源政策的漏洞。
請參閱 Eiji 的文章:使用 COOP 和 COEP 將網站「跨源隔離」。
網站體驗指標
評估使用者體驗品質有很多面向,雖然使用者體驗的某些面向是網站和情境,但還有一組通用信號 (「網站體驗核心指標」) 對所有網路體驗來說至關重要。這類核心使用者體驗需求包括網頁內容的載入體驗、互動性和視覺穩定性。這些需求是 2020 年網站體驗核心指標的基礎。
- 「最大內容繪製」會評估系統感知的載入速度,並標記網頁主要內容可能已載入的時間點。
- 「首次輸入延遲時間」會評估回應速度,並量化使用者第一次與網頁互動時獲得的體驗。
- 「累計版面配置位移」可評估視覺穩定性,並量化可見網頁內容的非預期版面配置位移量。
這些指標都會擷取以使用者為中心的重要結果,可實際評估欄位,並支援研究室診斷指標對等項目和工具。舉例來說,雖然「最大內容繪製」是頂層載入指標,但也會高度依賴首次顯示內容繪製 (FCP) 和第一個位元組時間 (TTFB),而這仍是監控和改善的關鍵。
詳情請參閱 Chromium 網誌上的「網站體驗指標簡介:網站健康狀態的重要指標」一文。
其他更新
- Chrome 現已支援 Barcode Detection API,能讓您偵測及解碼條碼。
- 新的 CSS
@supports
函式可偵測 CSS 選取器的功能。 - 新的 ARIA 註解支援螢幕閱讀器的無障礙功能,包括透過螢幕閱讀器朗讀註解、建議和醒目顯示語意含義的文字 (與
<mark>
相似)。 prefers-color-scheme
媒體查詢可讓作者支援自己的深色主題,以便完全控管自己建構的體驗。- JavaScript 現在支援共用 worker 中的模組。
想知道未來將推出哪些產品嗎?請查看 Fugu API 追蹤工具,瞭解如何查看!
其他資訊
這份文件僅涵蓋部分重點功能。請查看下方連結,瞭解 Chrome 83 版的其他異動。
- Chrome 開發人員工具的新功能 (83)
- Chrome 83 淘汰和移除
- ChromeStatus.com 為 Chrome 83 更新
- Chrome 83 版 JavaScript 新功能
- Chromium 來源存放區變更清單
訂閱
想要隨時掌握最新影片,並訂閱我們的 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage,「需要」剪髮。Chrome 84 版本推出後,我會馬上說明 Chrome 的新功能!