这就是一篇自己的笔记。参考：《图解HTTP》、掘金博客、还有小满zs的B站课程
前端网络安全
老技术
- XSS
- CSRF
学习大佬的文章：
前端安全系列（一）：如何防止XSS攻击？ - 美团技术团队 (meituan.com)
前端安全系列（二）：如何防止CSRF攻击？ - 美团技术团队 (meituan.com)
新技术
- Canvas指纹追踪技术
- 照片EXIF信息
- 输入法
（1）、Canvas指纹追踪技术
学习HTTP可知，cookie会被利用记录用户隐私从而推送广告。但是这种方式已经逐渐淘汰，因为会有阻止访问cookie以及由跨域问题。
现在技术更新，即使你没有登录，即没有cookie，也有办法追踪到你的隐私。
原理：
“canvas指纹”：这里的指纹不是指真的指纹识别技术，canvas调用toDataURL转换base64时，他底层会获取设备，操作系统，浏览器版本，三合一的唯一标识。当然，这个三合一的唯一标识并不能百分百确认同一个人，但是全部相同的概率并不高，所以大致能判断是同一个人然后推送广告等。
Demo：
const uuid = () => {
const canvas = document.createElement('canvas'); //画布对象
const ctx = canvas.getContext('2d'); //选择2D
const txt = '枫叶在夏天'; //要画的文字
ctx.fillText(txt, 10, 10) //画的位置
console.log(canvas.toDataURL()) //调用toDataURL转换base64（就是根据这个特性从而实现跟踪）
}
uuid();
只有换了浏览器才会变化：
但是大多数用户就使用一个浏览器，所以，即使没有登录，靠着canvas指纹，也能实现追踪。
如何防范：
安装浏览器插件，谷歌应用商店有随机修改canvas指纹的插件（CanvasFingerprintBlock），其原理是，每次随机往 canvas 画布里面注入一个随机的噪音（人肉眼是看不到的），从而影响base64加密结果。
这样操作后，即使每次设备，操作系统，浏览器版本一样，生成的base64也不一样了，也就追踪不到了。
（2）、照片EXIF信息
原理：
每张照片都有EXIF信息，如果不发原图，则EXIF信息则会压缩受损，他人获取的信息就更少，但是如果是原图的话（例如拍照后微信原图发送），EXIF信息将会非常详细：
通过JS获取更多的照片EXIF信息
EXIF-js库
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
然后就可以获取更多用户隐私信息。怎么用看官网。
如何防范：
就是不要给陌生人发原图，只要不是原图，EXIF信息就很少，即使是用EXIF-JS库去获取，也得不到什么信息
（3）、输入法
比如，你在和朋友打字聊天，聊到你一个平常几乎不搜索的东西，例如鱼竿；然后打开某宝一看，好家伙首页推送。这就是输入法获取用户隐私。不在乎的话推送广告倒也无所谓，但是如果输入支付密码也被监听那就有所谓了。
防范
各个APP（例如微信）都会使用自带的键盘去输入。开发移动端的时候遇到支付也都会使用虚拟键盘。
