7

我尝试通过将 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>”

4

2 回答 2

18

您可以使用{@html expression}

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

于 2019-08-20T19:01:39.790 回答
-1

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

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

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

{@html 字符串}

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

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

于 2021-11-11T11:44:59.453 回答