从输入字段读取属性时,HTML编码丢失
我正在使用JavaScript从隐藏字段中提取值并将其显示在文本框中。 隐藏字段中的值被编码。
例如,
<input id='hiddenId' type='hidden' value='chalk & cheese' />
被拉入
<input type='text' value='chalk & cheese' />
通过一些jQuery从隐藏字段中获取值(此时我失去了编码):
$('#hiddenId').attr('value')
问题是,当我阅读chalk & cheese
从隐藏字段起, chalk & cheese
似乎失去了编码。 我不希望这个价值是chalk & cheese
。 我想要文字amp;
被保留。
是否有将对字符串进行HTML编码的JavaScript库或jQuery方法?
#1楼
据我所知,javascript中没有任何直接的HTML编码/解码方法。
但是,您可以做的是使用JS创建一个任意元素,设置其内部文本,然后使用innerHTML读取它。
假设使用jQuery,这应该有效:
var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();
或类似的东西。
#2楼
原型具有内置的String类 。 因此,如果您正在使用/计划使用原型,它会执行以下操作:
'<div class="article">This is an article</div>'.escapeHTML();
// -> "<div class="article">This is an article</div>"
#3楼
编辑:这个答案很久以前发布了,并且htmlDecode
函数引入了XSS漏洞。 已对其进行了修改,将临时元素从div
更改为textarea
从而减少了XSS机会。 但是,如今,我鼓励您使用其他anwswer中建议的DOMParser API。
我使用以下功能:
function htmlEncode(value){// Create a in-memory element, set its inner text (which is automatically encoded)// Then grab the encoded contents back out. The element never exists on the DOM.return $('<textarea/>').text(value).html();
}function htmlDecode(value){return $('<textarea/>').html(value).text();
}
基本上,div元素是在内存中创建的,但是永远不会附加到文档中。
在htmlEncode
函数上,我设置了元素的innerText
,并检索了编码的innerHTML
; 在htmlDecode
函数上,我设置了元素的innerHTML
值,并检索了innerText
。
在此处查看运行示例。
#4楼
您无需转义/编码值即可将它们从一个输入字段传送到另一个输入字段。
<form><input id="button" type="button" value="Click me"><input type="hidden" id="hiddenId" name="hiddenId" value="I like cheese"><input type="text" id="output" name="output">
</form>
<script>$(document).ready(function(e) {$('#button').click(function(e) {$('#output').val($('#hiddenId').val());});});
</script>
JS不会插入原始HTML或其他任何东西; 它只是告诉DOM设置value
属性(或attribute;不确定)。 无论哪种方式,DOM都会为您处理任何编码问题。 除非您做一些奇怪的事情,例如使用document.write
或eval
,否则HTML编码将是有效透明的。
如果您正在谈论生成一个新的文本框来保存结果……那仍然很容易。 只需将HTML的静态部分传递给jQuery,然后在返回给您的对象上设置其余的属性/属性。
$box = $('<input type="text" name="whatever">').val($('#hiddenId').val());
#5楼
这是一个非jQuery版本,比jQuery .html()
版本和.replace()
版本都快得多。 这将保留所有空格,但是像jQuery版本一样,它不处理引号。
function htmlEncode( html ) {return document.createElement( 'a' ).appendChild( document.createTextNode( html ) ).parentNode.innerHTML;
};
速度: http : //jsperf.com/htmlencoderegex/17
演示:
输出:
脚本:
function htmlEncode( html ) {return document.createElement( 'a' ).appendChild( document.createTextNode( html ) ).parentNode.innerHTML;
};function htmlDecode( html ) {var a = document.createElement( 'a' ); a.innerHTML = html;return a.textContent;
};document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );//sanity check
var html = '<div> & hello</div>';
document.getElementById( 'same' ).textContent = 'html === htmlDecode( htmlEncode( html ) ): ' + ( html === htmlDecode( htmlEncode( html ) ) );
HTML:
<input id="hidden" type="hidden" value="chalk & cheese" />
<input id="text" value="" />
<div id="same"></div>
#6楼
如果要使用jQuery。 我找到了这个:
http://www.jquerysdk.com/api/jQuery.html特殊字符
(jQuery SDK提供的jquery.string插件的一部分)
我相信Prototype的问题在于它扩展了JavaScript中的基础对象,并且将与您可能使用的任何jQuery不兼容。 当然,如果您已经在使用Prototype而不是jQuery,那将不是问题。
编辑:也有这,这是jQuery原型字符串实用程序的端口:
http://stilldesigning.com/dotstring/
#7楼
对于那些喜欢纯JavaScript的人,这是我成功使用的方法:
function escapeHTML (str)
{var div = document.createElement('div');var text = document.createTextNode(str);div.appendChild(text);return div.innerHTML;
}
#8楼
var htmlEnDeCode = (function() {var charToEntityRegex,entityToCharRegex,charToEntity,entityToChar;function resetCharacterEntities() {charToEntity = {};entityToChar = {};// add the default setaddCharacterEntities({'&' : '&','>' : '>','<' : '<','"' : '"',''' : "'"});}function addCharacterEntities(newEntities) {var charKeys = [],entityKeys = [],key, echar;for (key in newEntities) {echar = newEntities[key];entityToChar[key] = echar;charToEntity[echar] = key;charKeys.push(echar);entityKeys.push(key);}charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');}function htmlEncode(value){var htmlEncodeReplaceFn = function(match, capture) {return charToEntity[capture];};return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);}function htmlDecode(value) {var htmlDecodeReplaceFn = function(match, capture) {return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));};return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);}resetCharacterEntities();return {htmlEncode: htmlEncode,htmlDecode: htmlDecode};
})();
这是从ExtJS源代码。
#9楼
下划线提供了_.escape()
和_.unescape()
方法。
> _.unescape( "chalk & cheese" );"chalk & cheese"> _.escape( "chalk & cheese" );"chalk & cheese"
#10楼
FWIW,编码不会丢失。 页面加载期间,标记解析器(浏览器)使用该编码。 读取并解析源并将浏览器将DOM加载到内存后,编码便已解析为它表示的内容。 因此,当您的JS执行执行以读取内存中的任何内容时,它得到的字符就是编码所表示的字符。
我可能在这里严格按照语义进行操作,但是我希望您了解编码的目的。 “丢失”一词听起来好像有些东西没有正常工作。
#11楼
<script>
String.prototype.htmlEncode = function () {return String(this).replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''').replace(/</g, '<').replace(/>/g, '>');}var aString = '<script>alert("I hack your site")</script>';
console.log(aString.htmlEncode());
</script>
将输出: <script>alert("I hack your site")</script>
定义后,即可在所有字符串上访问.htmlEncode()。
#12楼
这是一个简单的javascript解决方案。 它使用方法“ HTMLEncode”扩展了String对象,该方法可用于不带参数或带参数的对象。
String.prototype.HTMLEncode = function(str) {var result = "";var str = (arguments.length===1) ? str : this;for(var i=0; i<str.length; i++) {var chrcode = str.charCodeAt(i);result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)}return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))
我的要旨是“ JavaScript的HTMLEncode方法” 。
#13楼
没有Jquery时速度更快。 您可以对字符串中的每个字符进行编码:
function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
或仅针对主要字符来担心(&,inebreaks,<,>,“和'),例如:
function encode(r){ return r.replace(/[\\x26\\x0A\\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"}) } test.value=encode('Encode HTML entities!\\n\\n"Safe" escape <script id=\\'\\'> & useful in <pre> tags!'); testing.innerHTML=test.value; /************* * \\x26 is &ersand (it has to be first), * \\x0A is newline, *************/
<textarea id=test rows="9" cols="55"></textarea> <div id="testing">www.WHAK.com</div>
#14楼
HTML对给定值进行编码
var htmlEncodeContainer = $('<div />');function htmlEncode(value) {if (value) {return htmlEncodeContainer.text(value).html();} else {return '';}}
#15楼
基于angular的清理 ...(ES6模块语法)
// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;const decodeElem = document.createElement('pre');/*** Decodes html encoded text, so that the actual string may* be used.* @param value* @returns {string} decoded text*/
export function decode(value) {if (!value) return '';decodeElem.innerHTML = value.replace(/</g, '<');return decodeElem.textContent;
}/*** Encodes all potentially dangerous characters, so that the* resulting string can be safely inserted into attribute or* element text.* @param value* @returns {string} encoded text*/
export function encode(value) {if (value === null || value === undefined) return '';return String(value).replace(/&/g, '&').replace(SURROGATE_PAIR_REGEXP, value => {var hi = value.charCodeAt(0);var low = value.charCodeAt(1);return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';}).replace(NON_ALPHANUMERIC_REGEXP, value => {return '&#' + value.charCodeAt(0) + ';';}).replace(/</g, '<').replace(/>/g, '>');
}export default {encode,decode};
#16楼
我在Domain \\ User字符串中遇到反斜杠的一些问题。
我将此添加到Anentropic答案的其他转义中
.replace(/\\/g, '\')
我在这里找到的内容: 如何在JavaScript中转义反斜线?
#17楼
我知道这是一个旧的,但我想发布一个可接受的答案的变体, 该变体将在IE中起作用而无需删除行:
function multiLineHtmlEncode(value) {var lines = value.split(/\r\n|\r|\n/);for (var i = 0; i < lines.length; i++) {lines[i] = htmlEncode(lines[i]);}return lines.join('\r\n');
}function htmlEncode(value) {return $('<div/>').text(value).html();
}
#18楼
好答案。 请注意,如果要编码的值在jQuery 1.4.2中undefined
或为null
,则可能会出现以下错误:
jQuery("<div/>").text(value).html is not a function
要么
Uncaught TypeError: Object has no method 'html'
解决方案是修改函数以检查实际值:
function htmlEncode(value){ if (value) {return jQuery('<div/>').text(value).html(); } else {return '';}
}
#19楼
我遇到了类似的问题,并使用JavaScript( 文档 )中的函数encodeURIComponent
解决了该问题
例如,如果您使用的是:
<input id='hiddenId' type='hidden' value='chalk & cheese' />
和
encodeURIComponent($('#hiddenId').attr('value'))
你会得到chalk%20%26%20cheese
。 甚至保留空间。
就我而言,我必须对一个反斜杠进行编码,并且此代码可以完美地运行
encodeURIComponent('name/surname')
我name%2Fsurname
#20楼
这是从纯ASP编写的Microsoft ASP中模拟Server.HTMLEncode
函数的一些Server.HTMLEncode
:
function htmlEncode(s) { var ntable = { "&": "amp", "<": "lt", ">": "gt", "\\"": "quot" }; s = s.replace(/[&<>"]/g, function(ch) { return "&" + ntable[ch] + ";"; }) s = s.replace(/[^ -\\x7e]/g, function(ch) { return "&#" + ch.charCodeAt(0).toString() + ";"; }); return s; }
结果不编码撇号,而是编码其他HTML特殊字符和0x20-0x7e范围外的任何字符。
#21楼
选择escapeHTML()
正在做什么
添加此脚本可以帮助您逃脱HTML:
String.prototype.escapeHTML = function() { return this.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
}
现在,您可以在脚本中的字符串上调用escapeHTML方法,例如:
var escapedString = "<h1>this is HTML</h1>".escapeHTML();
// gives: "<h1>this is HTML</h1>"
希望它可以帮助寻求简单解决方案的任何人,而不必包括整个prototype.js
#22楼
在这里使用其他一些答案,我做出了一个版本,该版本一次通过替换了所有相关字符,而不考虑不同编码字符的数量(仅一次调用replace()
),因此对于较大的字符串会更快。
它不依赖于DOM API的存在或其他库。
window.encodeHTML = (function() {function escapeRegex(s) {return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');}var encodings = {'&' : '&','"' : '"','\'' : ''','<' : '<','>' : '>','\\' : '/'};function encode(what) { return encodings[what]; };var specialChars = new RegExp('[' +escapeRegex(Object.keys(encodings).join('')) +']', 'g');return function(text) { return text.replace(specialChars, encode); };
})();
跑完一次,您现在可以打电话
encodeHTML('<>&"\'')
获得<>&"'
#23楼
我的纯JS功能:
/*** HTML entities encode** @param {string} str Input text* @return {string} Filtered text*/
function htmlencode (str){var div = document.createElement('div');div.appendChild(document.createTextNode(str));return div.innerHTML;
}
JavaScript HTML实体编码和解码
#24楼
function encodeHTML(str) { return document.createElement("a").appendChild( document.createTextNode(str)).parentNode.innerHTML; }; function decodeHTML(str) { var element = document.createElement("a"); element.innerHTML = str; return element.textContent; }; var str = "<" var enc = encodeHTML(str); var dec = decodeHTML(enc); console.log("str: " + str, "\\nenc: " + enc, "\\ndec: " + dec);
#25楼
jQuery技巧不对引号进行编码,在IE中,它将删除空格。
基于Django中的转义 templatetag(我猜它已经被大量使用/测试),我制作了此函数来完成所需的工作。
可以说,它比空白消除问题的任何解决方法都更简单(并且可能更快),并且它对引号进行了编码,例如,如果要在属性值中使用结果,则必须使用引号。
function htmlEscape(str) {return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''').replace(/</g, '<').replace(/>/g, '>');
}// I needed the opposite function today, so adding here too:
function htmlUnescape(str){return str.replace(/"/g, '"').replace(/'/g, "'").replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
}
更新2013-06-17:
在寻找最快的转义过程中,我发现了replaceAll
方法的以下实现:
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(此处也引用: 替换字符串中所有字符实例的最快方法 )
一些性能结果在这里:
http://jsperf.com/htmlencoderegex/25
它为上面的内置replace
链提供了相同的结果字符串。 如果有人可以解释为什么它更快,我将非常高兴!
更新2015-03-04:
我只是注意到AngularJS完全使用上面的方法:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435
他们增加了一些改进-他们似乎正在处理一个晦涩的Unicode问题 ,以及将所有非字母数字字符转换为实体。 我的印象是,只要您为文档指定了UTF8字符集,就不需要后者。
我会注意到(4年后),Django仍然没有执行任何这些操作,因此我不确定它们的重要性:
https://github.com/django/django/blob/1.8b1/django/utils/html.py#L44
更新2016-04-06:
您可能还希望转义正斜杠/
。 正确的HTML编码不是必需的,但是OWASP建议使用它作为反XSS安全措施。 (感谢@JNF在评论中建议这一点)
.replace(/\//g, '/');
从输入字段读取属性时,HTML编码丢失相关推荐
- jackson设置读取属性时使用大写序列化属性时使用小写
jackson是一种使用广泛的json序列化库,虽然性能上可能不如fastjson,但是从其标准性以及安全性上来看(近一年爆出了不少fastjson的漏洞),下面就介绍下本文的主题,jackson序列 ...
- ElasticSearch的multiMatch方法,输入字段过长时,报如下错误,怎么解决?
检索语句: Get XXXX.XXXXX/_search{"query":{"bool" : {"must" : [{"multi ...
- html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
- html5哪个属性规定输入字段是必填的,HTML5期末考试题(卷)型
D. 4.新的HTML5 全局属性,"contenteditable" 用于:( B) A.规定元素的上下文菜单.该菜单会在用户点击右键点击元素时出现. B.规定元素容是否是可编辑 ...
- 【Groovy】编译时元编程 ( ASTTransformation#visit 方法中访问 Groovy 类、方法、字段、属性 | 完整代码示例及进行编译时处理的编译过程 )
文章目录 一.ASTTransformation#visit 方法中访问 Groovy 类.方法.字段.属性 二.完整代码示例及进行编译时处理的编译过程 1.Groovy 脚本 Groovy.groo ...
- Java笔记-解决读取文件时中文乱码问题(InputStreamReader设置编码)
Java一般读取文件时使用如下代码: InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream(&q ...
- html5哪个属性规定输入字段是必填的,HTML5基础知识习题及答案
原标题:HTML5基础知识习题及答案 1. HTML5 之前的HTML版本是什么? 答: HTML 4.01 2. HTML5 的正确doctype是? 答: 3. 在 HTML5 中,哪个元素用于组 ...
- SparkSQL读取文件时,数据字段类型调整
使用spark读取parquet文件时,例如读取在file:///E:/test/clean文件夹下的文件: 而我们的文件内容中的数据结构是: val struct = StructType(Arra ...
- 关于with open() as f读取文件时编码报错问题
一般我们都是这样写,python3 with open(file_path, mode='r') as f:..... 但是有时候读取的内容有编码问题,会报错: UnicodeDecodeError: ...
最新文章
- 【Linux - mysql】怎么修改数据库编码
- 漫画讲解HDFS原理
- A/B Matrix CodeForces - 1360G(思维构造)
- 一文读懂 | 进程怎么绑定 CPU
- 软件测试实践报告文档,软件测试实践报告.doc
- java发送post请求json格式_go语言web开发框架学习系列二:Get、Post、Put等请求及数据返回格式...
- 千方科技的中场战事:选择、进化与野望
- 深入学习c++--智能指针(二) weak_ptr(打破shared_ptr循环引用)
- python房屋租赁系统的设计与实现_基于ssh的房屋租赁系统的设计与实现(含源文件)...
- windows下查找mysql配置文件my.ini
- 【C++】pcl中的简单点云可视化
- Python深度学习笔记04——tensorflow实现神经网络(壹)
- python start方法_进程方法 run和start的区别
- 1227: 苹果和虫子
- python选择哪个版本-Python下载哪个版本比较好?
- CentOS7的Tiger VNC设置
- android 铃声 文件夹,安卓手机怎么设置铃声 安卓铃声文件夹在哪里设置
- 全局代理-WINDOWS怎么设置全局代理?
- rtthread工业使用_在STM32平台跑RT-Thread下的C++详尽使用指南
- 「亲测有效」解决:如何禁用dl.winehq.org | kali 移除winehq源 |由于没有公钥,无法验证下列签名: NO_PUBKEY 76F1A20FF987672F