使用jQuery转义HTML字符串


609

有谁知道一种简单的方法来从jQuery的字符串中转义HTML ?我需要能够传递任意字符串并正确地对其进行转义以显示在HTML页面中(防止JavaScript / HTML注入攻击)。我敢肯定可以扩展jQuery来做到这一点,但是目前我对框架的了解还不够。


Answers:


445

由于您使用的是jQuery,因此只需设置元素的text属性即可:

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;

57
您错过了必须访问$(“ div.someClass”)。html()以获取转义版本的观点。
Morten Christiansen,2009年

16
如果您的字符串中包含空格和\ n \ r \ t字符,则这不是跨浏览器安全的
nivcaner 2010年

20
@travis在jQuery网站上有记录:“由于不同浏览器中HTML解析器的不同,返回的文本可能在换行符和其他空格中有所不同。” api.jquery.com/text
geofflee 2011年

3
@mklement(如果您已经在使用此解决方案),则执行以下操作不会有任何问题:$(element2).attr("some-attr", $(element1).html());参见以下示例:jsbin.com/atibig/1/edit
travis

16
这不会转义引号和双引号,这是不好的!wonko.com/post/html-escaping
Lior

600

mustache.js也提供了解决方案

var entityMap = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

7
注意,奇怪的'是,它映射到十进制格式的实体,而/使用十六进制格式。
mklement0

43
这应该是公认的答案-它简单,高效,不需要依赖关系,并且完全可以实现预期目的而不会造成晦涩的黑手。
lorefnon

6
转换\n<br>什么指南?
2013年

2
这是到源的更新链接:github.com/janl/mustache.js/blob/…–
mjackson

8
@amwinter,我将脚本扩展为在实体映射上添加“ \ n”:'<br>',并将正则表达式更新为/ [&<>“'\ /] | [\ n] / g
walv,2014年

182
$('<div/>').text('This is fun & stuff').html(); // "This is fun &amp; stuff"

来源:http//debuggable.com/posts/encode-html-entities-with-jquery480f4dd6-13cc-4ce9-8071-4710cbdd56cb


11
如以上答案中所述,不能保证此解决方案保留空白。
geofflee 2011年

47
应该注意的是,这并不能使单引号或双引号转义。如果您打算将值放入HTML属性,则可能会出现问题。
基普

6
@Kip:@travis发现jQuery的attr()方法(如至少1.8.3的)确实其自己的编码,以使未编码的字符串可以通过直接 ; 例如:$('<div/>').attr('test-attr', '\'Tis "fun" & stuff')[0].outerHTML
mklement0

1
@tarekahf这很奇怪。您正在使用哪个版本的jQuery?如果您原样复制粘贴示例代码,是否可以正常工作?在这里使用最新的jQuery(3.1.0)可以正常工作:jsbin.com/fazimigayo/1/edit?html,js,console,output(它也应该在所有早期版本上都可以使用)
Henrik

1
@tarekahf $('<div/>')创建一个div未附加到DOM 的新元素。因此,它不会更改任何现有元素。jQuery如何使用相同的$()函数来查找元素($('div'))和创建元素,以及其他更多的东西,这让人有些困惑,... :)
Henrik N

61

如果您转义使用HTML,那么我认为只有三点是真正必要的:

html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

根据你的使用情况,您可能还需要做这样的事情"&quot;。如果列表足够大,我将使用一个数组:

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
    escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent() 只会针对网址而不是HTML进行转义。


13
如果所讨论的HTML已经逃脱了实体,则该正则表达式将产生奇怪的结果。例如,转义“ Tom&amp; Jerry”将产生“ Tom&amp; amp; Jerry”
Ryan 2010年

12
请使用本地var声明item;无论如何,for … in遍历数组时根本不要使用循环!请改用普通for循环。哦encodeURIComponent,不是escapeURIComponent
Marcel Korpel

3
如果使用标记属性,则还需要转义引号和/或双引号。htmlspecialchars的PHP文档包含一个有用的转换列表。php.net/htmlspecialchars
geofflee 2011年

4
只是对新人们的一种提醒,如果您打算在网站上的某个地方使用非英语字符,请不要使用此功能……显然,由于带有诸如“é”的重音符号的字符,因此不会使用此功能&eacute;以下是html实体的列表,以供参考:w3schools.com/tags/ref_entities.asp
LoganWolfer 2011年

11
@Ryan:值得指出的是,该解决方案无法正确处理已经编码的字符串,但同样适用于此页面上大多数(可能是全部)解决方案的内容也毫无价值。
mklement0 2013年

37

易于使用的下划线:

