前端安全防范指南：XSS攻击与防御策略详解.pdfVIP

安全防范知识点

这⼀章来学习安全防范这⼀块的知识点。总的来说安全是很复

杂的⼀个领域，不可能通过⼀个章节就能学习到这部分的内容。在这

⼀章节中，我们会学习到常⻅的⼀些安全问题及如何防范的内容，在

当下其实安全问题越来越重要，已经逐渐成为前端开发必备的技能

了。

XSS

涉及⾯试题：什么是XSS？如何防范XSS？什么是

CSP？

XSS简单点来说，就是者想尽⼀切办法将可以执⾏的代码注⼊到

⽹⻚中。

XSS可以分为多种类型，但是总体上我认为分为两类：持久型和⾮持

久型。

持久型也就是的代码被服务端写⼊进数据库中，这种危害性

很⼤，因为如果⽹站量很⼤的话，就会导致⼤量正常⻚⾯的

⽤户都受到。

举个例⼦，对于评论功能来说，就得防范持久型XSS，因为我

可以在评论中输⼊以下内容

这种情况如果前后端没有做好防御的话，这段评论就会被到数据

库中，这样每个打开该⻚⾯的⽤户都会被到。

⾮持久型相⽐于前者危害就⼩的多了，⼀般通过修改URL参数的⽅

式加⼊代码，诱导⽤户从⽽进⾏。

举个例⼦，如果⻚⾯需要从URL中获取某些参数作为内容的话，不

经过过滤就会导致代码被执⾏

!--scriptalert(1)

/script--

div{{name}}/div

但是对于这种⽅式来说，如果⽤户使⽤Chrome这类浏览器的

话，浏览器就能⾃动帮助⽤户防御。但是我们不能因此就不防御

此类了，因为我不能确保⽤户都使⽤了该类浏览器。

对于XSS来说，通常有两种⽅式可以⽤来防御。

转义字符

⾸先，对于⽤户的输⼊应该是不信任的。最普遍的做法就是转义

输⼊输出的内容，对于引号、尖括号、斜杠进⾏转义

functionescape(str){

strstr.rece(//g,;)

strstr.rece(//g,;)

strstr.rece(//g,;)

strstr.rece(//g,quto;)

strstr.rece(//g,#39;)

strstr.rece(/`/g,#96;)

strstr.rece(/\//g,#x2F;)

returnstr

}

通过转义可以将代码scriptalert(1)/script变成

//-;script;alert(1);#x2F;script;

escape(scriptalert(1)/script)

但是对于显示富⽂本来说，显然不能通过上⾯的办法来转义所有字

符，因为这样会把需要的格式也过滤掉。对于这种情况，通常采⽤⽩

过滤的办法，当然也可以通过⿊过滤，但是考虑到需要过滤

的和属性实在太多，更加推荐使⽤⽩的⽅式。

constxssrequire(xss)

lethtmlxss(h1id=titleXSSDemo/h1

scriptalert(xss);/script)

//-h1XSS

Demo/h1;script;alert(xss);;/scriptg

t;

console.log(html)

以上示例使⽤了js-xss来实现，可以看到在输出中保留了h1

且过滤了script。

CSP

CSP本质上就是建⽴⽩，开发者明确告诉浏览器哪些外部资源

可以加载和执⾏。我们只需要配置规则，如何是由浏览器⾃⼰实

现的。我们可以通过这种⽅式来尽量减少XSS