浏览器文本输入字段中漏洞的分析表明，大型企业和政府机构网站的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。