Skip to main content

일반적으로 문자열은 일반 텍스트로 삽입되므로 <>과 같은 문자는 특별한 의미가 없습니다.

하지만 때로는 HTML을 컴포넌트에 직접 렌더링해야 할 때가 있습니다. 예를 들어, 지금 읽고 있는 단어는 마크다운 파일에 존재하며 이 페이지에 HTML 덩어리로 포함됩니다.

Svelte에서는 특수 {@html ...} 태그를 사용하여 이 작업을 수행합니다:

App.svelte
<p>{@html string}</p>

경고! Svelte는 {@html ...} 내부의 표현식이 DOM에 삽입되기 전에 어떠한 수정과 삭제도 수행하지 않습니다. 콘텐츠가 직접 작성한 글처럼 신뢰할 수 있는 내용이라면 문제가 되지 않습니다. 그러나 신뢰할 수 없는 사용자 콘텐츠(예: 기사의 댓글)인 경우에는 수동으로 이스케이프 처리해야 하며, 그렇지 않으면 사용자가 크로스-사이트 스크립팅 (Cross-Site Scripting, XSS) 공격에 노출될 위험이 있습니다.

Next: 반응성

1
2
3
4
5
6
<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
 
<p>{string}</p>
 
initialising