熟悉小黑的小伙伴多半知道，小黑做事特别注重效率，常常通过软件工具提高工作便捷度。然而，小黑最近却意外翻车了。

这是发生在谷歌Chrome浏览器中的“不幸”事故：小黑平时有个习惯，喜欢在谷歌浏览器上保存密码，这样在打开网站就不用输入密码，系统会自动填充密码。由于每次注册一个账号，都会在谷歌Chrome浏览器上“记住”密码，久而久之小黑在浏览器上已经保存了94个密码。

▲自动填充密码

本来，“记住密码”功能并没有什么大碍，直到一次偶然的机会，小黑突然发现自己有5个密码已遭泄露。在温暖的空调房里，小黑吓出一身冷汗，要知道小黑在浏览器里保存了大量隐私信息，密码一旦泄露，后果不堪设想。

▲密码泄露

在仔细检查泄露密码时，小黑发现5个网站泄露的密码都是同一个，暂时还没有重大隐私消息泄露。

▲泄露的都是同样的密码

经历密码泄露事故之后，小黑决定好好检查一下谷歌浏览器的密码，结果再次惊出一身冷汗。想知道小黑保存的账号密码，不需要复杂的黑客技术，不需要外接破解工具，只需要知道开机密码即可。

进入设置，查看 “密码”项目，点击 账号左边的“眼睛”按钮，系统会自动弹出一个窗口，请求输入电脑开机密码，输完之后所有的账号密码都能一键查看。也就是说，任何人只要知道开机密码，都能在本人不在的情况下查看已保存的密码。

原本，小黑以为Chrome浏览器会将密码保存在云端，想尽办法层层保护，没想到Chrome浏览器密码保护如同纸糊的窗纸，一捅就破。一气之下，小黑下载了猎豹浏览器跟360浏览器，想看看这些竞品跟Chrome浏览器在密码保护上有何不同！

浏览器密码保护，没一个能打的

打开电脑中的猎豹浏览器，密码功能与Chrome浏览器大不相同。不需要在“设置”中苦苦寻找，点击浏览器右上角“锁钥”按钮，就可以直接打开猎豹安全账户管家。

点进去一看，只见小黑保存的账号一行行排列在页面中。点击单个账号，可以选择查看密码、编辑、删除等操作。在密码保护层面，猎豹浏览器比Chrome浏览器稍强，它有一个用户安全锁，需要输入正确的解锁图案才能查看密码。

小黑找同事尝试了一下，在不知道小黑解锁密码的情况下，同事花了五六分钟也解不开账号安全锁。

在安全锁界面，小黑还注意到有个重置安全锁功能。记得两三年前猎豹浏览器爆出一个bug，在不需要输入任何身份验证信息的情况下就可以重置安全锁。今天小黑又尝试了一下，发现bug已经修复，用户只有输入账户名称与密码才能实现重置安全锁。总之，在密码保护层面，猎豹浏览器确实做得还行。

再看360浏览器，小黑此前没有使用过这款产品，为了测试密码自动填充功能，特意登录微博保存账号密码。360浏览器在记住密码时会自动弹出一个选项，用户可以自由选择保存密码或者不再提示。

360浏览器密码管理功能藏得比较深，小黑在设置、用户中心里都没找到，最后在右上角管理按钮中发现，登录管家与截图、翻译等功能并列，属于浏览器附加功能。

在密码保护上，360浏览器并不提供查看密码功能，只能添加、管理账号，除了用户本人以外，其他人根本无法得知账号密码。

从谷歌Chrome浏览器、猎豹浏览器再到360浏览器，密码保护一个比一个严密。不管现在远不能说浏览器密码很安全，因为以上这些只能在物理层面防止身边的人窃取密码。事实上，身边亲人朋友很少会主动窃取账号密码，密码泄露一般都是由于病毒或黑客攻击。

▲XSS 测试工具

小黑咨询了一位从事软件开发的朋友H君，他告诉小黑：“这种浏览器密码太好破解了，通过跨站脚本攻击就能搞定。浏览器记住密码机制与表单自动填充一样，攻击者可以在自己的域放一个页面，你的浏览器访问后，会自动填充这个页面的表单，比如Email、家庭地址、手机号等等，然后这个页面的就可以获取到这些值了。”

