本文へスキップ

通常、文字列はプレーンテキストとして挿入されるため、<>などの文字は特別な意味を持ちません。

しかし、HTML をコンポーネントに直接レンダリングする必要がある場合があります。たとえば、現在読んでいる単語は、このページに HTML の塊として含まれている markdown ファイルに存在します。

Svelte では、特別な {@html ...} タグを使用してこれを行います。

アプリ
<p>{@html string}</p>

重要: Svelte は、{@html ...} 内の式が DOM に挿入される前に、いかなるサニタイズも行いません。コンテンツが自分で書いた記事など、信頼できるものである場合は問題ありません。ただし、記事へのコメントなど、信頼できないユーザーコンテンツの場合は、手動でエスケープすることが不可欠です。そうしないと、クロスサイトスクリプティング (XSS) 攻撃にユーザーをさらすリスクがあります。

GitHub でこのページを編集する

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