转—如何让前端更安全?——XSS攻击和防御详解[通俗易懂]

转—如何让前端更安全?——XSS攻击和防御详解

大家好,又见面了,我是全栈君。

前言

平时很少关注安全这块的技术,曾经也买过一本《Web前端黑客技术揭秘》但至今还没翻过,尴尬。今天的早读文章由腾讯优测@小吉带来的分享。

 

正文从这开始~

 

最近深入了解了一下XSS攻击。以前总浮浅的认为XSS防御仅仅只是输入过滤可能造成的XSS而已。然而这池子水深的很呐。

 

XSS的类型

总体来说,XSS分三类,存储型XSS、反射型XSS、DOM-XSS。

 

存储型XSS

数据库中存有的存在XSS攻击的数据,返回给客户端。若数据未经过任何转义。被浏览器渲染。就可能导致XSS攻击;

 

反射型XSS

将用户输入的存在XSS攻击的数据,发送给后台,后台并未对数据进行存储,也未经过任何过滤,直接返回给客户端。被浏览器渲染。就可能导致XSS攻击;

 

DOM-XSS

纯粹发生在客户端的XSS攻击,比如:http://www.some.site/page.html?default=French

页面代码:

转---如何让前端更安全?——XSS攻击和防御详解[通俗易懂]

 

该XSS攻击实现条件:

  • 用户点击了如下连接:

http://www.some.site/page.html?default=<script>alert(document.cookie)</script>

  • 后台对URL参数未做任何过滤处理,返回给客户端,前端直接从url上获取参数。

  • 打开网址的浏览器是低版本浏览器,常见ie8以下

 

满足以上三者,就会导致URL上的js代码执行:alert(document.cookie),但是攻击者可以利用这个,做你无法想象的事情。在现代浏览器中,已经做了xss过滤,一旦检测到xss,会提示报错如下:

转---如何让前端更安全?——XSS攻击和防御详解[通俗易懂]

 

以上便是学术上的划分的XSS攻击类型,2、3类型其实都是反射型的攻击。了解了这些,意识到XSS攻击无处不在啊。那么如何对XSS进行防御?从输入到输出都需要过滤、转义。

 

XSS防御—输入输出的过滤和数据转义

 

输入

客户端求情参数:包括用户输入,url参数、post参数。

  • 在产品形态上,针对不同输入类型,对输入做变量类型限制。

如,http://xss.qq.com?default=12,Default值强制限制为整形。

我们的后台是node,使用joi对于输入做类型限制:

转---如何让前端更安全?——XSS攻击和防御详解[通俗易懂]

 

  • 字符串类型的数据,需要针对<、>、/、’、”、&五个字符进行实体化转义。

转---如何让前端更安全?——XSS攻击和防御详解[通俗易懂]

 

输出

即使在客户端对用户的输入做了过滤、转义,攻击者一样可能,通过截包,转发等手段,修改你的请求包体。最终还是要在数据输出的时候做数据转义。

 

好啦,到数据转义啦,不就是对<>,’&”这些字符做实体化转义吗?如果你认为这么简单,NO NO NO…因为浏览器解析中html和js编码不一样,以及上下文场景多样,所以对于后台输出的变量,不同的上下文中渲染后端变量,转码不一样。

 

下面的HTML片段显示了如何安全地在多种不同的上下文中渲染不可信数据。

情况一

数据类型:String

上下文:HTML Body

示例代码:<span>UNTRUSTED DATA</span>

防御措施:HTML Entity编码

 

情况二

数据类型:String

上下文:安全HTML变量

示例代码:<input type=”text” name=”fname” value=”UNTRUSTED DATA”>

防御措施

1. HTML Attribute编码

2. 只把不可信数据放在安全白名单内的变量上(白名单在下文列出)

3. 严格地校验不安全变量,如background、id和name

 

情况三

数据类型:String

上下文:GET参数

示例代码:<a href=”/site/search?value=UNTRUSTED DATA”>clickme</a>

防御措施:URL编码

 

情况四

数据类型:String

上下文:使用在src或href变量上的不可信URLs

示例代码:

  • <a href=”UNTRUSTED URL”>clickme</a>

  • <iframe src=”UNTRUSTED URL” />

防御措施:

1. 对输入进行规范化

2. URL校验

3. URL安全性认证

4. 只允许使用http和https协议(避免使用JavaScript协议去打开一个新窗口)

5. HTML Attribute编码

 

情况五

数据类型:String

上下文:CSS值

示例代码:<div style=”width: UNTRUSTED DATA;”>Selection</div>

防御措施:

1. 使用CSS编码

2. 使用CSS Hex编码

3. 良好的CSS设计

 

情况六

数据类型:String

上下文:JavaScript变量

示例代码:

  • <script>var currentValue=’UNTRUSTED DATA’;</script>

  • <script>someFunction(‘UNTRUSTED DATA’);</script>

防御措施:

1. 确保所有变量值都被引号括起来

2. 使用JavaScript Hex编码

3. 使用JavaScript Unicode编码

4. 避免使用“反斜杠转译”(\”、\’或者\)

 

情况七

数据类型:HTML

上下文:HTML Body

示例代码:<div>UNTRUSTED HTML</div>

防御措施:

[HTML校验 (JSoup, AntiSamy, HTML Sanitizer)]

(https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.236_-_Use_an_HTML_Policy_engine_to_validate_or_clean_user-driven_HTML_in_an_outbound_way)

 

情况八

数据类型:String

上下文:DOM XSS

示例代码:<script>document.write(“UNTRUSTED INPUT: ” + document.location.hash);<script/>

防御措施:

