如何在 svelte 中呈现 html

Question

我曾尝试通过将 html 存储在变量中来呈现 html 但它不起作用，我也尝试了三重花括号

<script>
    let name = 'world';
    let val = ""
    let ans2 = ""
    let ans3;
    import showdown from 'showdown';
    import validity from 'validity-checker';
    function dataSubmit(e){
        e.preventDefault();
    //ans = validity.isEmoji("ggg");
    ans2 = new showdown.Converter();
    ans3 = ans2.makeHtml(val)
    }
</script>

<div>
    <textarea bind:value={val} on:change={dataSubmit}></textarea>
    <div>
    {{{ans3}}}  
    </div>

</div>

ans3 变量的返回类型类似于“<h1>Hello</h1>”

Answer 1

您可以使用 {@html expression}

Svelte 在注入 HTML 之前不会清理表达式。如果数据来自不受信任的来源，您必须对其进行清理，否则您将您的用户暴露在 XSS 漏洞面前。

Answer 2

通常，字符串以纯文本形式插入，这意味着字符 like<和>没有特殊含义。

但有时您需要将 HTML 直接渲染到组件中。例如，您现在正在阅读的单词存在于一个 Markdown 文件中，该文件作为 HTML 块包含在此页面上。

在 Svelte 中，您可以使用特殊{@html ...}标签来执行此操作：

<p>{@html string}</p>

{@html ...}在插入 DOM 之前，Svelte 不会对内部表达式执行任何清理。换句话说，如果您使用此功能，手动转义来自您不信任的来源的 HTML 至关重要，否则您的用户将面临 XSS 攻击的风险。

来自https://svelte.dev/tutorial/html-tags