▲测试页面

H君还告诉小黑：“普通的病毒木马通过提高安全意识，安装杀毒软件就能解决，但是这种密码自动填充都是明文密码，杀毒软件也帮不了。”

▲解析JS 脚本

预防小技巧：如何关闭自动填充

既然浏览器自动填充密码这么不安全，那我们就要想办法去解决。最简单直接的办法就是关闭自动填充，在Chrome浏览器地址栏输入“chrome:///”即可进入管理界面，点击关闭提示自动保存密码与自动登录功能。

▲Chrome浏览器关闭提示保存密码

接着，可以将已经保存的密码一个个删除，这样就能保证密码万无一失。删除密码虽好，但是小黑将近100个网站密码，一时间根本记不住。好在小黑即使发现浏览器有密码导出功能，可以一键将所有密码导出到桌面，保存为csv 表格格式。以后，虽然在输入网站密码时麻烦不少，可总算可以保证密码不会丢失。

▲谷歌Chrome浏览器可以导出密码

在删除密码时，小黑还总结出一些经验，在部分涉及隐私与工作相关的账号，小黑选择删除自动填充密码，在其他无关紧要的网站，比如虎嗅、36氪、IT之家这些科技娱乐类网站，小黑还是选择自动记住密码，只不过将密码改成平时不常用的罢了。

▲猎豹浏览器关闭选项

Chrome浏览器可以轻松关闭密码自动填充功能，猎豹与360浏览器也不难。猎豹在安全锁管理页面可以选择关闭提示保存账号密码功能，360浏览器也可以在高级设置里停止勾选开启弹条提示保存账号密码。不过在导出密码方面，小黑在两个浏览器中均没有发现这项功能，好在小黑在猎豹、360浏览器上的密码都有备份，暂时不需要导出功能。若是将这两个浏览器作为主力浏览器的小伙伴，估计要费一番功夫用来找回、导出密码了。

▲360浏览器关闭选项

安全的密码管理器

正所谓鱼和熊掌不可兼得，在关闭自动填充密码半天后，小黑就切身体会到不方便之处。每次登录一些常用网站，都需要频繁输入密码，简直愁死人。而且，小黑还意识到一个问题，就是小黑在导出密码之后，为了方便直接放置密码文档在桌面上。如此一来，密码安全不是更得不到保障吗？

▲表格明文密码更加不安全

对此，小黑的解决方案是使用密码管理器。目前市场上有很多密码管理器，其中 最为著名。这款软件工具在 2006 年起就开始提供密码管理服务，支持多个主流移动和电脑端平台，主要提供生成高强度密码、自动填充以及密码文件同步的功能。

▲需要付费

可惜，在国内并不能有效发挥其实力。首先它是付费应用，每个月需要支付2.99美元，其次它的功能属性需要在国外才能发挥，比如自动填充密码功能，需要特殊条件才能实现。小黑正常上网，使用自动填充密码功能，结果只会显示“无法访问该网站”。

除了国外常用的密码保护网站，其实国内也有替代方案，比如花密。这款工具原理是通过原始密码生成新的密码，本身并不提供任何密码保存功能，也不需要付费。使用过程也非常简单，输入一个便于记忆的初始密码，在输入区分代号，系统自动生成复杂的16位密码，这样就避免因密码简单而被破解。

花密拥有网页版、MAC版、ios版等多终端，在Chrome浏览器上也有扩展程序。小黑首先尝试在网页版输入豆瓣密码“XXXXXX”（具体密码不能透露），再输入区分代号douban，结果显示一个复杂的密码。

接着通过Chrome浏览器扩展程序，在登录页面输入记忆密码区分代号，系统就自动填充了复杂的16位密码。

与花密这些密码管理器，通过一个主密码或密钥文件加密，数据库都是使用当今已知最安全的加密算法 AES 和 Twofish 来加密的。有了这些密码管理器的帮助，完全不用担心密码泄露问题。据小黑所知，其他类似密码管理器工具还有 、、Keeper、Enpass、KeePass，有兴趣的小伙伴可以一一尝试，从中找出最合适的密码。

密码设置小攻略

