浅谈html转义及防止javascript注入攻击的方法


Posted in Javascript onDecember 04, 2016

有的时候页面中会有一个输入框,用户输入内容后会显示在页面中,类似于网页聊天应用。如果用户输入了一段js脚本,比例:<script>alert('test');</script>,页面会弹出一个对话框,或者输入的脚本中有改变页面js变量的代码则会时程序异常或者达到跳过某种验证的目的。那如何防止这种恶意的js脚本攻击呢?通过html转义能解决这个问题。

一:什么是html转义?

html转义是将特殊字符或html标签转换为与之对应的字符。如:< 会转义为 <> 或转义为 >像“<script>alert('test');</script>”这段字符会转义为:“<script>alert('test');</script>”再显示时页面会将<解析为<,>解析为>,从而还原了用户的真实输入,最终显示在页面上 的还是“<script>alert('test');</script>”,即避免了js注入攻击又真实的显示了用户输入。

二:如何转义?

1、通过js实现

//转义 元素的innerHTML内容即为转义后的字符
function htmlEncode ( str ) {
 var ele = document.createElement('span');
 ele.appendChild( document.createTextNode( str ) );
 return ele.innerHTML;
}

//解析 
function htmlDecode ( str ) {
 var ele = document.createElement('span');
 ele.innerHTML = str;
 return ele.textContent;
}

2、通过jquery实现

function htmlEncodeJQ ( str ) {
  return $('<span/>').text( str ).html();
}

function htmlDecodeJQ ( str ) {
  return $('<span/>').html( str ).text();
}

3、使用

var msg=htmlEncodeJQ('<script>alert('test');</script>');

$('body').append(msg);

建议使用jquery实现,因为有更好的兼容性。

以上这篇浅谈html转义及防止javascript注入攻击的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 元素相对定位代码
Oct 15 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
jquery select2的使用心得(推荐)
Dec 04 #Javascript
Jquery删除css属性的简单方法
Dec 04 #Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 #Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 #Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 #Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 #Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 #Javascript
You might like
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
jupyter 添加不同内核的操作
2021/02/06 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
北京奥运会主题口号
2014/06/13 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js