前端面试中对于安全问题的考察，很大程度上集中在XSS攻击和CSRF攻击上，因此搞清楚这两种攻击方式非常有意义，话不多说，下面我们一起来学习。

XSS攻击

首先我们来看一下XSS攻击，XSS全称跨站脚本攻击，是web程序中最最最常见的漏洞。这种攻击方式是攻击者通过在网页中嵌入客户端脚本，当用户访问该网页时，脚本就会自动执行，从而实现攻击，这种攻击很容易获得用户cookie，导航到恶意网站或者携带病毒木马等。

XSS攻击是如何发生的？

XSS攻击之所以会发生主要是用户输入的数据被转换成了代码，这里需要用到HTML Encode。

XSS攻击的场景

Dom-Based XSS漏洞

被攻击的网站存在XSS漏洞，攻击者先建立一个网站用于窃取信息，然后构造一个恶意URL并通过某种方式发送给用户，当用户点击链接那么URL中的恶意JS代码就会被自动执行，所以用户在被攻击网站的cookie信息等安全数据就会被发送到攻击者的窃取信息网站，从而导致用户的财产损失。

Stored XSS漏洞

被攻击的网站存在XSS漏洞，它允许将攻击代码存放在数据库中。攻击者将攻击脚本上传到Web服务器上，使得所有访问该页面的用户都面临信息泄露的风险，这可以通过写一篇文章或者上传某个视频之类的事件触发。当用户们访问被攻击的网站中的这一篇文章或者视频页面时，那么嵌入在文章中的恶意JS代码就会自动执行，从而将cookie信息等重要安全信息窃取。

综上所述，Dom-Based XSS漏洞威胁用户个体，而存储式XSS漏洞所威胁的对象将是大量的访问该网站的用户。

XSS漏洞修复

原则：不相信用户输入的数据！同时要注意攻击代码不一定在script标签内部。

将重要的cookie标记为http only, 这样的话Javascript中的document.cookie语句就不能获取到cookie了.
只允许用户输入我们期望的数据。例如：年龄的textbox中，只允许用户输入数字，而数字之外的字符都过滤掉。
对数据进行HTML Encode 处理
过滤或移除特殊的HTML标签，例如: "script", "iframe" , "&lt"; "for <", "&gt"; "for >", "&quot for"
过滤JavaScript事件的标签。例如 "onclick=", "onfocus" 等等。

CSRF攻击

我们了解完XSS攻击后，下一个任务就是认识CSRF攻击了，CSRF攻击中文名为跨站请求伪造，是一种比XSS更为高级的web攻击方式。

CSRF攻击场景

简单地说，CSRF攻击就是攻击者盗用了我们的身份，以我们的名义发送恶意请求。CSRF可以以我们的名义发送Email，登陆账号，盗取账号，购买商品，转账等。

CSRF攻击的原理

用户访问并登陆信任的网站A
验证通过后，在用户C的浏览器中存储网站A的服务器产生的Cookie
用户在没有登出网站A的同时访问了危险网站B
危险网站B会自动发出请求，请求访问第三方网站A
由于B的访问请求，浏览器带着第二步产生的cookie信息访问网站A
由于网站A不知道请求是否是用户C发出的，但是请求中带有用户C的cookie，所以网站A会以为是用户在访问，这样的话，危险网站B就可以以假冒C的身份模拟用户的请求，并实施违法活动。

根据以上CSRF攻击步骤可以看出，想要实现一次CSRF攻击，必须满足两个条件：

用户登陆信任网站A，并在本地浏览器中产生cookie并保存下来
用户在访问A且不登出账户的同时访问危险网站B

本质上说，CSRF攻击是源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的。

CSRF攻击的防御措施

服务端
客户端

服务端防御是应用最为广泛的一种方式，服务端防御的核心思路就是增加伪随机数。

Cookie Hashing(所有表单都包含同一个伪随机值)：
验证码
One-Time Tokens(不同的表单包含一个不同的伪随机值)

前端安全问题大汇总：XSS攻击和CSRF攻击