前端安全系列:如何防止XSS攻击?
【新产品上线啦】51CTO播客,随时随地,碎片化学习
前端安全 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点。在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然,浏览器自身也在不断在进化和发展,不断引入 CSP、Same-Site Cookies 等新技术来增强安全性,但是仍存在很多潜在的威胁,这需要前端技术人员不断进行“查漏补缺”。 近几年,美团业务高速发展,前端随之面临很多安全挑战,因此积累了大量的实践经验。我们梳理了常见的前端安全问题以及对应的解决方案,将会做成一个系列,希望可以帮助前端人员在日常开发中不断预防和修复安全漏洞。本文是该系列的第一篇。 本文我们会讲解 XSS ,主要包括:
XSS 攻击的介绍 在开始本文之前,我们先提出一个问题,请判断以下两个说法是否正确:
如果你还不能确定答案,那么可以带着这些问题向下看,我们将逐步拆解问题。 XSS 漏洞的发生和修复 XSS 攻击是页面被注入了恶意的代码,为了更形象的介绍,我们用发生在小明同学身边的事例来进行说明。 一个案例 某天,公司需要一个搜索页面,根据 URL 参数决定关键词的内容。小明很快把页面写好并且上线。代码如下:
然而,在上线后不久,小明就接到了安全组发来的一个神秘链接: http://xxx/search?keyword="><script>alert('XSS');</script> 小明带着一种不祥的预感点开了这个链接<span style="color:red">[请勿模仿,确认安全的链接才能点开]</span>。果然,页面中弹出了写着"XSS"的对话框。 可恶,中招了!小明眉头一皱,发现了其中的奥秘: 当浏览器请求 http://xxx/search?keyword="><script>alert('XSS');</script> 时,服务端会解析出请求参数 keyword,得到 "><script>alert('XSS');</script>,拼接到 HTML 中返回给浏览器。形成了如下的 HTML:
浏览器无法分辨出 <script>alert('XSS');</script> 是恶意代码,因而将其执行。 这里不仅仅 div 的内容被注入了,而且 input 的 value 属性也被注入, alert 会弹出两次。 面对这种情况,我们应该如何进行防范呢? 其实,这只是浏览器把用户的输入当成了脚本进行了执行。那么只要告诉浏览器这段内容是文本就可以了。 聪明的小明很快找到解决方法,把这个漏洞修复:
escapeHTML() 按照如下规则进行转义: 经过了转义函数的处理后,最终浏览器接收到的响应为:
恶意代码都被转义,不再被浏览器执行,而且搜索词能够完美的在页面显示出来。 通过这个事件,小明学习到了如下知识:
注意特殊的 HTML 属性、JavaScript API 【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。 |
-
(原标题:滴滴召开司机意见征求会:程维柳青作为一线...[详细]
-
联想集团(00992.HK)午间回应,电脑硬件制造商Super Mi...[详细]
-
(原标题:贾跃亭对乐视网1.37亿股解押 一次性偿还民...[详细]
-
副标题#e# 【新品产上线啦】51CTO播客,随时随地,碎...[详细]
-
有时候我们想在js里面使用加密, jQuery 就提供了这样...[详细]
-
副标题#e# 9月15日技术沙龙 | 与东华软件、AWS、京东...[详细]
-
副标题#e# 【新品产上线啦】51CTO播客,随时随地,碎...[详细]
-
Jquery Ajax实例2:向页面发出请求 返回JSon格式数据
一、AjaxJson.aspx 处理业务数据,产生JSon数据,供Jq...[详细]
-
上文介绍了利用$函数筛选页面上的元素和替代onload事...[详细]
-
副标题#e# (原标题:滴滴创始人内部信确认巨亏:反思...[详细]