html转义及如何防止javascript注入攻击

简介: 有的时候页面中会有一个输入框,用户输入内容后会显示在页面中,类似于网页聊天应用。如果用户输入了一段js脚本,比例:,页面会弹出一个对话框,或者输入的脚本中有改变页面js变量的代码则会时程序异常或者达到跳过某种验证的目的。

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

一:什么是html转义?

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

阿里云代金券1000元免费领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d
新老阿里云账户均可领取!可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。 代金券自领取之日起,有效期是30天,请及时使用,过30天后还可以重新领取。

二:如何转义?

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 $('').text( str ).html();} function htmlDecodeJQ ( str ) { return $('').html( str ).text();}

3、使用
var msg=htmlEncodeJQ('');
$('body').append(msg);

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

相关文章
|
4天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
11天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
11天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
13天前
|
JavaScript 前端开发 API
探讨JavaScript动态添加HTML文件的技术
探讨JavaScript动态添加HTML文件的技术
13 1
|
14天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
4天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
|
5天前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
18 0
|
5天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
6 0
|
5天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
7 0
|
5天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
5 0