3、Markdown 笔记应用开发全解析

Markdown 笔记应用开发全解析

1. HTML 显示与安全考量

在开发过程中，我们发现文本插值会自动转义 HTML 标签，这是为了防止注入攻击，提高应用的安全性。例如，在创建评论系统时，如果用户输入 HTML 代码并作为有效 HTML 显示在页面上，可能会添加恶意 JavaScript 代码，导致所有应用访问者都面临风险，这就是跨站脚本攻击（XSS 攻击）。所以，文本插值总是会转义 HTML 标签。

不建议在应用用户创建的内容上使用 v-html ，因为用户可能会在 <script> 标签中编写恶意 JavaScript 代码并执行。而使用普通文本插值则是安全的，因为 HTML 不会被执行。

不过，我们可以使用 v-html 指令来渲染动态 HTML。它是一个特殊属性，能将任何有效的 HTML 字符串渲染到应用中。示例代码如下：

<!-- Preview pane -->
<aside class="preview" v-html="notePreview">
</aside>

这样，Markdown 预览就能正常工作，HTML 会动态插入到页面中。 v-html 指令会替换 aside 元素内的所有内容，我们可以利用这一点来设置占位内容。

此外，还有一个与文本插值等效的指令 v-text ，它的行为类似于