jQueryでHTML文字列をエスケープする

jQueryで文字列からHTMLをエスケープする簡単な方法を知っている人はいますか？任意の文字列を渡し、HTMLページに表示するために適切にエスケープする必要があります（JavaScript / HTMLインジェクション攻撃を防ぐため）。これを行うためにjQueryを拡張することは可能だと確信していますが、現時点では、これを実現するためのフレームワークについて十分に理解していません。

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;

moustache.jsからのソリューションもあります

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

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

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

出典：http : //debuggable.com/posts/encode-html-entities-with-jquery : 480f4dd6-13cc-4ce9-8071-4710cbdd56cb

HTMLにエスケープする場合、本当に必要だと考えることができるのは3つだけです。

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

あなたのユースケースに応じて、あなたも同じようなことを行う必要があります"します"。リストが十分に大きくなった場合は、配列を使用します。

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ではなく、URLに対してのみエスケープします。

アンダースコアを使用するのに十分簡単：

_.escape(string) 

Underscoreは、ネイティブjsが提供しない多くの機能を提供するユーティリティライブラリです。アンダースコアと同じAPIであるlodashもありますが、よりパフォーマンスが高くなるように書き直されました。

これを行う小さな関数を書きました。それが唯一の脱出"、&、<および>（通常はそれはあなたがとにかく必要なすべてのです）。これは、1つ だけを使用.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];
    });
}

上記の'forアポストロフィの使用に注意してください（シンボリックエンティティ'が代わりに使用された可能性があります。XMLで定義されていますが、元々はHTML仕様に含まれていなかったため、すべてのブラウザーでサポートされているわけではありません。参照：HTML文字エンコーディングに関するWikipediaの記事）。10進エンティティを使用する方が16進を使用するよりも広くサポートされていることをどこかで読んだことを思い出しますが、そのソースを今は見つけられないようです。（そして、16進数のエンティティをサポートしない多くのブラウザは存在できません。）

注：エスケープ文字のリストにを追加/し'ても、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]; });
    };
}());

2つのバージョンのどちらが速いかはテストしていません。その場合は、ここに情報とリンクを自由に追加してください。

私はこのパーティーにどれほど遅れているかを理解していますが、jQueryを必要としない非常に簡単な解決策があります。

escaped = new Option(unescaped).innerHTML;

編集：これは引用符をエスケープしません。引用符をエスケープする必要がある唯一のケースは、コンテンツがHTML文字列内の属性にインラインで貼り付けられる場合です。これが良いデザインになるケースを想像するのは難しいです。

編集3：最速のソリューションについては、Saramからの上記の答えを確認してください。これが一番短いです。

以下は、クリーンでクリアなJavaScript関数です。「少数<多く」などのテキストを「少数＆多く」にエスケープします。

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;');
}

最後のテストの後、ブラウザ間で互換性のあるネイティブの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
}

私の最終的なパフォーマンス比較を見てください（スタックの質問）。

Underscore.string libを試してください。jQueryで動作します。

_.str.escapeHTML('<div>Blah blah blah</div>')

出力：

'<div>Blah blah blah</div>'

escapeHTML()文字列オブジェクトにメソッドを追加するmustache.jsの例を拡張しました。

var __entityMap = {
    "&": "&",
    "<": "&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()

escape() そして unescape() URLのではなく、HTMLのためのエンコード/デコード文字列に意図されています。

実際、私は次のスニペットを使用して、フレームワークを必要としないトリックを実行します。

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

underscore.jsがある場合は、以下を使用します_.escape（上記のjQueryメソッドよりも効率的です）。

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

あなたが正規表現のルートを使用している場合、上記の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]]);
}

これは素晴らしい安全な例です...

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;
    }
}

バニラjsで簡単にできます。

ドキュメントにテキストノードを追加するだけです。ブラウザによってエスケープされます。

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

(function(undefined){
    var charsToReplace = {
        '&': '&',
        '<': '&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<tag>and&symbol©"

JQUERYを必要としない2つの簡単な方法...

次のように、文字列のすべての文字をエンコードできます。

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>

単純な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;"

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

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

魅力のように働く

この回答は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'))

すべての主要なブラウザはまだ短いコードをサポートしており、古いウェブサイトの数を考えると、すぐに変わるとは思えません。

ES6は、mustache.jsからのソリューションの1つのライナー

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

この情報をデータベースに保存する場合、クライアント側のスクリプトを使用してHTMLをエスケープするのは間違っています。これはサーバーで行う必要があります。それ以外の場合、XSS保護をバイパスするのは簡単です。

私のポイントを明確にするために、ここに答えの1つを使用した例があります：

関数escapeHtmlを使用してブログのコメントからHtmlをエスケープし、それをサーバーに投稿するとします。

var entityMap = {
    "&": "&",
    "<": "&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
}

再エスケープを防止しないと、すべてのソリューションは役に立ちません。たとえば、ほとんどのソリューションはにエスケープ&し続け&ます。

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] + ";";
        }
    ) : "";
};