在第一次登陆网站的时候,浏览器常常会弹出提示框,询问你是否要保存此密码。这个功能十分方便——保存后下次再登陆这个网站的时候,就无需重新输入密码,浏览器会自动帮你填写登陆表单。但是,浏览器保存的密码安全吗?

答案是不安全。本文将以 Google Chrome 为例,介绍四种查看浏览器保存密码的方法。需要注意的是,这并不是什么安全漏洞,而是浏览器对保存密码功能的实现方式就是如此。

方法一:正规方法

这个没什么好讲的,是浏览器本身提供的功能。以 Chrome 为例,其他浏览器大致类似。

依次进入【设置】-【密码和表单】-【管理密码】。在【已保存的密码】一栏便可以查看了。当然,你需要验证操作系统账户后才能查看已保存的密码。

方法二:修改表单属性

讲解这个方法前,首先说明一下表单中密码只显示圆点或者星号的原理。非常简单:是因为这个输入表单有一个 HTML 属性是 type="password",浏览器在渲染此表单时,就会将该字段内容显示为圆点或星号。若要查看表单中的内容,只需要修改或绕过这个属性就行了。

1.在密码框内点击鼠标右键,选择【检查】(或【审查元素】),打开开发者工具。
2.弹出的开发者工具窗口中应该已经默认选中了当前表单,一般是以 <input> 开头的一行 HTML,在其中找到 type="password" 属性,将其改为 type="text" 或者直接删除这一属性,然后回车确定。

3.密码已经显示在原先的输入框了。效果图如下:

方法三:使用 $0.value

该方法不修改表单,而是直接通过开发者工具查看元素的值。注明:下面的$0代表“当前选中的元素”,在前端开发中常用。
1.同方法二第 1 步,在密码框内点击右键,选择“检查”。
2.在开发者工具窗口中点击【Console】(或【控制台】)。
3.输入以下命令并回车:

$0.value

4.密码显示在控制台中。

注意:使用此方法时务必确认你的确是在密码框内点击右键进入控制台的,否则可能会提示 undefined 错误。

方法四:执行 JavaScript

这个方法与方法二原理相同,只是将手动修改属性换成了执行 JavaScript 代码而已。

可以使用以下两种方式中的任意一种来执行 JavaScript 代码。

1.打开已经保存密码的页面,然后在浏览器地址栏输入以下代码,直接回车执行。需要注意,将代码粘贴至地址栏时,浏览器可能会自动抹去前面的 javascript: 前缀,请自行补上。

javascript:if(confirm('是否显示密码?')){document.querySelectorAll('[type=password]').forEach(f=>f.type='text')};

2.在【Console】控制台中输入上面的代码,然后按下回车。(打开控制台参见上方方法三)

写在后面

如果将方法一和后面三个方法结合,先在设置中查看浏览器保存了哪些网站的密码,然后再通过后面三种方法进入网站中并获取密码,就可以查看到浏览器已经保存的全部密码了。

本文是技术分享,请勿用于非法用途。