瀏覽器文本輸入字段中漏洞的分析表明，大型企業和政府機構網站的HTML源代碼中保存了明文密碼。發現該問題的專家報告說，他們創建了一個測試擴展程序，可以提取敏感數據并將其輕松上傳到Chrome網上應用店。

[2308.16321] Exposing and Addressing Security Vulnerabilities in Browser Text Input Fields

https://arxiv.org/abs/2308.16321

Chrome extensions can steal plaintext passwords from websites

https://www.bleepingcomputer.com/news/security/chrome-extensions-can-steal-plaintext-passwords-from-websites/

威斯康星大學麥迪遜分校的Asmitt Nayak及其同事在預印本服務器arXiv上發表的一篇論文中指出，“我們發現支撐瀏覽器擴展功能的粗粒度權限管理模型違背了最小權限原則和完全中介原則。”，并指出不必要的許可請求以及Chrome等瀏覽器缺乏徹底的安全執法導致了漏洞。

根據研究團隊的說法，這次發現的錯誤是由于擴展程序訪問網頁內部代碼的方式造成的。 許多站點都使用一種稱為文檔對象模型 （DOM） 的機制，該機制允許您以編程方式操作用 HTML 等編寫的文檔，但由于擴展可以無限制地訪問此 DOM 樹的問題， 研究小組解釋說，源代碼中的敏感數據可以很容易地提取出來。

Google 于 2023 年在 Chrome 中引入了一個名為“Manifest V3”的規范，該規范嚴格限制了擴展程序可以訪問的信息類型，但 Manifest V3 并沒有解決這個問題，因為它沒有在擴展程序和網頁之間創建安全邊界。

為了測試Chrome網上應用店檢查擴展程序的能力，研究小組上傳了一個概念驗證擴展程序，假裝是基于GPT的助手。 此擴展具有在閱讀HTML源代碼后提取用戶輸入的密碼的功能，但它顯然不包含惡意代碼，并且也符合Manifest V3，因此毫無問題地通過了審核并獲得批準。 研究小組將擴展設置為“非公開”以防止任何傷害，并在批準后立即將其刪除。

研究小組發現了190個可以直接訪問密碼輸入字段的擴展功能程序，其中也有下載數超過10萬次的人氣擴展功能程序。另外，擁有惡意利用該漏洞權限的擴展功能程序占全體的12.5%，約有1萬7300個。

更嚴重的是，研究人員發現，許多網站，包括擁有大量用戶的大型和政府網站，都以純文本格式存儲用戶的密碼。

發現問題的主要站點如下。

?亞馬遜（amazon.com）：包含安全代碼的信用卡信息和郵政編碼在頁面的源代碼上以明文形式顯示

·Gmail（gmail.com）：在HTML源代碼上保存了明文密碼

?Cloudflare（Cloudflare.com）：同上

?Facebook（facebook.com）：可通過DOM API提取用戶輸入

?花旗銀行（citibank.com）：同上

?美國國內稅收廳（irs.gov）：社會保障號碼（SSN）在網頁的源代碼上以明文形式顯示

下面顯示了登錄ID和密碼的實際提取方式。

“谷歌和亞馬遜等主要在線市場尚未對信用卡輸入字段實施任何保護，鑒于這些網站的規模和交易量，這些網站不受保護尤其令人擔憂，”研究小組在論文中寫道。

亞馬遜發言人在回應這一聲明時表示，“我們鼓勵瀏覽器和擴展程序開發人員利用安全最佳實踐來進一步保護使用其服務的客戶。” 谷歌發言人也表示，他們正在調查這個問題。

谷歌正在推出一項功能，當Chrome中安裝的擴展程序從網上商店中刪除或被發現包含惡意軟件時，它會警告用戶。 此功能將在Chrome 117中正式實現，但據IT新聞網站BleepingComputer報道，最新的Chrome 116可以通過在地址欄中輸入“chrome://flags/#safety-check-extensions”來激活這個功能。

前端 JavaScript 中，存儲數據的方式主要有以下幾種：

Cookie

Cookie 是一種客戶端存儲技術，用于在瀏覽器中存儲少量文本信息。它們通常用于保存用戶會話信息（如登錄狀態）或跟蹤用戶行為。Cookie 的大小限制在 4KB 左右，它們的生命周期可以是會話期間或者固定的過期時間。請注意，Cookie 可能會受到跨站腳本（XSS）和跨站點請求偽造（CSRF）等安全問題的影響。

Web Storage

Web Storage 是 HTML5 引入的一種客戶端存儲技術，它包括兩種形式：

• Local Storage：Local Storage 是一種持久性的客戶端存儲方法，允許在瀏覽器中存儲較大量的鍵值對數據（通常限制在 5-10MB）。Local Storage 數據會一直保留，除非用戶或開發者主動清除。它常用于保存用戶偏好設置、狀態信息等。
• Session Storage：Session Storage 類似于 Local Storage，但它是臨時性的。Session Storage 的數據在用戶關閉瀏覽器標簽或窗口時會被刪除。它常用于存儲與單個會話相關的信息，如購物車內容或頁面狀態。

IndexedDB

IndexedDB 是一種客戶端數據庫存儲技術，允許在瀏覽器中存儲大量結構化數據（通常限制在 50-250MB，但可擴展）。IndexedDB 支持事務、鍵值對存儲和索引查詢等功能，適用于離線應用、緩存數據或同步本地和遠程數據。

Cache API

Cache API 是一種在瀏覽器中緩存網絡資源（如請求、響應等）的技術，通常與 Service Worker 配合使用。它可用于構建離線應用、加速頁面加載速度或減少服務器負載。Cache API 支持存儲多個不同的緩存，并允許通過 URL 或請求屬性進行查詢。

