前端Web安全主要涉及保护Web应用程序免受恶意攻击和滥用的过程。攻击者可能会利用Web漏洞来窃取敏感信息、执行未经授权的操作或破坏应用程序。作为前端工程师我们应该了解前端攻击的漏洞有哪些，采用什么方法解决。
跨站脚本攻击（XSS）
1、概念
Cross-Site Scripting(跨站脚本攻击)简称XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，在用户的浏览器上运行。**利用这些恶意脚本，攻击者可获取用户的敏感信息如Cookie、SessionlD等，进而危害数据安全。**为了和CSS区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。XSS一直被认为是web安全中危害较大的漏洞，在owasp的top10排行(OWASP是一个开源的、非盈利的全球性安全组织，致力于应用软件的安全研究)中一直处于前三。
2、原理
（1）在HTML中内嵌的文本中，恶意内容以 script 标签形成注入
//本来要渲染的内容
<div>1</div>
//结果注入了一个script标签
<div><script src="xxxx"></scriptx</div>
（2）在标签属性中，恶意内容包含引号，注入其他属性或者标签
//本来value里面要渲染1
<input value="1">
//恶意代码插入
<input value="1"><script src="xxx"></script>">
（3）在标签的 href、src 等属性中，包含 javascript: 等可执行代码
//本来href里面要染一个跳转地址
<a href="xxx">跳转</a>
//结果里面加入了js代码
<a href="javascript:alert(1);">跳转</a>
（4）在onload、onerror、onclick 等事件中，注入不受控制代码
//本来value里面要渲染1
<input value="1">
//一段恶意代码
<input value="1"/> <img src=# onerror="alert(1)">
1"/>
<img src=# onerror="alert(1)">
（5）在style属性和标签中，包含类似background-image:url("javascript:...");的代码
注意: 很多新版本浏览器可以防范
反射性XSS
1、概念
有些情况下用户在请求后台时候，会携带一部分数据。当客户端进行访问某条链接时，攻击者可以将恶意代码植入到URL，如果服务端没有对URL携带的参数做判断或者过滤处理，直接返回响应页面，那么XSS攻击代码就会一起被传输到用户的浏览器，从而触发反射型XSS。
例如，当用户进行搜索时，返回结果通常会包括用户原始的搜索内容，如果攻击者精心构造包含XSS恶意代码的链接，诱导用户点击并成功执行后，用户的信息就可以被窃取，甚至可以模拟用户进行一些操作。
2、反射性特点
反射型XSS不会永久存储用户的数据，仅发生在用户的一次访问过程之后。反射型XSS的触发条件比较苛刻，需要攻击者想方设法引导用户点击链接。
3、反射性解决方案
后端：对搜索的内容进行过滤；白名单处理；对敏感字符进行转义
前端对展示到前端的数据：
用innerText进行处理(不要乱用innerHTML)；
转义处理esapeHTML( )(js自带的方法)；
白名单处理过滤到非法内容
存储型XSS(持久性)
1、概念
存储型XSS又称持久型XSS，攻击脚本将被永久地存放在目标服务器的数据库或文件中，具有很高的隐蔽性。
2、常见场景
这种攻击多见于论坛、博客和留言板，攻击者在发帖的过程中，将恶意脚本连同正常信息一起注入帖子的内容中。随着帖子被服务器存储下来，恶意脚本也永久地被存放在服务器的后端存储器中。
DOM型XSS(不经过服务器)
1、概念
DOM型XSS是基于DOM文档对象模型的一种漏洞。攻击者通过拼接有恶意地址发给受害者，受害者点击后，在用户页面插入隐蔽标签，引入外部is，向攻击者发送受害者的隐私信息。
2、与反射型XSS以及储存型XSS的区别
DOM型XSS没有经过服务器，反射型XSS以及储存型XSS经过了服务器，所以DOM型的XSS需要前端程序员进行优化。
XSS的防范
1、反射型XSS和储存型的XSS是利用完善的后台过滤方式进行预防的。前端在发送数据时无法对这两种类型的XSS进行有效的防护，因为所有的请求都可以拦截伪造。只有在展示数据的时候进行过滤优化。
2、DOM型的XSS是不经过服务器的，所以需要前端程序员进行防护。在使用.innerHTML、.outerHTML、document.write()时要特别小心，不要把不可信的数据作为HTML插到页面上，而应尽量使用.innerText、.textContent、.setAttribute() 等。
DOM中的内联事件监听器，如location、onclick、onerroronload、onmouseover 等，a标签的href属性，img的onerror属性，JavaScript的eval()等，都能把字符串作为代码运行。
3、如果不可信的数据拼接到字符串中传递给这些API，很容易产生安全隐患，请务必避免。
XSS的总结
（1）存储型和反射性的区别：反射性是一次性的，存储型是存储到服务器，它的扩散性危害性更大。防御方式和反射型一样，因为都是要经过服务器，所以大部分还是要靠服务器端解决。前端只能在接收数据后，渲染前进行防护。不管是反射型还是存储型前端都不能在发送前处理，因为前端在发送前的数据都是可以伪造的。
（2）防范存储型和反射型XSS是后端的责任。而 DOM型XSS攻击不发生在后端，是前端的责任。