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

有的时候页面中会有一个输入框,用户输入内容后会显示在页面中,类似于网页聊天应用。如果用户输入了一段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注入
防止javascript注入、sql注入转义、sql注入绕过转义、sql防注入 转义字符、sql 注入 单引号转义,以便于您获取更多的相关知识。

时间: 2024-12-26 06:36:35

浅谈html转义及防止javascript注入攻击的方法_javascript技巧的相关文章

再谈javascript注入 黑客必备!_javascript技巧

什么是javascript注入攻击? 1.JavaScript注入就是在浏览器地址栏中输入一段js代码,用来改变页面js变量.页面标签的内容. 使用Javascript注入,用户不需要关闭或保存网页就可以改变其内容,这是在浏览器的地址栏上完成的.命令的语法如下:javascript:alert(#command#)   例如,如果你想在http://www.example.com站点上看到一个alert警告框,那么首先在地址栏上输入URL并等待页面加载完成,然后删掉URL并输入:javascri

浅谈开启magic_quote_gpc后的sql注入攻击与防范_Mysql

通过启用php.ini配置文件中的相关选项,就可以将大部分想利用SQL注入漏洞的骇客拒绝于门外. 开启magic_quote_gpc=on之后,能实现addslshes()和stripslashes()这两个函数的功能.在PHP4.0及以上的版本中,该选项默认情况下是开启的,所以在PHP4.0及以上的版本中,就算PHP程序中的参数没有进行过滤,PHP系统也会对每一个通过GET.POST.COOKIE方式传递的变量自动转换,换句话说,输入的注入攻击代码将会全部被转换,将给攻击者带来非常大的困难.

浅谈php处理后端&amp;接口访问超时的解决方法_php技巧

[HTTP访问] 一般我们访问HTTP方式很多,主要是:curl, socket, file_get_contents() 等方法. 如果碰到对方服务器一直没有响应的时候,我们就悲剧了,很容易把整个服务器搞死,所以在访问http的时候也需要考虑超时的问题. [ CURL 访问HTTP] CURL 是我们常用的一种比较靠谱的访问HTTP协议接口的lib库,性能高,还有一些并发支持的功能等. CURL: curl_setopt($ch, opt) 可以设置一些超时的设置,主要包括: *(重要) CU

浅谈JS正则表达式的RegExp对象和括号的使用_javascript技巧

RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

浅谈js中test()函数在正则中的使用_javascript技巧

test() 方法用于检测一个字符串是否匹配某个模式. 返回一个 Boolean 值,它指出在被查找的字符串中是否匹配给出的正则表达式. regexp.test(str) 参数 regexp 必选项.包含正则表达式模式或可用标志的正则表达式对象. str    必选项.要在其上测试查找的字符串. 说明 test 方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false. 每个正则表达式都有一个 lastIndex 属性,用于记录上一次匹配结束的位置. var

浅谈js中字符和数组一些基本算法题_javascript技巧

最近在刷 fcc的题,跟升级打怪一样,一关一关的过,还挺吸引我的.今天抽时间把 Basic Algorithm Scritping  这部分题做了,根据一些提示,还是比较简单的.有些题的处理方式 方法,我想值得借鉴.比如在项目中有时候要处理一个字符,如果想不到一些相关的方法,还挺费事的,所以,在此记录下来,如果以后遇到一些字符或者数组处理,可以来翻翻这篇文章,希望以此得到一些提示而不是去翻文档. 看到此博文的博友,有更好更简单的代码或者好的想法,请留言交流(我一直觉得只有学习别人的优秀代码才能进

浅谈js的html元素的父节点,子节点_javascript技巧

parentNode和parentElement功能一样,childNodes和children功能一样.但是parentNode和childNodes是符合W3C标准的,可以说比较通用.而另外两个只是IE支持,不是标准,Firefox就不支持 示例: "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ,如下: <div id="parent"> <b id="child

浅谈bootstrap源码分析之scrollspy(滚动侦听)_javascript技巧

源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致 <div id="selector" class="navbar navbar-default">

浅谈JS继承_寄生式继承 &amp; 寄生组合式继承_javascript技巧

5.寄生式继承 与寄生构造函数和工厂模式类似,创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象. function createAnother(original){ var clone = Object.create(original); //通过调用函数创建一个新对象 clone.sayHi = function(){ //以某种方式来增强这个对象 alert("Hi"); }; return clone; //返回这个对象 } var person