입력 필드에서 속성을 읽을 때 HTML 인코딩이 손실 됨

질문 : 입력 필드에서 속성을 읽을 때 HTML 인코딩이 손실 됨

---

숨겨진 필드에서 값을 가져 와서 텍스트 상자에 표시하기 위해 JavaScript를 사용하고 있습니다. 숨겨진 필드의 값이 인코딩됩니다.

예를 들면

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

뽑히다

<input type='text' value='chalk &amp; cheese' />

숨겨진 필드에서 값을 가져 오기 위해 jQuery를 통해 (이 시점에서 인코딩이 손실됩니다) :

$('#hiddenId').attr('value')

문제는 내가 chalk & cheese , JavaScript는 인코딩을 잃은 것 같습니다. chalk & cheese 가되는 것을 원하지 않는다. 나는 리터럴 amp; 유지됩니다.

문자열을 HTML로 인코딩하는 JavaScript 라이브러리 또는 jQuery 메서드가 있습니까?

답변

---

편집 : 이 답변은 오래 전에 게시 htmlDecode 기능은 XSS 취약점을 도입했습니다. 임시 요소를 div 에서 textarea 으로 변경하여 XSS 기회를 줄 이도록 수정되었습니다. 하지만 요즘에는 다른 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();
}

기본적으로 텍스트 영역 요소는 메모리에 생성되지만 문서에 추가되지는 않습니다.

htmlEncode 함수 innerText 를 설정하고 인코딩 된 innerHTML 검색합니다. htmlDecode 함수에서 요소 innerHTML innerText 를 검색합니다.

여기 에서 실행 예제를 확인하십시오.

출처 : https://stackoverflow.com/questions/1219860/html-encoding-lost-when-attribute-read-from-input-field