Svelte中替代{@html}避免XSS攻击且保留换行的方案咨询

1. 利用CSS保留纯文本换行（最简便） #

如果你的聊天输入只是纯文本（不需要富文本格式），可以直接用bind:textContent获取输入内容，通过CSS让换行生效，完全不用{@html}：

• 输入框设置contenteditable="plaintext-only"（避免用户输入富文本）并绑定textContent：

<div contenteditable="plaintext-only" bind:textContent={inputText}></div>

• 渲染消息时，给容器加上white-space: pre-wrap样式：

<div class="message">{receivedText}</div>

<style>
.message {
  white-space: pre-wrap; /* 保留换行，自动换行过长内容 */
  word-wrap: break-word;
}
</style>

Svelte会自动转义所有特殊字符（比如<、>），彻底杜绝XSS风险，同时完美保留换行。

2. 拆分文本为多行，用Svelte模板渲染 #

如果需要更灵活的换行控制（比如给每行加样式），可以把文本按换行符拆分，用{#each}遍历渲染：

<script>
let message = "你好\n这是换行的消息\n第三行";
const lines = message.split('\n');
</script>

{#each lines as line}
  <div class="message-line">{line}</div>
{/each}

这种方式完全由Svelte模板生成DOM元素，没有任何XSS隐患，还能给每行自定义样式。

3. 封装消息渲染组件（适合复杂场景） #

如果聊天需要支持简单格式（比如换行、分段），可以封装一个专用组件统一处理文本渲染：

<!-- MessageRenderer.svelte -->
<script>
export let text;
const segments = text.split('\n').filter(seg => seg); // 过滤空行
</script>

{#each segments as seg}
  <p class="message-segment">{seg}</p>
{/each}

使用时直接传入文本即可：

<MessageRenderer text={receivedMessage} />

关于原生JS操作DOM的疑问 #

不需要改用createElement、appendChild这类原生方法。Svelte的模板系统本身就是为安全高效渲染DOM设计的，用原生方法反而会增加代码复杂度，破坏Svelte的响应式机制，维护成本更高。

内容的提问来源于stack exchange，提问作者hugogogo