浅谈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 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
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
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
欧元符号 €
2022/02/17 杂记
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记