localStorage那点事
为什么localStorage不安全呢？
现代流行的前端框架（例如vue，react）的生态环境都伴随着状态管理库（Vuex, Redux）。但是这些状态管理工具刷新页面后，数据便会初始化。很多开发者为了方便，便把数据丢在localStorage中。然而，这样做真的是合理的？往往伴随着数据安全的风险。
咱们看以下例子：
用户A 在一台电脑登录了网站，网站把一些敏感数据（email或者phone）存在了localStorage中，假设这些数据都未做脱敏处理。当其他人同样使用了这台电脑，打开浏览器-开发者工具，只需要打开同一域名，即使非登录的状态，用户A存在localStorage中的敏感数据也会暴露给其他用户
哪些数据可以存在localStorage中?
非敏感数据，不涉及用户信息的数据。如开关状态、样式主题等。
如何避免localStorage带来的数据安全？
使用sessionStorage
sessionStorage的生命周期只存在浏览器的Tab页，这可以有效的避免localStorage带来的数据泄露的风险, 除了将数据的生存条件限制在tab页，避免用户退出登录后未关闭Tab的情况，可以在退登的时候清除存在sessionStorage中的敏感数据
除了localStorage，HTML5还有哪些安全方面的风险呢？
postMessage
postMessage存在的风险
为了便于父子窗口进行通信，iframe提供了postMessage。通过postMessage，可以忽略浏览器的同源策略限制，这在开发中往往是非常便利的事情，你可以向任何非同源父级窗口发送消息进行通信。然而，忽略同源策略，便往往伴随数据风险，如果没有相关限制，任何上层网址嵌套你的网页，都能接收到消息。
如何避免postMessage的消息被其他网址接收
通过设置origin属性来限制，设置第二个参数origin便能将数据限制在指定origin，进行数据通信；origin也可以传入一个Function，由自己控制白名单逻辑
window.parent.postMessage('message', 'https://parent.com')
iframe sandbox属性
iframe带来很多便利同时，也暴露了很多风险，例如clickJacking，postMessage 然而可以通过sandbox属性来降低嵌入页的风险，详情查看文档
referrer
非直接通过导航栏打开的url，例如通过a标签等形式打开网址会携带referrer头，这往往会暴露用户隐私信息
如何避免携带referrer头部
- a标签设置referrer属性
<a href="xxx" referrerpolicy="no-referrer" />
- 通过meta标签限制
<meta name="referrer" content="no-referrer" />
参考文献
- Mozilla, developer.mozilla.org/zh-CN/docs/…
- 《白帽子讲web安全》
