일반적으로 문자열은 일반 텍스트로 삽입되므로 <
및 >
과 같은 문자는 특별한 의미가 없습니다.
하지만 때로는 HTML을 컴포넌트에 직접 렌더링해야 할 때가 있습니다. 예를 들어, 지금 읽고 있는 단어는 마크다운 파일에 존재하며 이 페이지에 HTML 덩어리로 포함됩니다.
Svelte에서는 특수 {@html ...}
태그를 사용하여 이 작업을 수행합니다:
App.svelte
<p>{@html string}</p>
경고! Svelte는
{@html ...}
내부의 표현식이 DOM에 삽입되기 전에 어떠한 수정과 삭제도 수행하지 않습니다. 콘텐츠가 직접 작성한 글처럼 신뢰할 수 있는 내용이라면 문제가 되지 않습니다. 그러나 신뢰할 수 없는 사용자 콘텐츠(예: 기사의 댓글)인 경우에는 수동으로 이스케이프 처리해야 하며, 그렇지 않으면 사용자가 크로스-사이트 스크립팅 (Cross-Site Scripting, XSS) 공격에 노출될 위험이 있습니다.