本文目录一览：
什么是XSS攻击
XSS攻击又称为跨站脚本，XSS的重点不在于跨站点，而是在于脚本的执行。XSS是一种经常出现在Web应用程序中的计算机安全漏洞，是由于Web应用程序对用户的输入过滤不足而产生的，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
常见的XSS攻击有三种：反射型XSS攻击、DOM-based型XSS攻击、存储型XSS攻击。
第一种：反射型XSS攻击
反射型XSS攻击一般是攻击者通过特定手法，诱使用户去访问一个包含恶意代码的URL，当受害者点击这些专门设计的链接的时候，恶意代码会直接在受害者主机上的浏览器执行。此类XSS攻击通常出现在网站的搜索栏、用户登录口等地方，常用来窃取客户端Cookies或进行钓鱼欺骗。
第二种：DOM-based型XSS攻击
客户端的脚本程序可以动态地检查和修改页面内容，而不依赖于服务器端的数据。例如客户端如从URL中提取数据并在本地执行，如果用户在客户端输入的数据包含了恶意的JavaScript脚本，而这些脚本没有经过适当的过滤或者消毒，那么应用程序就可能受到DOM-based型XSS攻击。需要特别注意以下的用户输入源document.URL、location.hash、location.search、document.referrer 等。
第三种：存储型XSS攻击
攻击者事先将恶意代码上传或者储存到漏洞服务器中，只要受害者浏览包含此恶意代码的页面就会执行恶意代码。这意味着只要访问了这个页面的访客，都有可能会执行这段恶意脚本，因此存储型XSS攻击的危害会更大。此类攻击一般出现在网站留言、评论、博客日志等交互处，恶意脚本存储到客户端或者服务端的数据库中。
Web前端新手应该如何防御XSS攻击
今天小编要跟大家分享的文章是关于Web前端新手应该如何防御XSS攻击。作为JS系工程师接触最多的漏洞我想就是XSS漏洞了，然而并不是所有的同学对其都有一个清晰的认识。今天我们分享一下XSS漏洞攻击，希望能帮助到大家。下面我们来一起看一看吧！
一、什么是XSS攻击
XSS（Cross-SiteScripting）又称跨站脚本，XSS的重点不在于跨站点，而是在于脚本的执行。XSS是一种经常出现在Web应用程序中的计算机安全漏洞，是由于Web应用程序对用户的输入过滤不足而产生的。
常见的XSS攻击有三种：反射型、DOM-based型、存储型。其中反射型、DOM-based型可以归类为非持久型XSS攻击，存储型归类为持久型XSS攻击。
1、反射型
反射型XSS一般是攻击者通过特定手法（如电子邮件），诱使用户去访问一个包含恶意代码的URL，当受害者点击这些专门设计的链接的时候，恶意代码会直接在受害者主机上的浏览器执行。
对于访问者而言是一次性的，具体表现在我们把我们的恶意脚本通过URL的方式传递给了服务器，而服务器则只是不加处理的把脚本“反射”回访问者的浏览器而使访问者的浏览器执行相应的脚本。反射型XSS的触发有后端的参与，要避免反射性XSS，必须需要后端的协调，后端解析前端的数据时首先做相关的字串检测和转义处理。
此类XSS通常出现在网站的搜索栏、用户登录口等地方，常用来窃取客户端Cookies或进行钓鱼欺骗。
整个攻击过程大约如下：
2、DOM-based型
客户端的脚本程序可以动态地检查和修改页面内容，而不依赖于服务器端的数据。例如客户端如从URL中提取数据并在本地执行，如果用户在客户端输入的数据包含了恶意的JavaScript脚本，而这些脚本没有经过适当的过滤和消毒，那么应用程序就可能受到DOM-basedXSS攻击。需要特别注意以下的用户输入源document.URL、location.hash、location.search、document.referrer等。
整个攻击过程大约如下：
3、存储型
攻击者事先将恶意代码上传或储存到漏洞服务器中，只要受害者浏览包含此恶意代码的页面就会执行恶意代码。这就意味着只要访问了这个页面的访客，都有可能会执行这段恶意脚本，因此储存型XSS的危害会更大。
存储型XSS一般出现在网站留言、评论、博客日志等交互处，恶意脚本存储到客户端或者服务端的数据库中。
整个攻击过程大约如下：
二、XSS攻击的危害
XSS可以导致：
1、攻击劫持访问；
2、盗用cookie实现无密码登录；
3、配合csrf攻击完成恶意请求；
4、使用js或css破坏页面正常的结构与样式等；
三、防御方法
1、XSS防御之HTML编码
应用范围：将不可信数据放入到HTML标签内（例如div、span等）的时候进行HTML编码。
编码规则：将"'/转义为实体字符（或者十进制、十六进制）。
示例代码：
_unction_ncodeForHTML(str,_wargs){
__return(''+_tr)
___.replace(//g,'')
___.replace(/,'')__//_EC=_EX=_ntity=
___.replace(//g,'')
___.replace(/"/g,'"')
___.replace(/'/g,''')_//'_煌萍觯蛭辉_TML规范中
___.replace(/\//g,'/');
_};
HTML有三种编码表现方式：十进制、十六进制、命名实体。例如小于号（
2、XSS防御之HTMLAttribute编码
应用范围：将不可信数据放入HTML属性时（不含src、href、style和事件处理属性），进行HTMLAttribute编码
编码规则：除了字母数字字符以外，使用HH;(或者可用的命名实体)格式来转义ASCII值小于256所有的字符
示例代码：
_unction_ncodeForHTMLAttibute(str,_wargs){
__let_ncoded='';
__for(let_=0;____let_h=_ex=_tr[i];
___if(!/[A-Za-z0-9]/.test(str[i])_tr.charCodeAt(i)____hex=''+_h.charCodeAt(0).toString(16)+';';
___}
___encoded+=_ex;
__}
__return_ncoded;
_};
3、XSS防御之JavaScript编码
作用范围：将不可信数据放入事件处理属性、JavaScirpt值时进行JavaScript编码
编码规则：除字母数字字符外，请使用xHH格式转义ASCII码小于256的所有字符
示例代码：
_unction_ncodeForJavascript(str,_wargs)_
__let_ncoded='';
__for(let_=0;____let_c=_ex=_tr[i];
___if(!/[A-Za-z0-9]/.test(str[i])_tr.charCodeAt(i)____hex='\\x'+_c.charCodeAt().toString(16);
___}
___encoded+=_ex;
__}
__return_ncoded;
_};
4、XSS防御之URL编码
作用范围：将不可信数据作为URL参数值时需要对参数进行URL编码
编码规则：将参数值进行encodeURIComponent编码
示例代码：
_function_ncodeForURL(str,_wargs){
__return_ncodeURIComponent(str);
_};
5、XSS防御之CSS编码
作用范围：将不可信数据作为CSS时进行CSS编码
编码规则：除了字母数字字符以外，使用XXXXXX格式来转义ASCII值小于256的所有字符
示例代码：
_unction_ncodeForCSS(attr,_tr,_wargs){
__let_ncoded='';
__for(let_=0;____let_h=_tr.charAt(i);
___if(!ch.match(/[a-zA-Z0-9]/)_
____let_ex=_tr.charCodeAt(i).toString(16);
____let_ad='000000'.substr((hex.length));
____encoded+='\\'+_ad+_ex;
___}_lse_
____encoded+=_h;
___}
__}
__return_ncoded;
_};
后记
在任何时候用户的输入都是不可信的。对于HTTP参数，理论上都要进行验证，例如某个字段是枚举类型，其就不应该出现枚举以为的值；对于不可信数据的输出要进行相应的编码；此外httpOnly、CSP、X-XSS-Protection、SecureCookie等也可以起到有效的防护。
XSS漏洞有时比较难发现，所幸当下React、Vue等框架都从框架层面引入了XSS防御机制，一定程度上解放了我们的双手。
但是作为开发人员依然要了解XSS基本知识、于细节处避免制造XSS漏洞。框架是辅助，我们仍需以人为本，规范开发习惯，提高Web前端安全意识。
以上就是小编今天为大家分享的关于Web前端新手应该如何防御XSS攻击的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
作者：公子
链接：#/a/1190000017057646
xss漏洞的正确分类是什么？
根据XSS脚本注入方式的不同，我们可以对XSS攻击进行简单的分类。其中，最常见的就数反射型XSS和存储型XSS了。
1.反射型XSS
反 射型XSS，又称非持久型XSS。之所以称为反射型XSS，则是因为这种攻击方式的注入代码是从目标服务器通过错误信息、搜索结果等等方式“反射”回来 的。而称为非持久型XSS，则是因为这种攻击方式具有一次性。攻击者通过电子邮件等方式将包含注入脚本的恶意链接发送给受害者，当受害者点击该链接时，注 入脚本被传输到目标服务器上，然后服务器将注入脚本“反射”到受害者的浏览器上，从而在该浏览器上执行了这段脚本。
当 受害者点击这个链接的时候，注入的脚本被当作搜索的关键词发送到目标服务器的search.asp页面中，则在搜索结果的返回页面中，这段脚本将被当作搜 索的关键词而嵌入。这样，当用户得到搜索结果页面后，这段脚本也得到了执行。这就是反射型XSS攻击的原理，可以看到，攻击者巧妙地通过反射型XSS的攻 击方式，达到了在受害者的浏览器上执行脚本的目的。由于代码注入的是一个动态产生的页面而不是永久的页面，因此这种攻击方式只在点击链接的时候才产生作 用，这也是它被称为非持久型XSS的原因。
2.存储型XSS
存储型XSS，又称持久型XSS，他和反射型XSS最大的不同就是，攻击脚本将被永久地存放在目标服务器的数据库和 文件中。这种攻击多见于论坛，攻击者在发帖的过程中，将恶意脚本连同正常信息一起注入到帖子的内容之中。随着帖子被论坛服务器存储下来，恶意脚本也永久地 被存放在论坛服务器的后端存储器中。当其它用户浏览这个被注入了恶意脚本的帖子的时候，恶意脚本则会在他们的浏览器中得到执行，从而受到了攻击。
可 以看到，存储型XSS的攻击方式能够将恶意代码永久地嵌入一个页面当中，所有访问这个页面的用户都将成为受害者。如果我们能够谨慎对待不明链接，那么反射 型的XSS攻击将没有多大作为，而存储型XSS则不同，由于它注入的往往是一些我们所信任的页面，因此无论我们多么小心，都难免会受到攻击。可以说，存储 型XSS更具有隐蔽性，带来的危害也更大，除非服务器能完全阻止注入，否则任何人都很有可能受到攻击。