导读
作为一个合格的前端工程师，浏览器安全是我们知识体系中的重要部分，面试也会经常问到，本文讲下js常见的漏洞，以及防范措施；希望对大家有所帮助
XSS 攻击
什么是XSS
XSS 全称是 Cross Site Scripting(即跨站脚本)，为了和 CSS 区分，故叫它XSS。XSS 攻击是指浏览器中执行恶意脚本(无论是跨域还是同域)，从而拿到用户的信息并进行操作。
XSS会做什么
- 窃取Cookie。
- 监听用户行为，比如输入账号密码后直接发送到黑客服务器。
- 修改 DOM 伪造登录表单。
- 在页面中生成浮窗广告。
XSS 攻击实现方式
存储型
存储型，顾名思义就是将恶意脚本存储了起来，确实，存储型的 XSS 将脚本存储到了服务端的数据库，然后在客户端执行这些脚本，从而达到攻击的效果。 常见的场景是留言评论区提交一段脚本代码，如果前后端没有做好转义的工作，那评论内容存到了数据库，在页面渲染过程中直接执行, 相当于执行一段未知逻辑的 JS 代码，是非常恐怖的。这就是存储型的 XSS 攻击。
反射型
比如我输入: sanyuan.com?q= 复制代码这杨，在服务器端会拿到q参数,然后将内容返回给浏览器端，浏览器将这些内容作为HTML的一部分解析，发现是一个脚本，直接执行，这样就被攻击了。 之所以叫它反射型, 是因为恶意脚本是通过作为网络请求的参数，经过服务器，然后再反射到HTML文档中，执行解析。和存储型不一样的是，服务器并不会存储这些恶意脚本。
文档型
文档型的 XSS 攻击并不会经过服务端，而是作为中间人的角色，在数据传输过程劫持到网络数据包，然后修改里面的 html 文档！
这样的劫持方式包括WIFI路由器劫持或者本地恶意软件等。
防范措施
用户输入进行校验
千万不要相信任何用户的输入！
无论是在前端和服务端，都要对用户的输入进行转码或者过滤。 代码里对用户输入的地方需要仔细检查长度和对“<”“>”“,”“'”等字符串做过滤； 任何内容写到页面之前都必须加以encode，避免不小心把html tag弄出来； 避免直接在cookie中泄露用户隐私，例如email、密码等 如果网站不需要在浏览器对cookie进行操作，可以在set-cookie末尾加上HttpOnly来防止js代码直接获取cookie 尽量采用post而不是get提交表单
利用 CSP
CSP，即浏览器中的内容安全策略，它的核心思想就是服务器决定浏览器加载哪些资源，具体来说可以完成以下功能:
- 限制其他域下的资源加载。
- 禁止向其它域提交数据。
- 提供上报机制，能帮助我们及时发现 XSS 攻击。
利用 HttpOnly
很多 XSS 攻击脚本都是用来窃取Cookie, 而设置 Cookie 的 HttpOnly 属性后，JavaScript 便无法读取 Cookie 的值。这样也能很好的防范 XSS 攻击。
总结
XSS 攻击是指浏览器中执行恶意脚本, 然后拿到用户的信息进行操作。主要分为存储型、反射型和文档型。防范的措施包括:
一个信念: 不要相信用户的输入，对输入内容转码或者过滤，让其不可执行。 两个利用: 利用 CSP，利用 Cookie 的 HttpOnly 属性。
CSRF攻击
3、基于URL的重定向
指的是web页面会采用HTTP参数来保存URL，且web页面的脚本会将请求重定向到该保存的URL上，攻击者可以将HTTP中保存的URL改为恶意站点
客户端JS Cookie引用
- cookie由服务器创建，并存储在客户端浏览器，保存用户的身份识别、session信息、甚至授权信息等。
- 客户端js可以操作cookie数据
- 如果在客户端使用JS创建或者修改站点的cookie，那么攻击者就可以查看这些代码，然后根据逻辑修改cookie。一旦cookie中边包* 含重要的信息，攻击者很容易利用这些漏洞进行特权升级等
JS劫持
许多的应用程序利用JSON作为AJAX的数据传输机制，这通常会收到JS挟持攻击。 JSON实际就是一段JS代码，通常是数组格式 攻击者在其恶意站点的网页中通过
