一般來說,字串會被插入為純文字,這表示像 <
和 >
這樣的字元沒有特殊意義。
但有時你需要直接在元件中渲染 HTML。例如,你現在正在閱讀的文字存在於一個 markdown 檔案中,該檔案會以 HTML blob 的形式包含在此頁面上。
在 Svelte 中,你可以使用特殊的 {@html ...}
標籤來執行此操作
App
<p>{@html string}</p>
重要:Svelte 在插入 DOM 之前,不會對
{@html ...}
內的表達式進行任何清理。如果內容是你信任的東西,例如你自己寫的文章,這不是問題。但是,如果這是一些不受信任的使用者內容,例如文章上的評論,那麼手動逸出它至關重要,否則你可能會讓你的使用者遭受跨網站指令碼 (XSS) 攻擊。
1
2
3
4
5
6
<script>
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{string}</p>