_.escape(string) 

Underscore是一个实用程序库,提供了许多本机js不提供的功能。还有lodash,它是与下划线相同的API,但被重写以提高性能。


36

我写了一个小小的函数来做到这一点。它只是逃脱"&<>(但通常这就是你所需要的是这样)。它比早期提出的解决方案稍微好一点,因为它只使用一个 .replace()来完成所有转换。(编辑2:降低了代码复杂度,使函数变得更小,更整洁,如果您对原始代码感到好奇,请参阅此答案的结尾。)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

这是纯Javascript,未使用jQuery。

逃离/'

根据mklement的评论进行编辑。

上述功能可以轻松扩展为包含任何字符。要指定更多要转义的字符,只需将它们插入正则表达式的字符类中(即)内,/[...]/g并作为chr对象中的条目即可。(编辑2:同样也缩短了此功能。)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

请注意上述&#39;对单引号的用法(&apos;可能已改为使用符号实体-它是用XML定义的,但最初并未包含在HTML规范中,因此可能不被所有浏览器支持。请参阅:有关HTML字符编码的维基百科文章)。我还记得在某个地方读到,使用十进制实体比使用十六进制更受支持,但是我现在似乎找不到其来源。(并且那里不存在很多不支持十六进制实体的浏览器。)

注意:在转义字符列表中添加/'并不是很有用,因为它们在HTML中没有任何特殊含义,也不需要转义。

原始escapeHtml功能

编辑2:原始函数使用变量(chr)存储.replace()回调所需的对象。此变量还需要一个额外的匿名函数来对其进行范围划分,从而(不必要地)使该函数更大,更复杂。

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

我尚未测试两个版本中哪个更快。如果您愿意,请随时在此处添加信息和有关它的链接。


感谢您抽出宝贵时间,@ Zrajm。关于不需要逃避的好处;任何想法,为什么都mustache.jsunderscore.js办呢?后者的发言:它只能识别数值实体(表示'/“),在大写十六进制形式时逸出。因此,文本转义为mustache.js-奇怪地混合使用了十六进制。和十进制格式-在中无法正确取消转义underscore.js。我不知道其他受欢迎的图书馆如何处理这一问题。
mklement0

1
小写的十六进制形式是最受支持的形式,因此(可能)是库应转换的形式。(当然,。转换时,这两种形式都应该起作用。)–撇号'在XML中具有某种保留功能(因此,我想是XHTML,这是为什么?),这就是XML(而不是HTML)具有命名实体的原因&apos;。我不知道到底是为什么还是以什么方式“保留”它。– URL中的斜线是特殊的,但实际上并不能保证将其包含在转义HTML中(因为URL编码是完全不同的)。
zrajm

回复&apos;:正确:只能在XHTML中安全使用;从众人的口中直接说出 -强调我:“(...)由合格的HTML处理器读取,(...)使用'或自定义实体引用可能不受支持(...)”-实际上:现代浏览器甚至支持HTML。重新大小写为十六进制数字。(相同的来源;重点是我的):“ x在XML文档中必须为小写。[…] hhhh可以混合使用大写和小写,尽管大写是常用样式。” 让我们想知道谁决定对斜线进行编码;也许真的只是URI和HTML编码之间的混淆?
mklement0

2
最后的想法:似乎/不需要编码,但是编码'对于安全处理编码字符串用作单引号中属性值的情况似乎仍然有用。
mklement0

两者都很慢。两位数最快的解决方案是一系列替换,这些替换是通过字符串而不是函数传递的。
亚当·莱格特

34

我知道我参加这个聚会有多晚,但是我有一个非常简单的解决方案,不需要jQuery。

escaped = new Option(unescaped).innerHTML;

编辑:这不会转义引号。需要将引号转义的唯一情况是将内容内联粘贴到HTML字符串中的属性上。对于我来说,很难想象这样做会是一个好的设计。

编辑3:为获得最快的解决方案,请检查上面Saram的答案。这是最短的。


这不会改变引号-至少现在在Firefox 52中是这样
。– getsetbro

1
转义引号仅在功能上与属性相关。由于我们正在转义<>,所以转义引号也没有任何好处,除非生成的内容的目的是进入属性。
亚当·莱格特

31

这是一个干净清晰的JavaScript函数。它将诸如“几<许多”的文本转义为“几&lt;许多”。

function escapeHtmlEntities (str) {
  if (typeof jQuery !== 'undefined') {
    // Create an empty div to use as a container,
    // then put the raw text in and get the HTML
    // equivalent out.
    return jQuery('<div/>').text(str).html();
  }

  // No jQuery, so use string replace.
  return str
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

28

经过最后的测试后,我可以推荐最快和完全跨浏览器兼容的本机JavaScript(DOM)解决方案:

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

如果您重复多次,则可以使用一次准备好的变量进行操作:

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

查看我的最终性能比较堆栈问题)。


2
是否需要使用两个节点?怎么样:var p = document.createElement('p'); p.textContent = html; return p.innerHTML;
Dan Dascalescu

2
@DanDascalescu:据MDN称textContent只有Chrome 1 +,Firefox 2,IE9,Opera 9.64和Safari 3(后两个注解“可能更早”)才支持该功能。因此,这将打破OP的“完全跨浏览器兼容”的主张。
zb226 2015年

p.innerText = html; return p.innerHTML
Bekim Bacaj


15

我已经增强了mustache.js示例,将escapeHTML()方法添加到字符串对象。

var __entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).replace(/[&<>"'\/]/g, function (s) {
        return __entityMap[s];
    });
}

