Dlaczego przeglądarka automatycznie unescape wartości atrybutu znacznik html?

Question

Poniżej mam tag HTML i używam JavaScript, aby wyodrębnić wartość atrybutu widgetu. Kod ten będzie ostrzegać <test> zamiast <test>, więc przeglądarka automatycznie unescapes wartości atrybutu:

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

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

Moje pytania są następujące:

1. Czy takie zachowanie można zapobiec w inny sposób, oprócz wykonanie podwójnej ucieczki zawartości atrybutów? (Wyglądałoby to tak: <test>)
2. Czy ktoś wie, dlaczego przeglądarka zachowuje się w ten sposób? Czy jest jakieś miejsce w specyfikacjach HTML, że to zachowanie jest wyraźnie wymienione?

Answer 1

1) Może zrobienia bez robi podwójne ucieczkę

wygląda twój jest bliżej htmlEncode(). Jeśli nie przeszkadza 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>

Jeśli jesteś zainteresowany w roztworze js czysta wanilia

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) Dlaczego przeglądarka zachowuje się w ten sposób?

Tylko ze względu na to zachowanie, jesteśmy w stanie zrobić kilka konkretnych rzeczy, takich jak cytowanie wewnątrz wstępnie wypełnionego pola wejściowego, jak pokazano poniżej, co nie byłoby możliwe, gdyby jedynym sposobem wstawienia " jest dodanie sobie co znowu wymagałoby ucieczce z innym char jak \

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

Answer 2

Przeglądarka odrywa wartość atrybutu od razu po przeanalizowaniu dokumentu (wspomniana here). Jednym z powodów może być to, że w przeciwnym razie niemożliwe byłoby uwzględnienie na przykład podwójnych cudzysłowów w wartości atrybutu (oczywiście, gdybyś zamiast tego wstawił wartość w pojedyncze cudzysłowy, ale wtedy nie byłbyś w stanie uwzględnić pojedyncze cytaty w wartości).

To powiedziawszy, zachowanie nie może zostać powstrzymane, chociaż jeśli naprawdę musisz użyć wartości z elementami HTML będącymi jej częścią, możesz po prostu zamienić znaki specjalne z powrotem w kody (polecam Underscore's escape dla takiego zadania).