如何在Vue中替换 为<br>标签且规避v-html的XSS风险？

我有一段包含换行的文本内容：

"de-de": "This is a description for Process\nHere is no line break"

我希望把其中的换行替换成<br>标签，尝试过用v-html实现：

<p
     v-if="process.description"
     class="description"
     v-html="process.description.replace('\n', '<br>')"
>
</p>

这个方法能生效，但v-html会触发XSS安全警告，不是合适的方案，求可行的解决思路？

解决思路 #

1. CSS样式处理（最简便安全） #

不用修改文本内容，直接通过CSS让浏览器自动解析换行符：
给目标元素添加white-space: pre-line样式，该样式会识别文本中的换行符并转换成可视换行，同时自动折叠多余空格：

<p
  v-if="process.description"
  class="description"
>
  {{ process.description }}
</p>

对应的CSS：

.description {
  white-space: pre-line;
}

全程用文本绑定，完全规避XSS风险。

2. 拆分文本数组渲染 #

将文本按换行符拆分成数组，通过v-for遍历渲染每个段落，手动添加<br>标签（最后一段可省略）：

<p v-if="process.description" class="description">
  <span v-for="(line, index) in process.description.split('\n')" :key="index">
    {{ line }}
    <br v-if="index !== process.description.split('\n').length - 1">
  </span>
</p>

所有内容都是纯文本绑定，从根源杜绝XSS问题。

3. 安全过滤后的HTML渲染（需依赖库） #

如果一定要生成<br>标签，可结合HTML sanitize库过滤危险内容后再渲染：

1. 安装vue-sanitize依赖：

npm install vue-sanitize

2. 在Vue项目中注册：

import Vue from 'vue'
import VueSanitize from 'vue-sanitize'

Vue.use(VueSanitize)

3. 定义全局过滤器处理换行并过滤：

Vue.filter('safeLineBreak', function (value) {
  if (!value) return ''
  // 替换换行后，过滤掉所有危险HTML标签，只保留安全内容
  return Vue.prototype.$sanitize(value.replace(/\n/g, '<br>'))
})

4. 使用过滤器：

<p
  v-if="process.description"
  class="description"
  v-html="process.description | safeLineBreak"
>
</p>

此方式会自动移除脚本、危险标签等，大幅降低XSS风险。

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