ブラウザがHTMLタグの属性値を自動的にエスケープしないのはなぜですか？

Question

以下私はHTMLタグを持っており、JavaScriptを使用してウィジェット属性の値を抽出しています。このコードは、<test>代わりの<test>に警告しますので、ブラウザが自動的に属性値アンエスケープ：

alert(document.getElementById("hau").attributes[1].value)

<div id="hau" widget="&lt;test&gt;"></div>

私の質問は以下のとおりです。

1. は、この行動はほかに、どのような方法で防ぐことができます属性の内容を二重にエスケープしていますか？ （これは次のようになります：<test>）
2. ブラウザがこのように動作する理由を知っていますか？この動作が明示的に言及されているHTML仕様の場所はありますか？

Answer 1

1）はあなたがhtmlEncode()に近いよう

が見える二重のエスケープをやっなしを行うことができます。 あなたは純粋なバニラJSソリューション

alert(htmlEncode(document.getElementById("hau").attributes[1].value)) 
 
function htmlEncode(html) { 
 
    return document.createElement('a').appendChild( 
 
     document.createTextNode(html)).parentNode.innerHTML; 
 
};

<div id="hau" widget="&lt;test&gt;"></div>

2に興味があればあなたがjQuery

alert(htmlEncode($('#hau').attr('widget'))) 
 

 
function htmlEncode(value){ 
 
    //create a in-memory div, set it's inner text(which jQuery automatically encodes) 
 
    //then grab the encoded contents back out. The div never exists on the page. 
 
    return $('<div/>').text(value).html(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hau" widget="&lt;test&gt;"></div>

を使用して気にしない場合）なぜブラウザはこのように動作しますか？

このような動作のために、以下に示すように、事前入力フィールドの中に引用符を含めたり、挿入する唯一の方法"再び\

<input type='text' value="&quot;You &apos;should&apos; see the double quotes here&quot;" />

ような別のチャーとエスケープ必要とするであろうそれ自体を添加することにより、あります

Answer 2

ブラウザは、ドキュメントを解析するとすぐに属性値をエスケープします（here）。その理由の1つは、属性値に二重引用符などを含めることが不可能な場合があるということです（技術的には、値を一重引用符で囲んだ場合は含めることができません値の中で一重引用符）。

しかし、実際にそのHTMLエンティティに値を使用する必要がある場合は、特殊文字をコードに戻すだけで済みます（このようなタスクにはUnderscore's escapeをおすすめします）。