其他分享
首页 > 其他分享> > XSS攻击与react

XSS攻击与react

作者:互联网

故事背景

最近在做一个充值的页面,需求方很早之前便提过,需要对页面进行一定的安全保护,恰巧今天项目的小程序方面遭受到了XSS攻击,便想着深入一下前端安全方面。原本想了涉及到金钱交易的报文,已经加密了一层,但这其实也算是前后端的一种安全防范,那对于前端,难道没有任何其他的安全措施吗?网上进行搜索查询,感觉接触到了许多未接触过的方面,这对于日后的开发影响是深刻的,便将其记录下来。

XSS攻击

何为XSS攻击?它的名称其实叫做跨脚本攻击,简单点说,就是入侵者利用script脚本,对网站进行一系列的自我行为,而浏览器无法识别正常与恶意的脚本,因此都会将其执行。
前端常见的,其实是浏览器通过url上的字段解析成script脚本执行,如下面几个例子(从美团安全例子中摘取

例一

http://xxx/search?keyword="><script>alert('XSS');</script>

<input type="text" value="<%= getParameter("keyword") %>">
<button>搜索</button>
<div>
  您搜索的关键词是:<%= getParameter("keyword") %>
</div>

http://xxx/search?keyword="><script>alert('XSS');</script>链接中,原生的 js 在url上获取到keyword时,将其插入到html中,使得浏览器将其识别成一个script脚本并执行,这便是典型的xss攻击,这种解决的办法,其实就是将类似于< > :等特殊符号转译成对应的字符,这样子浏览器就将<script>识别成字符串而非script脚本

例二

http://xxx/?redirect_to=javascript:alert('XSS')

<a href="<%= escapeHTML(getParameter("redirect_to")) %>">跳转...</a>

http://xxx/?redirect_to=javascript:alert('XSS')链接中,原生的 js 会将javascript:插入到 a 标签当中,也会被浏览器识别出script脚本执行,这种攻击主要是通过url注入脚本,使得页面上的跳转改变成攻击者的脚本执行,一般针对链接跳转的攻击,可以使用白名单,过滤调JavaScript脚本 对于链接跳转,如 <a href="xxx" 或 location.href="xxx",要检验其内容,禁止以 javascript: 开头的链接,和其他非法的 scheme。
常见的XSS攻击,都是因为开发者未将链接上的文本进行过滤,直接插入至html当中,使得浏览器识别成脚本执行。

XSS种类

XSS攻击其实分为三种:储存型,反射性与DOM型
前端重点应当关注的是DOM型的XSS攻击
反射型XSS攻击与DOM型的XSS攻击:其实就是攻击者利用url上的特殊字段,当前端使用到该字段而又没特殊处理时,攻击者就可以利用该字段对网站进行恶意攻击。
二者区别便是反射型 XSS 都是在服务端取出恶意代码后,插入到响应 HTML 里的

React的XSS防范

React框架开发的页面,在渲染时就已经避免了一部分的XSS攻击。因为React在render阶段,就有对特殊字符进行了转义,恶意代码在渲染到HTML之前就已经变成了字符串。而在jsx的creatReact()函数中,react Element会利用$$typeof属性进行校验,防止构造特殊结构的children进行XSS攻击
而在react中,可能引起XSS攻击的便是dangerouslySetInnerHTML ,react会将dangerouslySetInnerHTML 的值不加处理的直接渲染至html中,因此react开发应当注意这个的处理

代入

当了解完XSS攻击后,其实当使用现代化前端框架时,能够规避大部分XSS攻击,但是防止XSS攻击是繁琐的,需要在需要转义的地方都进行处理,才能够预防。完全防止XSS攻击是不现实的,我们只能通过日常的开发规范去尽力避免

标签:脚本,XSS,浏览器,script,攻击,react
来源: https://www.cnblogs.com/mishi-blog/p/16544070.html