防御XSS攻击-encode用户输入内容的重要性
一、开场先科普下XSS
跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。
二、直接上代码实例
在线演示:https://wall-wxk.github.io/blogDemo/2017/01/19/noEncode.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>encode防止xss攻击</title>
</head>
<body>
<input type="text" id="myInput" />
<button onclick="toSubmit();">提交</button>
<p id="myText" class="demo">hello world!</p>
<script type="text/javascript">
function toSubmit(){
var myText = document.getElementById("myText"),
myInput = document.getElementById("myInput"),
inputValue = myInput.value;
myText.innerHTML = inputValue;
}
</script>
</body>
</html>
实例解释:这是网站生产环境抽离出来的简化代码。在公司的产品中,有很多输入框提供给用户输入一些自定义字符串。方便用户的同时,也会招惹一些黑客过来捣乱。最简单的就是xss注入攻击。
比如上面的实例,我在输入框直接输入内容 <h1>wall</h1>
,得到的结果如下:
这种结果,肯定不是产品所想要的。
进一步鼓捣,输入内容 <script>alert('wall');</script>
如果这段字符串是保存在数据库里。那么下次用户刷新这个页面,alert方法将会被执行,也就是会弹出 wall 这个信息。
因为能插入js代码,那这个想象空间就很大了,几乎很多事都能干。
最简单的就是用js获取访问当前网站的用户的document.cookie,然后ajax发送到信息收集网站,那么用户就等于在裸泳了。
三、解决方式-对字符串进行转义后再输出
- 1.在存储进数据库的时候,对字符串进行encode
这种方式可以解决一部分问题,但是不够灵活。因为字符串有可能输出在html,也有可能输出在JavaScript代码中。 - 2.在使用字符串的时候进行encode
这种方式是根据使用场景,在前端输出时,按需求进行encode,灵活应对。
四、直接上encode方法
function encodeHtml(html){
return html && html.replace ?
(
html.replace(/&/g, "&") //转换&符号
.replace(/ /g, " ") // 转换空格
.replace(/\b +/g, " ") // 转换多个空格为单个空格
.replace(/</g, "<") // 转换小于符号
.replace(/>/g, ">") // 转换大于符号
.replace(/\\/g, "\") // 转换斜杠符号
.replace(/\'/g, "'") // 转换单引号
.replace(/\"/g, """) // 转换双引号
.replace(/\n/g, "<br/>") // 转换换行符号
.replace(/\r/g, "") //转换回车符号
)
: html;
}
代码的作用是把对应的特殊符号,转换为转义字符,而不是直接插入html中。
这样,不管用户输入什么内容,都可以直接转换成字符串输出在html中。
比如再次输入内容 <script>alert('wall');</script>
,得到的结果如下:
perfect!直接把xss漏洞给堵上了!
五、科普下转义字符
更多内容,可以查看HTML转义字符表
在线演示:https://wall-wxk.github.io/blogDemo/2017/01/19/xss.html
最后,附上完整的测试代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>encode防止xss攻击</title>
</head>
<body>
<input type="text" id="myInput" />
<button onclick="toSubmit();">提交</button>
<p id="myText" class="demo">hello world!</p>
<script type="text/javascript">
function toSubmit(){
var myText = document.getElementById("myText"),
myInput = document.getElementById("myInput"),
inputValue = myInput.value;
myText.innerHTML = encodeHtml(inputValue);
}
function encodeHtml(html){
return html && html.replace ?
(
html.replace(/&/g, "&") //转换&符号
.replace(/ /g, " ") // 转换空格
.replace(/\b +/g, " ") // 转换多个空格为单个空格
.replace(/</g, "<") // 转换小于符号
.replace(/>/g, ">") // 转换大于符号
.replace(/\\/g, "\") // 转换斜杠符号
.replace(/\'/g, "'") // 转换单引号
.replace(/\"/g, """) // 转换双引号
.replace(/\n/g, "<br/>") // 转换换行符号
.replace(/\r/g, "") //转换回车符号
)
: html;
}
</script>
</body>
</html>
防御XSS攻击-encode用户输入内容的重要性的更多相关文章
- 认识与防御XSS攻击
什么是xss攻击? XSS,即(Cross Site Scripting)中文名称为“跨站脚本攻击”.XSS的重点不在于跨站攻击而在于脚本攻击.攻击者可以利用 web应用的漏洞或缺陷之处,向页面注入恶 ...
- WEB安全 - 认识与防御XSS攻击
目录 什么是xss攻击? XSS的危害 XSS攻击分类 xss攻击示例 反射型攻击 - 前端URL参数解析 反射型攻击 - 后端URL参数解析 注入型攻击 - 留言评论 如何规避xss攻击? 总结 什 ...
- 防御XSS攻击的七条原则
本文将会着重介绍防御XSS攻击的一些原则,需要读者对于XSS有所了解,至少知道XSS漏洞的基本原理,如果您对此不是特别清楚,请参考这两篇文章:<Stored and Reflected XSS ...
- Jsoup代码解读之六-防御XSS攻击
Jsoup代码解读之八-防御XSS攻击 防御XSS攻击的一般原理 cleaner是Jsoup的重要功能之一,我们常用它来进行富文本输入中的XSS防御. 我们知道,XSS攻击的一般方式是,通过在页面输入 ...
- 8. 博客系统| 富文本编辑框和基于bs4模块防御xss攻击
views.py @login_required def cn_backend(request): article_list = models.Article.objects.filter(user= ...
- 拦截过滤防御XSS攻击 -- Struts2.3 以及 2.5 的解决方式
使用Struts2框架开发的后台在防御XSS攻击的时候很多方式都不能用,因为Struts2对请求进行的二次封装有区别.以下针对Struts2的XSS攻击进行拦截过滤防御解决: Struts2.3 本方 ...
- 微信小程序 获得用户输入内容
在微信小程序里,如何获得用户输入的内容?? js: document.getElementById("Content").value jq:$("#Content&quo ...
- Asp.net防御XSS攻击组件库
一.AntiXss 翻看mvc4高级编程,偶看到作者强烈推荐使用AntiXss防御XSS攻击,收集资料看下. 目前类库已融入到.netframework中,类库主页不再更新. 使用方法:使用Nuget ...
- c++之 scanf 接收用户输入内容
该代码全部在Visual Studio 2015中编写,有关VS2015的安装后期在写相关的博客 scanf 介绍 在程序开发中,有时候需要通过获取用户输入的数据,进行对应的操作,scanf就是用来接 ...
随机推荐
- Fis3前端工程化之项目实战
Fis3项目 项目目录结构: E:. │ .gitignore │ fis-conf.js │ index.html │ package.json │ README.md │ ├─material │ ...
- mac osx 安装redis扩展
1 php -v查看php版本 2 brew search php|grep redis 搜索对应的redis ps:如果没有brew 就根据http://brew.sh安装 3 brew ins ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- Android注解使用之通过annotationProcessor注解生成代码实现自己的ButterKnife框架
前言: Annotation注解在Android的开发中的使用越来越普遍,例如EventBus.ButterKnife.Dagger2等,之前使用注解的时候需要利用反射机制势必影响到运行效率及性能,直 ...
- SQL Server-聚焦APPLY运算符(二十七)
前言 其实有些新的特性在SQL Server早就已经出现过,但是若非系统的去学习数据库你会发现在实际项目中别人的SQL其实是比较复杂的,其实利用新的SQL Server语法会更加方便和简洁,从本节开始 ...
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- JS的内建函数reduce
@(js) reduce函数,是ECMAScript5规范中出现的数组方法.在平时的工作中,相信大家使用的场景并不多,一般而言,可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实 ...
- DOM、BOM 操作超级集合
本章内容: 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位 ...
- 漫谈C#编程语言在游戏领域的应用
0x00 前言 随着微软越来越开放,C#也变得越来越吸引人们的眼球.而在游戏行业中,C#也开始慢慢地获得了关注.这不, 网易绝代双娇手游团队已经全面使用.Net Core支持前后端统一C#开发,跨平台 ...
- Java定时任务的常用实现
Java的定时任务有以下几种常用的实现方式: 1)Timer 2)ScheduledThreadPoolExecutor 3)Spring中集成Cron Quartz 接下来依次介绍这几类具体实现的方 ...