备案控制台
探索云世界
开发者社区 云计算 文章 正文

HtmlEncode和JavaScriptEncode（预防XSS）

2016-05-20 4766
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

在数据添加到DOM时候，我们可以需要对内容进行HtmlEncode或JavaScriptEncode，以预防XSS攻击。

JavaScriptEncode

使用“\”对特殊字符进行转义，除数字字母之外，小于127的字符编码使用16进制“\xHH”的方式进行编码，大于用unicode（非常严格模式）。

复制代码 
//使用“\”对特殊字符进行转义，除数字字母之外，小于127使用16进制“\xHH”的方式进行编码，大于用unicode（非常严格模式）。
var JavaScriptEncode = function(str){
     
    var hex=new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
        
    function changeTo16Hex(charCode){
        return "\\x" + charCode.charCodeAt(0).toString(16);
    }
    
    function encodeCharx(original) {
        
        var found = true;
        var thecharchar = original.charAt(0);
        var thechar = original.charCodeAt(0);
        switch(thecharchar) {
            case '\n': return "\\n"; break; //newline
            case '\r': return "\\r"; break; //Carriage return
            case '\'': return "\\'"; break;
            case '"': return "\\\""; break;
            case '\&': return "\\&"; break;
            case '\\': return "\\\\"; break;
            case '\t': return "\\t"; break;
            case '\b': return "\\b"; break;
            case '\f': return "\\f"; break;
            case '/': return "\\x2F"; break;
            case '<': return "\\x3C"; break;
            case '>': return "\\x3E"; break;
            default:
                found=false;
                break;
        }
        if(!found){
            if(thechar > 47 && thechar < 58){ //数字
                return original;
            }
            
            if(thechar > 64 && thechar < 91){ //大写字母
                return original;
            }

            if(thechar > 96 && thechar < 123){ //小写字母
                return original;
            }        
            
            if(thechar>127) { //大于127用unicode
                var c = thechar;
                var a4 = c%16;
                c = Math.floor(c/16); 
                var a3 = c%16;
                c = Math.floor(c/16);
                var a2 = c%16;
                c = Math.floor(c/16);
                var a1 = c%16;
                return "\\u"+hex[a1]+hex[a2]+hex[a3]+hex[a4]+"";        
            }
            else {
                return changeTo16Hex(original);
            }
            
        }
    }     
  
    var preescape = str;
    var escaped = "";
    var i=0;
    for(i=0; i < preescape.length; i++){
        escaped = escaped + encodeCharx(preescape.charAt(i));
    }
    return escaped;
}
复制代码

HtmlEncode

将字符转换成HTMLEntites，以对抗XSS。