密码管理器可以有效提高安全性与便捷性，可这些管理器并不是万能的，也不是所有人都愿意使用密码管理器。如果我们的密码设置过于简单，还是非常容易被破解。2019 年 12 月，密码安全服务公司 发布了第 9 个年度最烂密码百强榜单，结果显示十分之一的用户都在使用极其简单的“通用密码”，比如123456、11111、qwerty等等。

▲傻瓜密码排名

使用如此简单的密码，自然很容易被破解，黑客甚至不需要使用复杂的工具，只需用上最简单的撞库软件，就能在几分钟之内迅速解出密码。因此，在密码设置时，我们也要非常小心，尽量注意不同账号之间的密码区别，切记不要将同一个密码反复使用。

▲密码长度与安全性

同时，鉴于密码管理器的经验，小黑意识到密码越长越好。小黑在一款测试密码安全性的网站中先后输入三种常用密码，第一种8位数，数字与字母结合；第二种十位数，比第一种多了四位字母；第三种十六位数，由数字、字母加符号组成。结果显示，密码安全等级会随着密码长度而增加，特别是第三种密码，安全等级甚至达到满分。因此，我们平时在设置密码时，最好是数字、字母与符号结合，尽可能将密码长度设置得长一点。这样，才能最大程度保证密码安全。

在这个互联网大发展的时代，APP、网站越来越多，几乎每个人都会注册几十个账号。出于方便，自动填充密码功能已经渐渐普及。无论是PC 浏览器还是手机浏览器，自动登录已经被大众所接受。但是不能为了图方便，就忽略了安全问题，小黑建议最好还是使用密码管理器，最大程度保证安全。即使不用密码管理器自动填充功能，也要使用加密功能，生成16位复杂密码，让自己的密码安全程度始终处于最高强度！

图源：Chrome、猎豹浏览器、360浏览器

推 荐 阅 读

QQ浏览器X5内核问题汇总

常常被人问及微信中使用的X5内核的问题，其实我也不是很清楚，只知道它是基于android 4.2的webkit，版本号是webkit 534。今天正好从X5团队拿到了一份问题汇总，梳理下发出来，给各位开发者以参考——不排除明天会删除这篇文章的可能。

1.Android WebView常见问题及解决方案汇总：

2.请问各位碰到过X5浏览器内，局部滑动使用iscroll卡顿的问题么？

回答：是使用 iscroll.js 这个JS去滚动么？如果只是为了产生滚动，建议使用 属性来，目前有一种滚动优化在线上版本效率不是太好，通过JS去改变CSS的属性产生滚动

3.调用：-webkit-filter: blur(10px);filter: blur(10px);在Android下 背景图没有blur掉，只是被单纯的放大而已

回答：-webkit-filter目前还不支持，可以先用图片替换的方式 后续版本会支持这个属性

4.是阴影效果吧，我们是想实现图片毛玻璃

回答：这个有用么

5.LBS相关，定位频繁失败

第一步，首先确认定位失败是个别站点原因还是所有站点定位都失败。如果是所有站点定位都不成功，很有可能是内核问题，转内核相关同学跟进调查定位逻辑是否有缺陷；如果是某个站点才会出现的问题，继续第二步排查，从站点源码着手。

第二步，找到站点请求定位的js代码段，检查获取定位信息函数的options字段，很有可能是 options 中 timeout 字段设置的超时太短导致，建议前端开发将该字段时间设置长一些（建议10s以上）或者不设置该字段。如果js没有设置 timeout 字段的情况下仍然定位不成功，则转内核同学调查内核流程。

ps：H5获取LBS信息的js接口

回答：

navigator.geolocation.getCurrentPosition(showPosition,showError,{  
    enableHighAccuracy:false，
    timeout:10*1000,
    maximumAge:0
});
navigator.geolocation.watchPosition(watchPosition,showError,options);  

：定位成功时回调；

：定位出错时回调；

options：可选的地理定位请求特征

：可选，是否开启高精度模式，参数默认值为 false

timeout：可选，单位为ms，浏览器需要在该时间段内完成定位，否则定位失败，默认值为 - - ，无穷大。如果该值设置较小，会有很高的定位失败率。

：可选，单位ms，重新计算位置的时间间隔。默认为0，即每次时时计算位置信息。