这样很容易使用 "Some <text>, more Text&Text".escapeHTML()


有用,但我也__entityMap进入了函数本地范围。并将所有这些内容包装到if (typeof String.prototype.escapeHTML !== 'function'){...}
FlameStorm

15

escape()并且unescape()旨在对URL(而非HTML)的字符串进行编码/解码。

实际上,我使用以下代码片段来完成不需要任何框架的技巧:

var escapedHtml = html.replace(/&/g, '&amp;')
                      .replace(/>/g, '&gt;')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');

如果要使用"s,则需要至少添加'和``。只有html元素中的字符串标记数据才真正需要这些标记。对于html数据本身(外部标签),仅需要前3个。
Marius

10

如果您有underscore.js,请使用_.escape(比上面发布的jQuery方法更有效):

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry &amp; Moe

5

如果您要使用正则表达式,则上述tghw的示例中有错误。

<!-- WON'T WORK -  item[0] is an index, not an item -->

var escaped = html; 
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g,"&gt;"], [/"/g,
"&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(item[0], item[1]);   
}


<!-- WORKS - findReplace[item[]] correctly references contents -->

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}

2
我认为应该是for(findReplace中的var项目){ }
克里斯·斯蒂芬斯

5

这是一个很好的例子。

function escapeHtml(str) {
    if (typeof(str) == "string"){
        try{
            var newStr = "";
            var nextCode = 0;
            for (var i = 0;i < str.length;i++){
                nextCode = str.charCodeAt(i);
                if (nextCode > 0 && nextCode < 128){
                    newStr += "&#"+nextCode+";";
                }
                else{
                    newStr += "?";
                }
             }
             return newStr;
        }
        catch(err){
        }
    }
    else{
        return str;
    }
}

4
您在那里抑制哪些类型的异常?
Stefan Majewsky 2012年

3

您可以使用vanilla js轻松实现。

只需在文档中添加文本节点即可。浏览器会将其转义。

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)

2
(function(undefined){
    var charsToReplace = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;'
    };

    var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
    var replaceFn = function(tag){ return charsToReplace[tag] || tag; };

    var replaceRegF = function(replaceMap) {
        return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
    };
    var replaceFnF = function(replaceMap) {
        return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
    };

    String.prototype.htmlEscape = function(replaceMap) {
        if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
        return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
    };
})();

没有全局变量,一些内存优化。用法:

"some<tag>and&symbol©".htmlEscape({'©': '&copy;'})

结果是:

"some&lt;tag&gt;and&amp;symbol&copy;"

2

2个不需要JQUERY的简单方法...

您可以像这样对字符串中的所有字符进行编码

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

或者只是针对主角担心&,换行符<>"'这样的:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/
<p><b>What JavaScript Generated:</b></p>

<textarea id=test rows="3" cols="55"></textarea>

<p><b>What It Renders Too In HTML:</b></p>

<div id="testing">www.WHAK.com</div>


2

纯JavaScript转义示例:

function escapeHtml(text) {
    var div = document.createElement('div');
    div.innerText = text;
    return div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"

3
不建议使用仅代码的答案,因为它们没有解释如何解决问题。请更新您的答案,以说明此问题已获得的其他接受和认可的答案如何改进。此外,这个问题已有9年历史,最近遇到未解决问题的用户将更加赞赏您的努力。请查看我如何写一个好的答案
FluffyKitten '17

1
@FluffyKitten是一篇极具讽刺意味的博客文章,介绍了此功能的优缺点,详细解释了您想知道的所有内容:) shebang.brandonmintern.com/…–
db306

