入力フィールドから属性を読み取るとHTMLエンコードが失われる
JavaScriptを使用して、隠しフィールドから値を取り出してテキストボックスに表示します。隠しフィールドの値はエンコードされています。
例えば、
<input id='hiddenId' type='hidden' value='chalk & cheese' />
引き込まれる
<input type='text' value='chalk & cheese' />
隠しフィールドから値を取得するためにjQueryを使用します（この時点でエンコーディングを失います）。
$('#hiddenId').attr('value')
問題は、隠しフィールドからchalk & cheeseを読むと、JavaScriptがエンコーディングを失っているようです。値をchalk & cheeseにしたくありません。リテラルamp;を保持したいです。
文字列をHTMLエンコードするJavaScriptライブラリまたはjQueryメソッドはありますか。
編集： この回答はかなり前に投稿されたもので、htmlDecode関数にXSSの脆弱性が導入されました。一時要素をdivからtextareaに変更してXSSの可能性を減らしました。しかし、今日では、 other anwswer で提案されているようにDOMParser APIを使用することをお勧めします。
私はこれらの機能を使う：
function htmlEncode(value){
// Create a in-memory element, set its inner text (which is automatically encoded)
// Then grab the encoded contents back out. The element never exists on the DOM.
return $('<textarea/>').text(value).html();
}
function htmlDecode(value){
return $('<textarea/>').html(value).text();
}
基本的にdiv要素はメモリ内に作成されますが、文書に追加されることはありません。
htmlEncode関数で、要素のinnerTextを設定し、エンコードされたinnerHTMLを取得します。 htmlDecode関数で、要素のinnerHTML値を設定し、innerTextを取得します。
実行中の例を確認してください ここ 。
JQueryのトリックは引用符をエンコードしません、そしてIEではあなたの空白を取り除きます。
Djangoの escape templateタグに基づいていますが、これはすでによく使われテストされていると思いますので、必要なことをするこの関数を作りました。
空白除去の問題に対する回避策のどれよりも間違いなく簡単で（そしておそらくもっと速い） - そしてそれは引用符をエンコードします。これは例えば属性値の中で結果を使うつもりなら不可欠です。
function htmlEscape(str) {
return str
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
// I needed the opposite function today, so adding here too:
function htmlUnescape(str){
return str
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&');
}
更新2013-06-17：
最速のエスケープを探すために、このreplaceAllメソッドの実装を見つけました。
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
（ここでも参照されています： 文字列内の文字のすべてのインスタンスを置き換えるための最速の方法 ）
ここでいくつかのパフォーマンス結果が得られます。
http://jsperf.com/htmlencoderegex/25
上記の組み込みのreplaceチェーンと同じ結果文字列を返します。誰かがなぜそれが速いのかを説明できたらうれしいです！？
更新2015-03-04：
AngularJSがまさに上記の方法を使用していることに気付きました。
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435
彼らは、いくつかの改良点を追加しました - それらは あいまいなUnicodeの問題を処理しているようです およびすべての非英数字をエンティティに変換すること。あなたの文書にUTF8文字セットが指定されている限り、後者は必要ではないという印象を受けました。
（4年後）Djangoはまだこれらのことのどちらもしていないことに注意してください。だから、それらがどれほど重要かはわかりません。
https://github.com/Django/django/blob/1.8b1/Django/utils/html.py#L44
更新2016-04-06：
スラッシュ/をエスケープすることもできます。これは正しいHTMLエンコーディングには必要ありませんが、 OWASPによって推奨されています XSSに対する安全対策として。 （コメントでこれを示唆してくれた@JNFに感謝します）
.replace(/\//g, '/');
これは、jQueryの.html()バージョンと.replace()バージョンの両方よりかなり速い、非jQueryバージョンです。これはすべての空白を保存しますが、jQueryバージョンのように引用符を処理しません。
function htmlEncode( html ) {
return document.createElement( 'a' ).appendChild(
document.createTextNode( html ) ).parentNode.innerHTML;
};
スピード： http://jsperf.com/htmlencoderegex/17
デモ： 
出力：
スクリプト：
function htmlEncode( html ) {
return document.createElement( 'a' ).appendChild(
document.createTextNode( html ) ).parentNode.innerHTML;
};
function htmlDecode( html ) {
var a = document.createElement( 'a' ); a.innerHTML = html;
return a.textContent;
};
document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );
//sanity check
var html = '<div> & hello</div>';
document.getElementById( 'same' ).textContent =
'html === htmlDecode( htmlEncode( html ) ): '
+ ( html === htmlDecode( htmlEncode( html ) ) );
HTML：
<input id="hidden" type="hidden" value="chalk & cheese" />
<input id="text" value="" />
<div id="same"></div>
私はこれが古いものであることを知っています、しかし私は/のバリエーションを投稿したいと思いました - 受け入れられた答え は行を削除せずに動作します IE
function multiLineHtmlEncode(value) {
var lines = value.split(/\r\n|\r|\n/);
for (var i = 0; i < lines.length; i++) {
lines[i] = htmlEncode(lines[i]);
}
return lines.join('\r\n');
}
function htmlEncode(value) {
return $('<div/>').text(value).html();
}
アンダースコア は _.escape() および _.unescape() を提供するメソッドを提供します。
> _.unescape( "chalk & cheese" );
"chalk & cheese"
> _.escape( "chalk & cheese" );
"chalk & cheese"
いい答えです。 jQuery 1.4.2でエンコードする値がundefinedまたはnullの場合、次のようなエラーが発生する可能性があります。
jQuery("<div/>").text(value).html is not a function
OR
Uncaught TypeError: Object has no method 'html'
解決策は、実際の値をチェックするように関数を修正することです。
function htmlEncode(value){
if (value) {
return jQuery('<div/>').text(value).html();
} else {
return '';
}
}
普通のJavaScriptを好む人のために、これが私がうまく使った方法です：
function escapeHTML (str)
{
var div = document.createElement('div');
var text = document.createTextNode(str);
div.appendChild(text);
return div.innerHTML;
}
確かに、エンコーディングは失われていません。エンコードは、ページのロード中にマークアップパーサー（ブラウザ）によって使用されます。ソースが読み取られて解析され、ブラウザによってDOMがメモリにロードされると、エンコードはそれが表すものに解析されました。つまり、JSがメモリ内のすべてのものを読み取るために実行されるときには、取得される文字はエンコーディングが表すものになります。
ここでは厳密に意味論を扱っているかもしれませんが、エンコードの目的を理解してほしいと思いました。 「失われた」という言葉は、あるべきことがうまくいっていないように聞こえます。
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)+";"})
}
test.value=encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');
testing.innerHTML=test.value;
/*************
* \x26 is &ersand (it has to be first),
* \x0A is newline,
*************/<textarea id=test rows="9" cols="55"></textarea>
<div id="testing">www.WHAK.com</div>これが簡単なJavaScriptソリューションです。 Stringオブジェクトを "HTMLEncode"メソッドで拡張しています。このメソッドは、パラメータなしで、またはパラメータ付きのオブジェクトに対して使用できます。
String.prototype.HTMLEncode = function(str) {
var result = "";
var str = (arguments.length===1) ? str : this;
for(var i=0; i<str.length; i++) {
var chrcode = str.charCodeAt(i);
result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)
}
return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))
要旨 "javascript用のHTMLEncodeメソッド" を作成しました。
角度のサニタイズ ...に基づく（es6モジュール構文）
// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;
const decodeElem = document.createElement('pre');
/**
* Decodes html encoded text, so that the actual string may
* be used.
* @param value
* @returns {string} decoded text
*/
export function decode(value) {
if (!value) return '';
decodeElem.innerHTML = value.replace(/</g, '<');
return decodeElem.textContent;
}
/**
* Encodes all potentially dangerous characters, so that the
* resulting string can be safely inserted into attribute or
* element text.
* @param value
* @returns {string} encoded text
*/
export function encode(value) {
if (value === null || value === undefined) return '';
return String(value).
replace(/&/g, '&').
replace(SURROGATE_PAIR_REGEXP, value => {
var hi = value.charCodeAt(0);
var low = value.charCodeAt(1);
return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
}).
replace(NON_ALPHANUMERIC_REGEXP, value => {
return '&#' + value.charCodeAt(0) + ';';
}).
replace(/</g, '<').
replace(/>/g, '>');
}
export default {encode,decode};
私のpure-JS関数：
/**
* HTML entities encode
*
* @param {string} str Input text
* @return {string} Filtered text
*/
function htmlencode (str){
var div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
}
javaScriptには、単純なHTMLのEncode/Decodeメソッドはありません。
しかし、できることは、JSを使用して任意の要素を作成し、それを内部テキストに設定してからinnerHTMLを使用して読み取ることです。
たとえば、jQueryではこれでうまくいくはずです。
var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();
またはこれらの線に沿って何か
ある入力フィールドから別の入力フィールドに値を移動するために値をエスケープ/エンコードする必要はありません。
<form>
<input id="button" type="button" value="Click me">
<input type="hidden" id="hiddenId" name="hiddenId" value="I like cheese">
<input type="text" id="output" name="output">
</form>
<script>
$(document).ready(function(e) {
$('#button').click(function(e) {
$('#output').val($('#hiddenId').val());
});
});
</script>
JSは生のHTMLやその他何も挿入しません。 DOMにvalueプロパティ（または属性、不確実）を設定するように指示するだけです。いずれにせよ、DOMはあなたのためにあらゆるエンコードの問題を処理します。 document.writeやevalを使うような変なことをしているのでなければ、HTMLエンコーディングは事実上透明です。
結果を保持するために新しいテキストボックスを生成することについて話しているのであれば...それはまだ同じくらい簡単です。 HTMLの静的部分をjQueryに渡してから、返されるオブジェクトの残りのプロパティ/属性を設定するだけです。
$box = $('<input type="text" name="whatever">').val($('#hiddenId').val());
私は同様の問題を抱えており、JavaScriptからの関数encodeURIComponentを使用してそれを解決します（ documentation ）
たとえば、あなたの場合あなたが使用するなら：
<input id='hiddenId' type='hidden' value='chalk & cheese' />
そして
encodeURIComponent($('#hiddenId').attr('value'))
あなたはchalk%20%26%20cheeseを得るでしょう。スペースも保持されます。
私の場合は、バックスラッシュを1つエンコードする必要があり、このコードは完全に機能します。
encodeURIComponent('name/surname')
そして私はname%2Fsurnameを得ました
私は私のDomain\User文字列のバックスラッシュに関するいくつかの問題に出くわしました。
これをAnentropicの答えからの他の脱出に追加しました
.replace(/\\/g, '\')
私はここで見つけた： どのようにJavaScriptでバックスラッシュをエスケープするには？
<script>
String.prototype.htmlEncode = function () {
return String(this)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
var aString = '<script>alert("I hack your site")</script>';
console.log(aString.htmlEncode());
</script>
出力します：<script>alert("I hack your site")</script>
.htmlEncode（）は一度定義されるとすべての文字列でアクセス可能になります。
Htmlは与えられた値をエンコードします
var htmlEncodeContainer = $('<div />');
function htmlEncode(value) {
if (value) {
return htmlEncodeContainer.text(value).html();
} else {
return '';
}
}
純粋なJavaScriptで書かれた、MicrosoftのASPからのServer.HTMLEncode関数をエミュレートする、ちょっとだけです：
function htmlEncode(s) {
var ntable = {
"&": "amp",
"<": "lt",
">": "gt",
"\"": "quot"
};
s = s.replace(/[&<>"]/g, function(ch) {
return "&" + ntable[ch] + ";";
})
s = s.replace(/[^ -\x7e]/g, function(ch) {
return "&#" + ch.charCodeAt(0).toString() + ";";
});
return s;
}結果{しないはアポストロフィをエンコードしますが、他のHTMLスペシャルと0x20-0x7eの範囲外の文字はエンコードします。
JQueryを使いたい場合私はこれを見つけました：
http://www.jquerysdk.com/api/jQuery.htmlspecialchars
（jQuery SDKが提供するjquery.stringプラグインの一部）
Prototypeの問題点は、それがJavaScriptの基本オブジェクトを拡張することであり、あなたが使ったかもしれないどんなjQueryとも互換性がないということです。もちろん、既にPrototypeを使用していて、jQueryを使用していないのであれば、問題にはなりません。
編集：また、これは、jQueryのためのプロトタイプの文字列ユーティリティのポートです：
var htmlEnDeCode = (function() {
var charToEntityRegex,
entityToCharRegex,
charToEntity,
entityToChar;
function resetCharacterEntities() {
charToEntity = {};
entityToChar = {};
// add the default set
addCharacterEntities({
'&' : '&',
'>' : '>',
'<' : '<',
'"' : '"',
''' : "'"
});
}
function addCharacterEntities(newEntities) {
var charKeys = [],
entityKeys = [],
key, echar;
for (key in newEntities) {
echar = newEntities[key];
entityToChar[key] = echar;
charToEntity[echar] = key;
charKeys.Push(echar);
entityKeys.Push(key);
}
charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
}
function htmlEncode(value){
var htmlEncodeReplaceFn = function(match, capture) {
return charToEntity[capture];
};
return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
}
function htmlDecode(value) {
var htmlDecodeReplaceFn = function(match, capture) {
return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
};
return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
}
resetCharacterEntities();
return {
htmlEncode: htmlEncode,
htmlDecode: htmlDecode
};
})();
これはExtJSのソースコードからのものです。
ここで他のいくつかの答えを使用して、私は個別のエンコードされた文字の数（replace()への1回の呼び出し）に関係なく1回のパスですべての関連文字を置き換えるバージョンを作りました。
DOM APIの存在や他のライブラリに依存しません。
window.encodeHTML = (function() {
function escapeRegex(s) {
return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}
var encodings = {
'&' : '&',
'"' : '"',
'\'' : ''',
'<' : '<',
'>' : '>',
'\\' : '/'
};
function encode(what) { return encodings[what]; };
var specialChars = new RegExp('[' +
escapeRegex(Object.keys(encodings).join('')) +
']', 'g');
return function(text) { return text.replace(specialChars, encode); };
})();
一度走れば、あなたは今電話することができます
encodeHTML('<>&"\'')
<>&"'を取得する
Prototype.jsでescapeHTML()がしていることを選ぶ
このスクリプトを追加すると、HTMLをエスケープするのに役立ちます。
String.prototype.escapeHTML = function() {
return this.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
}
次のように、スクリプト内の文字列に対してescapeHTMLメソッドを呼び出すことができます。
var escapedString = "<h1>this is HTML</h1>".escapeHTML();
// gives: "<h1>this is HTML</h1>"
Prototype.js全体を含めなくても、シンプルなソリューションを探している人に役立つことを願っています。
function encodeHTML(str) {
return document.createElement("a").appendChild(
document.createTextNode(str)).parentNode.innerHTML;
};
function decodeHTML(str) {
var element = document.createElement("a");
element.innerHTML = str;
return element.textContent;
};
var str = "<"
var enc = encodeHTML(str);
var dec = decodeHTML(enc);
console.log("str: " + str, "\nenc: " + enc, "\ndec: " + dec);