6.打开视频播放，后退视频仍然在播放

回答：部分机型，浏览页面时打开视频播放，点击返回，页面上的视频仍然在播放。解决办法是捕获后退事件，主动调用 () 方法，并且在该方法里将 里关联的view解除关联

7.请问一下微信浏览器的cookie清理机制是怎么样的？

回答：X5内核是不会清除的。

8.打开WWW页面，缩放显示的问题

回答： 使用webview打开www页面，如果页面被放大显示，确定有没有设置，.（true），默认为false，www页面不会被缩放显示的。手机QQ浏览器默认为true，显示www页面更美观

9.关于滚动时候动画的问题

回答：

页面滑动过程中动画不会被触发 页面滑动过程中动画会被停止 这个是X5内核为了做滚动优化而做的限制

10.关于 type定义的问题

回答：X5执行的标准比较老，

enum ConnectionType {  
UNKNOWN = 0,  
ETHERNET = 1,  
WIFI = 2,  
CELL_2G = 3,  
CELL_3G = 4,  
CELL_4G = 5,  

NONE = 6,  
};

11.出现网络正常，但是页面打不开的情况

回答：关于设置里面的云加速试下是否可以打开。

12.js阻塞和css阻塞的不同

回答：css是阻塞渲染过程，js阻塞解析过程！对于用户来说，没什么区别，都是空白的 js的执行时，如果js中有读写css的属性的代码，并且下载队列中有待加载的css，js执行会被阻塞掉。

13.cookie的4k限制

回答：浏览器端cookie的数量可能会超过4k，有http请求时，内核只取前4k的cookie数据！

14.Js Defer与把js放到html底部的区别

回答：js defer：先加载， 后执行。和js放到html底部类似。不同的就是html预扫描到会先加载

15.首屏显示后，为什么又会重排版

回答：浏览器的排版宽度受上层ui设置的webview宽度影响。如果webview没设置或者是设置成0，浏览器内核会用默认的排版宽度320px进行排版。此时若webview的宽度值被正常设置，计算出来的排版宽度不是320px（一般是360px），这样浏览器就要用360px宽度，对页面进行重排。

16.canvas的数量是不是有限制

回答：

小于等于1G内存手机，由于内存没办法精确统计，当达到75M以上，CANVAS数量最多支持20个

上面说的canvas内存，仅仅是说canvas 长宽计算出来的内存，不包括canavs使用的图片等资源内存

17.x5浏览器CSS3有些不支持,同样的样式，在chrome里能起到效果，在X5就没用。并且js性能也差的多,微信还内置X5，用起来太不爽

回答：是否方便具体说下是什么样的性能问题和css样式缺陷影响到您？我们这边可以跟进查看下原因。

X5内核也在不断改进，您的反馈可以帮助我们进一步优化。

chrome在标准的支持和性能优化方面确实目前走在业界前面，不过android系统的碎片化，android系统webview更是碎片化严重。

android系统上的web开发可能也需要考虑到不同rom的兼容情况。X5内核致力于为开发者提供统一的web体验，并通过不断的优化，来向业界标准对齐。

目前我们也在做基于内核的研究工作，后续在标准的支持和性能上会有进一步提高。

18.请问下x5中js调用android怎么实现？

回答：跟系统内核下一样，都借助 实现

19.请问一下，android手机微信上用的x5支持webgl吗？

回答：android手机中微信上的X5都是支持webgl的，不过部分机型上还有兼容性问题，由于兼容性问题，webgl之前我们是采用软绘的方式支持,目前切换到了硬绘，但整体来说还是会有兼容性和性能问题,后续这块还会持续更新

20.如果在某个设备第一次打开应用的时候 没有网络，x5内核可以启动吗？单网络恢复后还要再次认证，还是 不用在认证？

回答：第一次打开应用是不会拉起X5的 在第二次打开之后 不管有无网络都可以拉起

21.如果我不安装浏览器，安装微信，x5能调用起来吗?

回答：不能，只能安装QQ浏览器才能调用

22.web audio api是否已经支持？

回答：暂时还不支持

23.什么时候支持html5的和事件

回答：现在是支持html5的 和 事件的

24.要用X5的内核，必须要用QQ浏览器么？

