jQueryによるHTML文字列のエスケープ
https://stackoverflow.com/questions/24816
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
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"><script>alert('hi!');</script></div>
// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value:
// <script>alert('hi!');</script>
他のヒント
var entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escapeHtml (string) {
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}
$('<div/>').text('This is fun & stuff').html(); // "This is fun & stuff"
出典： http：// debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
HTMLをエスケープする場合、本当に必要だと思うことができるのは3つだけです。
html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
ユースケースによっては、"から"などの操作も必要になる場合があります。リストが十分に大きくなった場合、配列を使用します：
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace)
escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);
encodeURIComponent()は、HTMLではなくURLでのみエスケープします。
これを行う小さな関数を作成しました。 "、&、<、および>のみをエスケープします（ただし、通常はこれで十分です）。これは、すべての変換を行うために one .replace()のみを使用するという点で、以前に提案されたソリューションよりもわずかにエレガントです。 （編集2：コードの複雑さを軽減して、関数をより小さく、よりきれいにします。元のコードに興味がある場合は、この回答の終わりを参照してください。）
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}
これはプレーンなJavaScriptであり、jQueryは使用されていません。
エスケープ/および'も
mklement のコメントに応じて編集します。
上記の関数は、任意の文字を含むように簡単に拡張できます。さらにエスケープする文字を指定するには、正規表現の文字クラス（つまり、/[...]/g内）とchrオブジェクトのエントリの両方に挿入します。 （編集2：同様に、この機能も短縮しました。）
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
上記のアポストロフィの'の使用に注意してください（シンボリックエンティティ'が代わりに使用された可能性があります<！>＃8211; XMLで定義されていますが、元々HTML仕様に含まれていなかったため、すべてのブラウザでサポートされています。 HTML文字エンコーディングに関するウィキペディアの記事をご覧ください。また、16進数を使用するよりも10進数のエンティティを使用する方がより広くサポートされていることをどこかで読んだことを思い出しますが、そのソースは今のところ見つかりません。 （そして、16進エンティティーをサポートしていない多くのブラウザーは存在できません。）
注： escapeHtmlと<=>をエスケープ文字のリストに追加することは、HTMLで特別な意味を持たず、必要ないため、それほど便利ではありません。 エスケープされます。
オリジナル<=>関数
編集2：元の関数は、変数（<=>）を使用して、<=>コールバックに必要なオブジェクトを保存していました。また、この変数にはスコープを設定するための追加の匿名関数が必要であったため、関数が（不必要に）少し大きく、より複雑になりました。
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
2つのバージョンのどちらが速いかはテストしていません。その場合は、ここに情報とリンクを自由に追加してください。
アンダースコアを使用するのに十分簡単：
_.escape(string)
Underscore は、ネイティブjsにはない多くの機能を提供するユーティリティライブラリです。また、 lodash もあります。これはアンダースコアと同じAPIですが、より高性能になるように書き直されました。
私はこのパーティーにどれだけ遅れているかを理解していますが、jQueryを必要としない非常に簡単なソリューションがあります。
escaped = new Option(unescaped).innerHTML;
編集：これは引用符をエスケープしません。引用符をエスケープする必要があるのは、コンテンツをHTML文字列内の属性にインラインで貼り付ける場合のみです。これを行うのが良いデザインになるケースを想像するのは私にとって難しいです。
編集2：パフォーマンスが重要な場合、最高パフォーマンスのソリューション（約50％）は、一連の正規表現に置き換わるものです。最新のブラウザは、正規表現に演算子がなく、文字列だけが含まれていることを検出し、それらすべてを単一の操作に折りたたみます。
これは、クリーンで明確なJavaScript関数です。 <！> quot;いくつかの<！> lt;などのテキストをエスケープします。多くの<！> quot; <！> quot;いくつかの<！> amp; lt;多くの<！> quot;。
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, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
最後のテストの後、最速で完全にクロスブラウザと互換性のあるネイティブ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 ライブラリを試してください。jQueryで動作します。
_.str.escapeHTML('<div>Blah blah blah</div>')
出力：
'<div>Blah blah blah</div>'
mustache.jsの例を拡張し、escapeHTML()メソッドを文字列オブジェクトに追加しました。
var __entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
String.prototype.escapeHTML = function() {
return String(this).replace(/[&<>"'\/]/g, function (s) {
return __entityMap[s];
});
}
その方法は非常に簡単に使用できます"Some <text>, more Text&Text".escapeHTML()
escape()およびunescape()は、HTMLではなくURLの文字列をエンコード/デコードするためのものです。
実際には、次のスニペットを使用して、フレームワークを必要としないトリックを実行します。
var escapedHtml = html.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
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, "&"], [/</g, "<"], [/>/g,">"], [/"/g,
"""]]
for(var item in findReplace) {
escaped = escaped.replace(item[0], item[1]);
}
<!-- WORKS - findReplace[item[]] correctly references contents -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
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 = {
'&': '&',
'<': '<',
'>': '>'
};
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({'©': '©'})
結果：
"some<tag>and&symbol©"
function htmlEscape(str) {
var stringval="";
$.each(str, function (i, element) {
alert(element);
stringval += element
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(' ', '-')
.replace('?', '-')
.replace(':', '-')
.replace('|', '-')
.replace('.', '-');
});
alert(stringval);
return String(stringval);
}
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 &ersand (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>")
// "<script>alert('hi!');</script>"
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'))
すべての主要なブラウザはまだ短いコードをサポートしており、古いウェブサイトの数を考えると、まもなく変わるとは思いません。
この情報をデータベースに保存する場合、クライアント側スクリプトを使用してHTMLをエスケープするのは間違っていますが、これはサーバー。それ以外の場合は、XSS保護を簡単にバイパスできます。
ポイントを明確にするために、回答の1つを使用した例を次に示します。
関数escapeHtmlを使用してブログのコメントからHtmlをエスケープし、サーバーに投稿するとします。
var entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
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] + ";";
}
) : "";
};