@ db306答案被标记为低质量,因为仅代码的答案不符合堆栈溢出准则-请参阅如何编写一个好的答案。在评论过程中添加了我的评论,以解释需要改进的地方,即,答案需要更新以解释代码的作用以及如何根据现有答案进行改进。来自其他审稿人的支持者对此表示赞同。向评论添加外部链接仍然不符合SO准则。相反,安德鲁需要在其答案中直接包括相关信息。
FluffyKitten

请注意,brandonmintern DOT com已过期,现已停放。新的shebang地址为shebang.mintern.net/foolproof-html-escaping-in-javascript/。
布兰登

0
function htmlEscape(str) {
    var stringval="";
    $.each(str, function (i, element) {
        alert(element);
        stringval += element
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(' ', '-')
            .replace('?', '-')
            .replace(':', '-')
            .replace('|', '-')
            .replace('.', '-');
    });
    alert(stringval);
    return String(stringval);
}

0
function htmlDecode(t){
   if (t) return $('<div />').html(t).text();
}

奇迹般有效


文本删除了html标签,但是$('<div />')。html(t).html(); 作品
巴斯·乔布森

0

这个答案提供了jQuery和普通的JS方法,但是最短的是不使用DOM:

unescape(escape("It's > 20% less complicated this way."))

转义字符串: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

如果转义空间困扰您,请尝试:

unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))

转义字符串: It%27s %3E 20%25 less complicated this way.

不幸的是,该escape()功能在JavaScript版本1.5中已弃用encodeURI()或是encodeURIComponent()替代方法,但它们会忽略',因此最后一行代码将变为:

decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))

所有主要的浏览器仍然支持短代码,并且鉴于旧网站的数量,我怀疑这种情况很快会改变。


这用于URL编码。问题是关于HTML转义,这是非常不同的。
Thelem

@thelem,不是将字符串嵌入HTML中嵌入的JavaScript数组中,而是我同意这与纯HTML转义有关,因此可以立即将其显示为文本。
Cees Timmerman

0

ES6一个来自mustache.js解决方案的衬板

const escapeHTML = str => (str+'').replace(/[&<>"'`=\/]/g, s => ({'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;','`': '&#x60;','=': '&#x3D;'})[s]);

-2

如果将此信息保存在数据库中,使用客户端脚本转义HTML是错误的,则应在服务器中完成此操作。否则,它很容易绕过您的XSS保护。

为了阐明我的观点,以下是使用其中一个答案的示例:

假设您正在使用功能escapeHtml从博客中的注释中转义Html,然后将其发布到服务器。

var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
    });
  }

用户可以:

  • 编辑POST请求参数,并将注释替换为javascript代码。
  • 使用浏览器控制台覆盖escapeHtml函数。

如果用户将此代码段粘贴到控制台中,它将绕过XSS验证:

function escapeHtml(string){
   return string
}

我不同意。要绕过此XSS保护,您必须使用XSS攻击(注入禁用转义的脚本),这实际上是您要阻止的攻击。在某些情况下,实际上更适合在客户端上转义,例如,如果数据来自必须返回标准JSON的REST API。
ItalyPaleAle 2015年

@Qualcuno如果您要在客户端中进行此验证,然后将此信息发布到服务器上以确保它已被验证,则用户可以简单地编辑请求并将脚本保存在数据库中。
考艾·吉梅内斯

@Qualcuno我提供了一些示例来使我的观点更加清楚。
考艾·吉梅内斯

1
问题在于转义从服务器接收的字符串以在浏览器中显示它们。您要说的是在将字符串提交到服务器之前转义字符串,这是另一回事(尽管您是对的,而且回到了旧规则,永远不要盲目接受客户端的任何输入
ItalyPaleAle

@Qualcuno这是Stackoverflow中一个流行的问题,我相信这是一个很重要的要点。那就是为什么我回答。
考艾·吉梅内斯

-2

如果您不防止再次逃脱,则所有解决方案都是无用的,例如,大多数解决方案将一直逃脱&&amp;

escapeHtml = function (s) {
    return s ? s.replace(
        /[&<>'"]/g,
        function (c, offset, str) {
            if (c === "&") {
                var substr = str.substring(offset, offset + 6);
                if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
                    // already escaped, do not re-escape
                    return c;
                }
            }
            return "&" + {
                "&": "amp",
                "<": "lt",
                ">": "gt",
                "'": "apos",
                '"': "quot"
            }[c] + ";";
        }
    ) : "";
};

4
这称为双重转义,应通过确保输入数据尚未转义的方法来解决。如果您想直接显示&lt;怎么办?给用户?还是文本将在其他地方重用,并取决于发生的转义?
Thelem
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.