复制代码 
var HtmlEncode = function(str){
    var hex = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
    var preescape = str;
    var escaped = "";
    for(var i = 0; i < preescape.length; i++){
        var p = preescape.charAt(i);
        escaped = escaped + escapeCharx(p);
    }
    
    return escaped;
                    
    function escapeCharx(original){
        var found=true;
        var thechar=original.charCodeAt(0);
        switch(thechar) {
            case 10: return "<br/>"; break; //newline
            case 32: return "&nbsp;"; break; //space
            case 34:return "&quot;"; break; //"
            case 38:return "&amp;"; break; //&
            case 39:return "&#x27;"; break; //'
            case 47:return "&#x2F;"; break; // /
            case 60:return "&lt;"; break; //<
            case 62:return "&gt;"; break; //>
            case 198:return "&AElig;"; break;
            case 193:return "&Aacute;"; break;
            case 194:return "&Acirc;"; break; 
            case 192:return "&Agrave;"; break; 
            case 197:return "&Aring;"; break; 
            case 195:return "&Atilde;"; break; 
            case 196:return "&Auml;"; break; 
            case 199:return "&Ccedil;"; break; 
            case 208:return "&ETH;"; break;
            case 201:return "&Eacute;"; break; 
            case 202:return "&Ecirc;"; break; 
            case 200:return "&Egrave;"; break; 
            case 203:return "&Euml;"; break;
            case 205:return "&Iacute;"; break;
            case 206:return "&Icirc;"; break; 
            case 204:return "&Igrave;"; break; 
            case 207:return "&Iuml;"; break;
            case 209:return "&Ntilde;"; break; 
            case 211:return "&Oacute;"; break;
            case 212:return "&Ocirc;"; break; 
            case 210:return "&Ograve;"; break; 
            case 216:return "&Oslash;"; break; 
            case 213:return "&Otilde;"; break; 
            case 214:return "&Ouml;"; break;
            case 222:return "&THORN;"; break; 
            case 218:return "&Uacute;"; break; 
            case 219:return "&Ucirc;"; break; 
            case 217:return "&Ugrave;"; break; 
            case 220:return "&Uuml;"; break; 
            case 221:return "&Yacute;"; break;
            case 225:return "&aacute;"; break; 
            case 226:return "&acirc;"; break; 
            case 230:return "&aelig;"; break; 
            case 224:return "&agrave;"; break; 
            case 229:return "&aring;"; break; 
            case 227:return "&atilde;"; break; 
            case 228:return "&auml;"; break; 
            case 231:return "&ccedil;"; break; 
            case 233:return "&eacute;"; break;
            case 234:return "&ecirc;"; break; 
            case 232:return "&egrave;"; break; 
            case 240:return "&eth;"; break; 
            case 235:return "&euml;"; break; 
            case 237:return "&iacute;"; break; 
            case 238:return "&icirc;"; break; 
            case 236:return "&igrave;"; break; 
            case 239:return "&iuml;"; break; 
            case 241:return "&ntilde;"; break; 
            case 243:return "&oacute;"; break;
            case 244:return "&ocirc;"; break; 
            case 242:return "&ograve;"; break; 
            case 248:return "&oslash;"; break; 
            case 245:return "&otilde;"; break;
            case 246:return "&ouml;"; break; 
            case 223:return "&szlig;"; break; 
            case 254:return "&thorn;"; break; 
            case 250:return "&uacute;"; break; 
            case 251:return "&ucirc;"; break; 
            case 249:return "&ugrave;"; break; 
            case 252:return "&uuml;"; break; 
            case 253:return "&yacute;"; break; 
            case 255:return "&yuml;"; break;
            case 162:return "&cent;"; break; 
            case '\r': break;
            default:
                found=false;
                break;
        }
        if(!found){
            if(thechar>127) {
                var c=thechar;
                var a4=c%16;
                c=Math.floor(c/16); 
                var a3=c%16;
                c=Math.floor(c/16);
                var a2=c%16;
                c=Math.floor(c/16);
                var a1=c%16;
                return "&#x"+hex[a1]+hex[a2]+hex[a3]+hex[a4]+";";        
            }
            else{
                return original;
            }
        }    
    }
}
复制代码

Test

