通常、文字列はプレーンテキストとして挿入され、<
や>
のような文字は特別な意味を持ちません。
しかし、HTMLをコンポーネントに直接レンダリングする必要がある場合もあります。例えば、あなたが今読んでいる文章はマークダウンファイルに存在し、HTMLのblobとしてこのページに含まれています。
Svelteでは、{@html ...}
という特別なタグを使ってこれを行います。
App
<p>{@html string}</p>
重要: Svelte は DOM に挿入される前に
{@html ...}
内の式のサニタイズを行いません。あなたがご自身で書いた記事など、信頼できるコンテンツの場合は問題ありませんが、信頼できないユーザーコンテンツ (例えば記事に対するコメントなど) の場合は、手動でエスケープする必要があります。そうしないとユーザーを Cross-Site Scripting (XSS) 攻撃にさらす危険性があります。
previous next
1
2
3
4
5
6
<script>
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{string}</p>