如何使用jQuery解码HTML实体?

2020/10/02 15:41 · javascript ·  · 0评论

如何使用jQuery解码字符串中的HTML实体?

安全说明:使用此答案(下面以其原始形式保留)可能会在您的应用程序中引入XSS漏洞您不应该使用此答案。阅读lucascaro的答案以获取对该答案中漏洞的解释,然后改用该答案或Mark Amery的答案中的方法

其实试试看

var decoded = $("<div/>").html(encodedStr).text();

没有任何jQuery:

function decodeEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

console.log(decodeEntities('1 &amp; 2')); // '1 & 2'

这类似于已接受的答案,但是可以安全地用于不受信任的用户输入。


相似方法中的安全性问题

正如Mike Samuel指出的那样,使用x<div>而不是<textarea>使用不受信任的用户输入执行此操作是一个XSS漏洞,即使<div>从未将它添加到DOM中也是如此:

function decodeEntities(encodedString) {
  var div = document.createElement('div');
  div.innerHTML = encodedString;
  return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

但是,针对a的攻击是不可能的,<textarea>因为没有HTML元素是允许的内容<textarea>因此,浏览器会自动对所有仍在“已编码”字符串中的HTML标签进行实体编码。

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

警告对于某些版本的jQuery,即使使用也要使用jQuery.html().val()方法而不是使用来进行操作.innerHTML.value这也是不安全的* 这是因为旧版jQuery会故意并显式评估传递给的字符串中包含的脚本因此,这样的代码在jQuery 1.8中显示了警报:textarea.html()

//<!-- CDATA
// Shows alert
$("<textarea>")
.html("<script>alert(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@VyvIT注释中的encodeEntities)。

Underscore.js实用程序带库随附escapeunescape方法,但对于用户输入而言它们并不安全:

_.escape(字符串)

_.unescape(字符串)

我认为您在混淆文本和HTML方法。看这个例子,如果您使用元素的内部HTML作为文本,则将获得解码的HTML标签(第二个按钮)。但是,如果将它们用作HTML,则将获得HTML格式的视图(第一个按钮)。

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

第一个按钮写道:这是HTML内容。

第二个按钮写道:这是<B> HTML </ B>的内容。

顺便说一句,您可以看到我在jQuery插件中找到的插件-HTML解码和编码,可以HTML字符串进行编码和解码。

这个问题受“ with jQuery”的限制,但它可能会帮助一些人知道,此处最佳答案中给出的jQuery代码在下面做了以下工作……无论有无jQuery,它都能工作:

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}

您可以使用he库,库可从https://github.com/mathiasbynens/he获得

例:

console.log(he.decode("J&#246;rg &amp J&#xFC;rgen rocked to &amp; fro "));
// Logs "Jörg & Jürgen rocked to & fro"

质疑图书馆的作者是否有任何理由在客户端代码中使用此图书馆,以支持此处和其他地方的其他答案中<textarea>提供技巧他提供了一些可能的理由:

  • 如果您在服务器端使用node.js,则使用用于HTML编码/解码的库可为您提供一个在客户端和服务器端均可使用的解决方案。

  • 某些浏览器的实体解码算法存在错误或缺少对某些命名字符引用的支持例如,Internet Explorer将&nbsp;正确地解码和呈现不间断空格(),但将它们报告为普通空间,而不是通过DOM元素的innerText属性将其报告为不间断空格,从而打破了<textarea>hack(尽管只是次要的方式)。此外,IE 8和9根本不支持HTML 5中添加的任何新的命名字符引用。的作者还在http://mathias.html5.org/tests/html上托管了对命名字符引用支持的测试。/ named-character-references /在IE 8中,它报告超过一千个错误。

    如果您想避免与实体解码有关的浏览器错误和/或能够处理所有命名字符引用,则无法逃脱<textarea>你需要像这样的图书馆

  • 他真是个好主意,感觉像这样做事不那么狡猾。

编码:

$("<textarea/>").html('<a>').html();      // return '&lt;a&gt'

解码:

$("<textarea/>").html('&lt;a&gt').val()   // return '<a>'

myString = myString.replace( /\&amp;/g, '&' );

在服务器端最容易做到这一点,因为显然JavaScript没有用于处理实体的本机库,对于扩展JavaScript的各种框架,我也没有在搜索结果的顶部找到任何内容。

搜索“ JavaScript HTML实体”,您可能会为此目的找到一些库,但是它们可能全部基于上述逻辑构建-逐个实体替换。

尝试这个 :

var htmlEntities = "&lt;script&gt;alert('hello');&lt;/script&gt;";
var htmlDecode =$.parseHTML(htmlEntities)[0]['wholeText'];
console.log(htmlDecode);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

parseHTML是Jquery库中的Function,它将返回一个数组,其中包含有关给定String的一些详细信息。

在某些情况下,字符串很大,因此该函数会将内容分为许多索引。

并获取所有索引数据,您应该转到任何索引,然后访问称为“ wholeText”的索引。

我选择索引0是因为它在所有情况下都可以使用(小字符串或大字符串)。

我只需要一个HTML实体字符(⇓)作为HTML按钮的值即可。HTML代码从浏览器开始就看起来不错:

<input type="button" value="Embed & Share  &dArr;" id="share_button" />

现在,我添加了一个开关,该开关也应显示字符。这是我的解决方案

$("#share_button").toggle(
    function(){
        $("#share").slideDown();
        $(this).attr("value", "Embed & Share " + $("<div>").html("&uArr;").text());
    }

这将再次在按钮中显示⇓。我希望这可以帮助某人。

您必须对html实体进行自定义功能:

function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;').replace(/"/g, '&quot;');
}

假设您在String下面。

我们的豪华客舱温暖,舒适,舒适。自在

var str = $("p").text(); // get the text from <p> tag
$('p').html(str).text();  // Now,decode html entities in your variable i.e 

str并分配回

标签。

而已。

对于ExtJS用户,如果您已经有了编码的字符串,例如,当库函数的返回值是innerHTML内容时,请考虑以下ExtJS函数:

Ext.util.Format.htmlDecode(innerHtmlContent)

扩展一个String类:

String::decode = ->
  $('<textarea />').html(this).text()

并用作方法:

"&lt;img src='myimage.jpg'&gt;".decode()

这仍然是一个问题:分配给输入值的转义字符串看起来不可读

var string = _.escape("<img src=fake onerror=alert('boo!')>");
$('input').val(string);

范例:https://jsfiddle.net/kjpdwmqa/3/

或者,也有一个图书馆。

在这里,https://cdnjs.com/libraries/he

npm install he                 //using node.js

<script src="js/he.js"></script>  //or from your javascript directory

用法如下...

//to encode text 
he.encode('© Ande & Nonso® Company LImited 2018');  

//to decode the 
he.decode('&copy; Ande &amp; Nonso&reg; Company Limited 2018');

干杯。

要使用jQuery解码HTML实体,只需使用以下功能:

function html_entity_decode(txt){
    var randomID = Math.floor((Math.random()*100000)+1);
    $('body').append('<div id="random'+randomID+'"></div>');
    $('#random'+randomID).html(txt);
    var entity_decoded = $('#random'+randomID).html();
    $('#random'+randomID).remove();
    return entity_decoded;
}

如何使用:

Javascript:

var txtEncoded = "&aacute; &eacute; &iacute; &oacute; &uacute;";
$('#some-id').val(html_entity_decode(txtEncoded));

HTML:

<input id="some-id" type="text" />

最简单的方法是为您的元素设置类选择器,然后使用以下代码:

$(function(){
    $('.classSelector').each(function(a, b){
        $(b).html($(b).text());
    });
});

不需要了!

我遇到了这个问题,并找到了明确的解决方案,并且效果很好。

我认为这与选择的解决方案完全相反。

var decoded = $("<div/>").text(encodedStr).html();
本文地址:http://javascript.askforanswer.com/ruheshiyongjqueryjiemahtmlshiti.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!