<button onclick='alert("1\x29\x3balert\x282\u54c8\u54c8\x29")'>测试JavaScriptEncode值</button>
<div>&lt;script&gt;alert(&#x27;1&#x54c8;&#x54c8;&#x27;&nbsp;&#x2F;);&lt;&#x2F;script&gt;</div>

这些编码后的内容都能在页面上显示正常。 

番外

还有人弄了简单HtmlEncode，有两种方式。

1. 用浏览器内部转换器实现html转码（但我觉得这种方式有风险的，因为内部转换器可能有漏洞）。

2. 只转一部分html字符（这种方式不完整）。

复制代码 
var HtmlUtil = {
    htmlEncode:function (html){
        var temp = document.createElement ("div");
        (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
        var output = temp.innerHTML;
        temp = null;
        return output;
    },
    htmlDecode:function (text){
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    },
    htmlEncodeByRegExp:function (str){
        var s = "";
        if(str.length == 0) return "";
        s = str.replace(/&/g,"&amp;");
        s = s.replace(/</g,"&lt;");
        s = s.replace(/>/g,"&gt;");
        s = s.replace(/ /g,"&nbsp;");
        s = s.replace(/\'/g,"&#39;");
        s = s.replace(/\"/g,"&quot;");
        return s;
    },
    htmlDecodeByRegExp:function (str){
        var s = "";
        if(str.length == 0) return "";
        s = str.replace(/&amp;/g,"&");
        s = s.replace(/&lt;/g,"<");
        s = s.replace(/&gt;/g,">");
        s = s.replace(/&nbsp;/g," ");
        s = s.replace(/&#39;/g,"\'");
        s = s.replace(/&quot;/g,"\"");
        return s;
    }
};
复制代码

 

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5211667.html


转载：http://www.cnblogs.com/lovesong/p/5211667.html

shy丶gril
目录
相关文章
sumith
|
2月前
|
存储 安全 JavaScript
26、XSS漏洞介绍
26、XSS漏洞介绍
sumith
19 0
德迅云安全杨德俊
|
3月前
|
存储 开发框架 安全
如何处理预防XSS漏洞攻击问题
防止XSS攻击需要从多个方面入手，包括输入验证和过滤、输出编码、设置正确的HTTP头部、使用最新的安全框架和库、定期进行安全审计和漏洞扫描以及培训和意识提升等。只有综合运用这些措施，才能有效地防止XSS攻击，保护网站和用户的安全。
德迅云安全杨德俊
118 0
程序员朱永胜
|
7月前
|
JSON 数据格式
XSS防御
XSS防御
程序员朱永胜
38 0
单红宇
|
Java
Struts2 Xss 攻击预防的处理
关于XSS问题的处理，此前在博客 http://blog.csdn.net/catoop/article/details/50338259 中写过处理方法。刚好最近朋友有问到“在Struts2中按文章中那样处理无效”，后来验证了下发现，Struts2 对请求的二次封装有所不同，于是针对Struts.
单红宇
18631 0
五行缺你994
|
8月前
|
存储 安全 JavaScript
XSS之攻击与防御
在不少人看来，XSS漏洞造成的危害程度并不大，或者说，一个XSS漏洞的可利用价值并不高。但很多时候看起来一个不起眼的.....
五行缺你994
74 0
游客grsdcyoknhiw4
|
8月前
|
安全 JavaScript 前端开发
xss漏洞
xss
游客grsdcyoknhiw4
58 0
程序员小豪
|
9月前
|
安全 JavaScript 前端开发
XSS及CSRF攻击防御
XSS是什么？ XSS即跨站脚本攻击，是由于处理不好用户的输入，导致恶意脚本在浏览器中执行
程序员小豪
94 0
随风kali
|
11月前
|
存储 SQL JavaScript
浅谈如何防御xss攻击
浅谈如何防御xss攻击
随风kali
291 0
有一只柴犬
|
存储 前端开发 JavaScript
XSS攻击及AntiSamy防御
跨站脚本攻击（Cross Site Scripting），因为跟样式css混淆，所以习惯缩写为xss。通过一些方法注入恶意指令代码到网页，使其加载并执行攻击者恶意的网页程序。
有一只柴犬
347 0
XSS攻击及AntiSamy防御
mikechen优知
|
SQL JavaScript 安全
详解程序员常用的3大Web安全漏洞防御解决方案：XSS、CSRF及SQL注入
随着互联网的普及，网络安全变得越来越重要，程序员需要掌握最基本的web安全防范，在项目研发过程中才能防患于未然，下面列举一些常见的安全漏洞和对应的防御措施。
mikechen优知
2939 0

热门文章

最新文章

  • 1
    Linux查看进程的内存占用情况
  • 2
    大咖云集，技术宅开趴倒计时 —— 2017 Kubernetes Meetup | 成都站
  • 3
    ubuntu安装KVM虚拟机管理virt-manager
  • 4
    OpenCV4之C++入门详解 （上）
  • 5
    vue2中computed中无法获取到this
  • 6
    Visual Basic快速入门
  • 7
    HDU 4968 Improving the GPA
  • 8
    这56家公司共同发力智慧城市
  • 9
    书写高质量JavaScript代码的要义（The Essentials of Writing High Quality JavaScript）翻译
  • 10
    linux驱动开发--字符设备：信号量
  • 1
    【软件工程】融通未来的工艺：深度解析统一过程在软件开发中的角色
    13
  • 2
    IBM SPSS Modeler分类决策树C5.0模型分析空气污染物数据
    13
  • 3
    【软件工程】走进瀑布模型：传统软件开发的经典之路
    13
  • 4
    数据分享|R语言用lme4多层次（混合效应）广义线性模型（GLM），逻辑回归分析教育留级调查数据（下）
    11
  • 5
    【软件工程】走近演化过程模型：软件开发的不断进化之路
    84
  • 6
    【Mybatis】深入学习MyBatis：概述、主要特性以及配置与映射
    13
  • 7
    【MySQL】数据库规范化的三大法则 — 一探范式设计原则
    15
  • 8
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现（下）
    12
  • 9
    【MySQL】数据库中为什么使用B+树不用B树
    8
  • 10
    【MySQL】SQL优化
    10

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）