前端安全攻防
XSS
Cross Site Scripting,简称 XSS，跨站脚本攻击 。
是一种代码注入攻击，攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
XSS攻击可以分为3类：反射型、存储型、DOM型。
反射型
反射型 XSS 的恶意代码通常存在于URL中。
由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。
攻击步骤：
- 攻击者基于正常网站构造出特殊的 URL，其中包含恶意代码。
- 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
- 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
- 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
常见场景：网站搜索，带参数的URL跳转等。
存储型
存储型 XSS 的恶意代码存在数据库里。
相比反射型XSS和DOM型XSS，存储型具有更高的隐蔽性，所以危害更大。因为它不需要用户手动触发。任何允许用户存储数据的web程序都可能存在存储型XSS漏洞，当攻击者提交一段XSS代码后，被服务器端接收并存储，当所有浏览者访问某个页面时都会被XSS。
攻击步骤：
- 攻击者将恶意代码提交到目标网站的数据库中。
- 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
- 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
- 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
常见场景：常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。
DOM型
DOM 型 XSS 攻击与反射型原理类似，取出和执行恶意代码由浏览器端完成。
DOM型属于前端 JavaScript 自身的安全漏洞，而上述两种 XSS 都属于服务端的安全漏洞。
攻击步骤：
- 攻击者构造出特殊的 URL，其中包含恶意代码。
- 用户打开带有恶意代码的 URL。
- 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
- 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
常见场景：前端交互操作中根据输入修改了DOM文本等信息，不小心注入了输入的恶意js代码。
防御方法
- 设置 Cookie 的
HttpOnly属性（设置 cookie 可不可读），客户端的 js 脚本就不能获取 cookie 信息。 - 对用户提交的所有内容进行
过滤，过滤掉会导致脚本执行的内容，对输出的内容进行 html 编码。 - 拼接 html 时，对尖括号、引号、斜杠等进行
转义，想对各处插入点进行充分的转义，需要采用合适的转义库 - 在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，
CSRF
Cross Site Request Forgery（跨站请求伪造），通过冒充用户身份对目标攻击网站执行某些操作。
通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。
由于 Cookie 中包含了用户的认证信息，当用户访问攻击者准备的攻击环境时，攻击者就可以对服务器发起 CSRF 攻击。在这个攻击过程中，攻击者借助受害者的 Cookie 骗取服务器的信任，但并不能拿到 Cookie，也看不到 Cookie 的内容。
示例1：
一论坛网站的发贴是通过 GET 请求访问，点击发贴之后 JS 把发贴内容拼接成目标 URL 并访问： http://example.com/bbs/create_post.php?title=标题&content=内容。
那么，我只需要在论坛中发一帖，包含一链接： http://example.com/bbs/create_post.php?title=我是脑残&content=哈哈。 只要有用户点击了这个链接，那么他们的帐户就会在不知情的情况下发布了这一帖子。可能这只是个恶作剧，但是既然发贴的请求可以伪造，那么删帖、转帐、改密码、发邮件全都可以伪造。
示例2：
用户A经常访问博客网站B，用户C发现网站B存在CSRF漏洞，想尽了各种办法勾引用户A访问了C写好的危险网站D，而此时用户A的cookie信息还没有失效，危险网站D中有向网站B求请求的非法操作，这样用户在不知情的情况下就被操控了。
这个时候就会有一个疑问，浏览器本身有同源策略啊，为什么在网站D还可以请求网站B的api，要记住浏览器对img、iframe和script的src是没有同源限制的！所以黑客完全可以利用动态添加这些标签的方法来实现跨站请求。
防御方法
添加验证码。这种方式强制用户必须与应用进行交互，才能完成最终请求。此种方式能很好的遏制 csrf，但是用户体验比较差。HTTP Referer字段校验。检查请求是否来自合法的"源"。Token验证。CSRF攻击的原因是浏览器会自动带上cookie，但不会带上token。