故事背景
最近在做一个充值的页面，需求方很早之前便提过，需要对页面进行一定的安全保护，恰巧今天项目的小程序方面遭受到了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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。