我如何使用jQuery解码字符串中的HTML实体?
当前回答
我认为这与我们选择的解决方案完全相反。
var decoded = $("<div/>").text(encodedStr).html();
其他回答
不使用jQuery:
function decodeEntities(encodedString) { var textArea = document.createElement('textarea'); textArea.innerHTML = encodedString; 返回文本区域值; } console.log(decodeEntities('1 & 2'));'1 & 2'
这与可接受的答案类似,但用于不受信任的用户输入是安全的。
类似方法中的安全问题
正如Mike Samuel所指出的,使用<div>而不是使用不受信任的用户输入的<textarea>是一个XSS漏洞,即使<div>从未添加到DOM:
函数decode (encodedString) { var div = document.createElement('div'); div.innerHTML = encodedString; 返回div.textContent; } //显示警报 decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')
但是,这种攻击对<textarea>是不可能的,因为没有允许<textarea>内容的HTML元素。因此,任何HTML标记仍然出现在'encoded'字符串中,浏览器将自动对其进行实体编码。
函数decode (encodedString) { var textArea = document.createElement(' textArea '); 文本区域。innerHTML = encodedString; 返回textArea.value; } //安全,并返回正确的答案 console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')))
警告:使用jQuery的.html()和.val()方法而不是使用. innerhtml和.value对于某些版本的jQuery来说也是不安全的,即使在使用textarea时也是如此。这是因为旧版本的jQuery会故意显式地计算传递给.html()的字符串中包含的脚本。因此,在jQuery 1.8中,这样的代码显示了一个警告:
<!-- CDATA 显示警报 $(“<textarea>”) .html(“<script>警报(1337);</script>”) .text(); //--> <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script>
*感谢Eru Penkman捕获此漏洞。
就像Mike Samuel说的,不要使用jQuery.html().text()来解码html实体,因为这是不安全的。
相反,使用模板渲染器,如Mustache.js或decodeEntities从@VyvIT的评论。
js实用带库提供了escape和unescape方法,但它们对用户输入不安全:
_.escape(string)
_.unescape(string)
对于ExtJS用户,如果你已经有了编码的字符串,例如当一个库函数的返回值是innerHTML内容时,考虑这个ExtJS函数:
Ext.util.Format.htmlDecode(innerHtmlContent)
Use
myString = myString.replace( /\&/g, '&' );
在服务器端最容易做到这一点,因为JavaScript显然没有用于处理实体的原生库,我也没有在搜索结果的顶部找到任何扩展JavaScript的框架。
搜索“JavaScript HTML实体”,你可能会找到一些用于此目的的库,但它们可能都是围绕上述逻辑构建的——逐个实体替换。
编码:
$(“<textarea/>”).html('<a>').html(); // 返回 '<a>' <script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <textarea/>
解码:
$(“<textarea/>”).html('<a>').val() // return '<a>' <script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <textarea/>
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求