回答：目前 SDK 版本是这样的，我们正在预研的版本，手机如果安装了微信或手Q ，其它 app 可以不依赖 QQ浏览器 而共享 x5 内核。

25.关于svg问题。

回答：关于SVG的问题：

关于svg模糊的问题，有2种情况：

直接访问一个.svg url的页面或者object，embed加入的svg， 出现模糊的问题

此问题已解决， qq浏览器5.8上已经修复， tbs下个版本也会修复 svg用作-image, 模糊这个问题是我们目前渲染机制导致不能兼容非标准写法： 在用svg作为-image的时候， 需要指定-size， 不然会模糊

关于svg支持情况： 在5.3之前的qq浏览器不支持svg， 我们会在后台把svg转成一张jpeg图片， 供浏览器显示，5.4及以上版本支持svg，如果遇到被转成图片的问题，需要升级浏览器版本。

26.请问flexbox近期会支持吗？

回答：flexbox我们正在做开发支持

27.x5内核 目前是独立运行的 还是需要安装ＱＱ浏览器？

回答：sdk是需要QQ浏览器的，微信手Q里的是不需要的

28.现在X5内核怎么调试？在微信或者手q或者qq浏览器中调试页面

回答：现在的微信手Q里面的X5还无法通过调试 后期我们会把带有调试的版本挂在开发者后台下载区 敬请期待

29.请问x5支持webgl的所有接口吗？能在所有版本的android机（4.0+)和ios机(5.0+)上运行webgl吗？

回答：webgl目前是支持的，不过部分机型上还有兼容性问题

30.X5上支持哪些扩展？支持多少个纹理单元？

回答：X5上只能支持：

WEBGL_lose_context  
EXT_texture_filter_anisotropic  
OES_texture_float  
OES_standard_derivatives  
OES_vertex_array_object  
WEBGL_debug_renderer_info  
WEBGL_debug_shaders  
WEBKIT_WEBGL_compressed_texture_s3tc  

而且这些是必须手机GPU有对应的扩展指令才行的。

关于纹理单元。我们这边没有限制

上面的扩展，也都是基本每一个对应opengl的一个扩展

支持多少纹理单元，也是从opengl查询得到的。

主要应该是看手机GPU支持到啥程度，我们是做个对接。

31.x5的文件分片功能解决了吗，blob = file.(start, stop),这样分片出来的blob用不了啊。

回答：分片问题这边已经定位处理，浏览器会在5.8版本修复

32.手机qq浏览器是否有调试工具呢？

回答：有的，。

33.请问现在微信调用的手机QQ浏览器支持 吗？

回答：支持 ，暂不支持wss，不支持webrtc

34.有计划支持webRTC吗？

回答：这个我们后续会评估的。

35.我是HTML5游戏开发者，制作中的H5游戏需要有音乐音效。但是我在android机器上使用QQ浏览器出现了如下问题：

循环播放BGM时，如果同时播放音效，BGM会被强行暂停 多个音效同时播放时，会出现明显的无法忍受的延迟和播放失败 这个问题在同一台机器的微信上同样存在，但是同一台机器的chrome没有这个问题。

我能想到的最合理的解释是：X5内核同一时间只能播放一个音频通道。

希望官方能解答我的疑惑和遇到的问题，谢谢。

PS：

回答：播放音效需要获取声音输出焦点，目前只支持同时播放一个音效 您提的需求我们会讨论评估后期是否能有方案现

36.播放音效时，为啥会把我后台的BGM播放给暂停掉？

回答：播放声音时当前音频需要获取 ，系统在丢失时会通知其它音频播放软件，这个暂停应该是播放软件自身的行为，我们本身并没有暂停后台音频，只是向系统申请了

37.300ms延迟是指什么？click 和 touch ?

回答：touch 点击之后，到 click 事件被触发，click 事件有延迟，touch 不存在，用 事件替代 click 事件就OK

38.现在微信内置的浏览器能支持flexbox么，现在有没有什么好办法能够替代呢？做好的网页一放到微信上，大量的flex的页面

回答：你好flexbox正在开发支持，flexbox在.1到4.3系统内核上，也有类似问题，页面是需要兼容的

39.有没有什么x5内核的论坛或者wiki之类的？可以参考下。