Tại sao trình duyệt tự động hủy hiển thị giá trị thuộc tính thẻ html?

Question

Dưới đây tôi có thẻ HTML và sử dụng JavaScript để trích xuất giá trị của thuộc tính widget. Mã này sẽ cảnh báo <test> thay vì <test>, vì vậy trình duyệt tự động unescapes giá trị thuộc tính:

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

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

Câu hỏi của tôi là:

1. thể hành vi này được ngăn chặn bằng mọi cách, bên cạnh làm một lối thoát kép của nội dung thuộc tính? (Nó sẽ giống như thế này: <test>)
2. Có ai biết tại sao trình duyệt hoạt động như thế này không? Có bất kỳ vị trí nào trong thông số HTML mà hành vi này được đề cập một cách rõ ràng không?

Answer 1

1) Nó thể được thực hiện mà không cần làm một lối thoát đôi

Hình như bạn là gần gũi hơn với htmlEncode(). Nếu bạn không nhớ sử dụng 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>

Nếu bạn quan tâm đến một giải pháp js vani tinh khiết

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) Tại sao trình duyệt hoạt động như thế này?

Chỉ vì hành vi này, chúng tôi có thể thực hiện một số điều cụ thể, chẳng hạn như bao gồm dấu ngoặc kép bên trong trường nhập được điền trước như được hiển thị bên dưới, điều này sẽ không thể thực hiện được nếu cách duy nhất để chèn " là bằng cách thêm bản thân mà một lần nữa sẽ yêu cầu thoát với char khác như \

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

Answer 2

Trình duyệt sẽ bỏ qua giá trị thuộc tính ngay sau khi phân tích cú pháp tài liệu (được đề cập here). Một trong những lý do có thể là không thể bao gồm, ví dụ, dấu ngoặc kép trong giá trị thuộc tính của bạn (tốt, về mặt kỹ thuật, nếu bạn đặt giá trị trong dấu nháy đơn thay vào đó, nhưng sau đó bạn sẽ không thể bao gồm dấu nháy đơn trong giá trị).

Điều đó nói rằng, hành vi không thể được ngăn chặn, mặc dù nếu bạn thực sự phải sử dụng giá trị với các thực thể HTML là một phần của nó, bạn có thể chỉ cần biến các ký tự đặc biệt của bạn trở lại thành mã (tôi khuyên bạn nên Underscore's escape cho tác vụ đó).