故事背景

最近在做一个充值的页面，需求方很早之前便提过，需要对页面进行一定的安全保护，恰巧今天项目的小程序方面遭受到了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