高亮 搜索关键词 xss 攻击

有个需求是在搜索结果中高亮搜索关键词
很多的文章的解决办法都是直接替换元素的 innerHTML
el.innerHTML = el.innerHTML.split(value).join('<span style="color: red">' + value + '</span> ')
效果是没有问题的，但是感觉很容易被 xss 攻击
这个方法在 Vue 里面是没有测试出有什么问题，因为 Vue 模板有对 xss 攻击做处理

一般服务端和客户端都要预防 xss 攻击，假设使用的框架没有对 xss 攻击做防范，或者不使用框架，有什么办法？

处理思路基本是将特殊字符如 < > / 转换成 HTML 实体

https://www.cnblogs.com/lovesong/p/5211667.html

另外也不建议在这种情况下使用 innerHTML

HTML 5 中指定不执行由 innerHTML 插入的 <script> 标签。
然而，有很多不依赖 <script> 标签去执行 JavaScript 的方式。所以当你使用innerHTML 去设置你无法控制的字符串时，这仍然是一个安全问题。

如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML() 方法。

复习一下
innerHTML 设置或获取HTML语法表示的元素的后代
innerText 设置或获取一个节点及其后代的“渲染”文本内容，会触发回流
textContent 设置或表示一个节点及其后代的文本内容，它不会把给定的内容解析为 HTML，它仅仅是将原始文本插入给定的位置

Note: 如果一个 <div>, <span>, 或 <noembed> 节点有一个文本子节点，该节点包含字符 (&), (<), 或(>), innerHTML 将这些字符分别返回为&, < 和 > 。使用Node.textContent 可获取一个这些文本节点内容的正确副本。