內存

JavaScript 變量和對象在內存中進行存儲。這種存儲方式只在頁面生命周期內有效，當頁面刷新或關閉時，內存中的數據將被清除。內存存儲適用于臨時數據、中間結果或緩存數據。

文件系統

部分瀏覽器（如 Chrome）提供了訪問沙盒文件系統的 API，允許在瀏覽器中存儲和操作文件。這種存儲方式適用于處理大文件、離線數據或本地緩存。

以上就是前端 JavaScript 中常見的數據存儲方式。在實際應用中，可以根據需要選擇合適的存儲技術來滿足不同的需求。以下是一些建議，可以幫助您根據應用場景選擇合適的數據存儲方式：

1. 如果您需要存儲用戶會話信息或跟蹤用戶行為，可以考慮使用 Cookie。但請注意 Cookie 的安全問題，并采取適當的防護措施。
2. 當您需要在客戶端存儲較大量的數據（例如，用戶偏好設置、離線數據等），且不需要與服務器交互時，可以選擇 Local Storage 或 Session Storage。Local Storage 適用于需要持久保存的數據，而 Session Storage 適用于臨時保存的數據。
3. 如果您的應用需要處理大量的結構化數據，可以考慮使用 IndexedDB。這種數據庫存儲方式適用于離線應用、緩存數據或實現本地與遠程數據的同步。
4. 當您需要緩存網絡資源以提高頁面加載速度、減少服務器負載或構建離線應用時，可以使用 Cache API。這種存儲方式與 Service Worker 配合使用效果最佳。
5. 對于臨時數據、中間結果或緩存數據，可以直接使用 JavaScript 變量和對象進行內存存儲。但請注意，這種方式的數據在頁面刷新或關閉時會被清除。
6. 如果您的應用需要處理大文件或訪問本地文件系統，可以考慮使用文件系統 API。但請注意，這種存儲方式可能受到瀏覽器支持的限制。

在實際開發過程中，您可能需要根據應用的具體需求和瀏覽器支持情況，靈活選擇和組合上述數據存儲方式。同時，務必關注數據安全和隱私問題，確保用戶數據的安全性和合規性。

ebStorage的目的是克服由cookie所帶來的一些限制，當數據需要被嚴格控制在客戶端時，不需要持續的將數據發回服務器。

WebStorage兩個主要目標：

（1）提供一種在cookie之外存儲會話數據的路徑。

（2）提供一種存儲大量可以跨會話存在的數據的機制。

web存儲更加安全與快速，這些數據還不會保存到服務器，還可以存儲大量數據而不影響網站性能。

web 存儲類型

1. localStorage - 用于長久保存數據，沒有有效期，直到手動清除。
2. sessionStorage - 臨時保存當前窗口的數據，窗口關閉之后自動清除。

不管是 localStorage 還是 sessionStorage 使用方法都是一樣的語法，對常見操作語法進行示范。以下就以localStorage為例：

常見操作語法：

• 保存數據：

localStorage.key = value

localStorage.setItem(key,value)

• 獲取數據

localStorage.key

localStorage.getItem(key)

• 刪除單個數據：

localStorage.removeItem(key)

delete localStorage.key

• 刪除全部：localStorage.clear()
• 獲取某個索引的鍵值：localStorage.key(index)

數據都是以鍵值對形式存在的，操作的時候與json有點類似。

web存儲數據應用

應用1：取出本地存儲的所有數據，以localStorage為例。

localStorage和sessionStorage是兩個對象，類似json。可遍歷取出數據，如：

localStorage.user = "倩倩"
localStorage.age = "18"
localStorage.job = "打雜"
console.log(localStorage)// {job: "打雜", age: "18", user: "倩倩", length: 3}
for(key in localStorage){
 console.log(`${key}--${localStorage[key]}`)
}

運行程序之后，結果如圖：

我們發現遍歷的時候把localStorage的屬性和方法全部打印出來了，而我們需要的只是我們存儲的三個數據，其余的都不要，此時我們換個方法。

localStorage.user = "倩倩"
localStorage.age = "18"
localStorage.job = "打雜"
console.log(localStorage)// {job: "打雜", age: "18", user: "倩倩", length: 3}
for(let i=0;i<localStorage.length;i++){
 let key = localStorage.key(i)
 console.log(`${key}:${localStorage[key]}`)
}

此時運行結果就是我們需要的結果了！

記住用戶登錄信息、存草稿、存郵件等經常會使用 localStorage，我們介紹下幾種存儲方式的區別，可以更好地根據需求選擇存儲方式。

幾種存儲方式區別

cookies 和 sessionStorage、localStorage區別如圖：

上述看三者存儲大小有很大差異，存儲內容上也不同，cookie只能保存字符串類型，但sessionStorage和localStorage能夠支持任何類型的對象存儲。如果保存復雜json數據時，可以轉成字符串保存，取出時通過JSON.parse()轉成json格式。

安全性方面，web 存儲不會發送到服務器端，不用擔心被截獲，所以相對cookie安全些。

實例：網頁中寫信，自動保存草稿，網頁關閉重新打開之后數據依舊存在。

<textarea name="" id="email" cols="30" rows="10" oninput="save()"></textarea>
<script>
 function save(){
  var x = document.getElementById("email")
  localStorage.setItem('email',x.value)
 }
 window.onload =function(){
  var x = document.getElementById("email")
  x.value = localStorage.getItem("email")
 }
</script>

注意：如果你是直接使用瀏覽器打開html文件，此時發現并不會存儲，需要聲明下存儲是針對域的，所以我們需要放到服務內，服務內訪問才可以進行緩存。

需要的同學自己去下載個nginx。