【问题标题】：How to render html in svelte如何在 svelte 中渲染 html
【发布时间】：2019-12-26 01:07:54
【问题描述】：

我尝试通过将 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 变量的返回类型类似于“

Hello

”

【问题讨论】：

标签： html render svelte svelte-3

【解决方案1】：

您可以使用{@html expression}

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

【讨论】：

这对我不起作用。我得到实体编码的 html
@chovy 看到working example

【解决方案2】：

通常，字符串作为纯文本插入，这意味着像这样的字符没有特殊含义。

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

在 Svelte 中，您可以使用特殊的 {@html ...} 标签：

{@html 字符串}

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

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

【讨论】：