基于DOM操作的XSS漏洞防御措施

 

所有输出的数据转义都应该遵守上表的规则,而针对同步数据和异步数据,有较大的使用区别做了区分:

同步数据

  • React页面主动屏蔽掉XSS,非react则需要对不可信任数据,要进行输出转义。 

  • 对于html白名单需求,可以使用SanitizeHelper模块提供了一个方法集合来处理非预期的HTML元素。 

  • 不同的使用方式,编码方式不同,java现成的工具可以用——ESAPI,不同位置如何转义可参照ESAPI文档,比如属性值转义:

String safe = ESAPI.encoder().encodeForHTMLAttribute( 

request.getParameter( “input” ) );

 

异步、后台直出给js使用的json数据

对于不可信任的json数据。因为json数据可能用到不同的地方,所以转义可以放在前端js去转义。

  • 参与运算的动态变量,最好转化为对应类型后再运算。如number型.

  • 如果是字符串操作,保证字符串被引号包裹。

  • 不能使用eval ,new fuction,settimeout执行动态字符串,因为这个字符串很可能就是一个xss代码,如果无法避免,那么也要转义之后再参与运算。

  • 输出到页面上的数据必须使用相应方法转义,前端可以考虑寻找js插件处理。目前jquery-encoder,可用于前端json转义。使用方式与ESAPI类似,在需要渲染的时候进行转义。

 

前端XSS防御方案大致如上,整理了这么多干货内容,作为小前端的我,表示要吸收好几天。 

 

最后,再跟大家分享个实际工作中的案例吧

除了上面的XSS攻击,分享一个让你意想不到的安全漏洞。

在优测项目,早期研发环境中,我们的测试人员提出了如下的安全漏洞:

如下登录页面我们为了用户能在登录之后访问到之前浏览的页面,所以在url加入了一个service参数,但是未对它做任何校验,可能会被钓鱼网站利用。

 

转---如何让前端更安全?——XSS攻击和防御详解[通俗易懂]

 

该攻击实现条件:

  • 用户点击了如下连接:

https://cas.utest.qq.com/qqlogin?service=http%3A%2F%2Fpianzi.com;

  • 后端未对service参数做校验,这个连接可以正常跳转到上图的页面;

  • 用户输入帐号登录后,跳转到http://pianzi.com;

  • 这是个钓鱼网站,通过网站风格欺骗,对用户进行引导性操作;

  • 用户输入一些有用的信息;

  • 在不知不觉之间,用户泄漏了自己的信息。

 

好深的套路啊~~研发哥哥赶紧寻找解决办法,最终确认方案为:对登录后跳转地址采用白名单机制。

 

对于这个老生长谈的XSS攻击,WEB开发者,只是了解其一,前端出身的孩子,对这方面了解甚少,跟我一样几乎没这方面意识的同学怕是也有不少。

 

作为懒人一枚,做什么都想找一个一劳永逸的办法,但是对于XSS攻击,无处不在,没有一个很好的全局处理方案。前端小朋友多了解了解常规的XSS攻击,在码代码的时候有这个防攻击意识,也是极好的。

 

前端安全还有许多了解的方面,如何预防csrf攻击,启用现代浏览器安全防御等等,都需要去了解。 

 

最后,如果你是前端开发,腾讯优测H5测试绝对是你的开发好助手,提升开发效率那是杠杠滴!有机会大家可以玩玩。

转载于:https://www.cnblogs.com/AlexBlogs/p/6501769.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108634.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • VLAN的特点及作用_vlan特点和作用有哪些

    VLAN的特点及作用_vlan特点和作用有哪些VLAN的作用:把同一物理局域网内的不同用户逻辑地划分成不同的广播域,有助于控制流量、减少设备投资、简化网络管理、提高网络的安全性。VLAN的特点:1)区段化:将一个网络进行区段化,减少每个区段的主机数量,提高网络性能;2)灵活性:一般情况下无须更改物理网络与增加新设备及更改布线系统;3)安全性:VLAN间的通讯是在受控的方式下完成的。转载于:https://www.cnb…

  • origin绘制柱形图_origin绘制柱状图

    origin绘制柱形图_origin绘制柱状图使用Origin绘制一幅类似于下图的中文版柱状图。

  • 学习成功:中学生成就梦想的15堂必修课

    学习成功:中学生成就梦想的15堂必修课管斌全:《学习成功:中学生成就梦想的15堂必修课》笛案:自信国内外成功学的著作看过不少,但我只向人推荐管斌全的作品。以下内容节选自网络,个人有渠道还是买书好,也算是对作者的支持。fygub0231@sina.com0571-63311953013567128396该书已经出版了4个版本。  第一个版本是由北京海潮出版社(2002年10月)出版,书名为《我信我能我

  • JAVA协同过滤推荐算法

    1、什么是协同过滤在推荐系统众多方法中,基于用户的协同过滤推荐算法是最早诞生的,原理也较为简单。该算法1992年提出并用于邮件过滤系统,两年后1994年被GroupLens用于新闻过滤。一直到2000年,该算法都是推荐系统领域最著名的算法。在一个在线个性化推荐系统中,当一个用户A需要个性化推荐时,可以先找到和他有相似兴趣的其他用户,然后把那些用户喜欢的、而用户A没有听说过的物品推荐给A。…

  • 逻辑

    逻辑

  • Vue生命周期钩子(三)「建议收藏」

    Vue生命周期钩子(三)「建议收藏」Vue生命周期图Vue中共有11个生命周期函数,本文只说明8个生命周期钩子beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性created:实例已经在内存中创建完毕,此时 data 和 methods 已经创建完毕,此时还没有开始编译模板beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号