[HTML, JS] 🔴TEXTAREA - HTML엔티티태그

#조회

[

<input type="hidden" id="hi_req" value="${data.request_text}">
<input type="hidden" id="hi_res" value="${data.response_text}">

  $("#hi_req").val()의 값이 이미 HTML 엔티티 태그를 포함한 문자열인 경우에는 innerHTML을 사용하여도 HTML 엔티티 태그가 그대로 표시될 수 있습니다. 이럴 경우에는 jQuery의 .text() 함수를 사용하여 HTML 엔티티 태그를 해석하도록 할 수 있습니다.
]

<script>
   $( document ).ready(function() {
        let rawText ="";
        let encodedText = "";

        rawText = $("#hi_req").val();
        encodedText = $("<div>").html(rawText).text();
        document.getElementById("m_request_text").innerHTML = encodedText;

        rawText = $("#hi_res").val();
        encodedText = $("<div>").html(rawText).text();
        document.getElementById("m_response_text").innerHTML = encodedText;

   })
</script>

--------------------------------------------------------------------------------------------------

#등록

[

1. 보안: 사용자가 입력한 내용을 그대로 웹 페이지에 출력하는 경우, 사용자가 악의적인 스크립트를 입력하여 다른 사용자의 브라우저에서 실행될 수 있는 보안 취약점을 만들 수 있습니다. 이를 방지하기 위해 사용자의 입력에 포함된 특수 문자나 스크립트를 제거하거나 치환하여 안전한 출력을 보장합니다.
2. HTML 태그 표현: 사용자가 입력한 내용에 HTML 태그가 포함된 경우, 웹 페이지에 그대로 출력하면 해당 태그가 해석되어 렌더링됩니다. 이는 의도하지 않은 레이아웃 변경이나 스타일링 문제를 일으킬 수 있습니다. HTML 엔티티를 사용하여 <와 > 같은 특수 문자를 치환함으로써 HTML 태그를 그대로 표시하면서도 렌더링되지 않도록 합니다.

]

<script>

//< (꺽세) 웹문자로 변환
$("#request_text").val($("#request_text").val().replace(/</gi, "&lt;"));
$("#request_text").val($("#request_text").val().replace(/>/gi, "&gt;"));
</script>