uni-app中InnerHTML的XSS攻击漏洞

在uni-app开发中，直接使用innerHTML来设置HTML内容确实存在XSS（跨站脚本攻击）的风险。XSS攻击允许攻击者向网页中注入恶意脚本，从而窃取用户数据、劫持会话或执行其他恶意操作。为了防范这种风险，我们需要避免直接使用innerHTML，尤其是在处理用户输入时。

在uni-app中，推荐的做法是使用Vue的模板语法来安全地渲染数据，Vue会自动对插值（{{ }}）和指令（如v-bind）中的数据进行HTML转义，从而防止XSS攻击。此外，对于确实需要插入HTML内容的情况，可以使用v-html指令，但应确保插入的HTML内容是安全的。

以下是一个使用Vue模板语法和v-html指令的示例，同时展示如何避免XSS攻击：

<template>
  <view>
    <!-- 使用插值渲染文本，Vue会自动进行HTML转义 -->
    <text>{{ userInput }}</text>

    <!-- 如果确实需要插入HTML内容，使用v-html指令，并确保内容是安全的 -->
    <view v-html="safeHtmlContent"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInput: '<script>alert("XSS Attack!")</script>', // 假设这是用户输入的内容
      safeHtmlContent: '' // 安全HTML内容
    };
  },
  mounted() {
    // 示例：对userInput进行清理，以移除潜在的恶意脚本
    // 在实际应用中，应使用更强大的库（如DOMPurify）来处理
    this.safeHtmlContent = this.sanitizeHtml(this.userInput);
  },
  methods: {
    // 简单的HTML清理函数（仅作为示例，不推荐用于生产环境）
    sanitizeHtml(html) {
      const div = document.createElement('div');
      div.textContent = html; // 将HTML转换为纯文本，移除所有标签和脚本
      return div.innerHTML; // 返回转义后的HTML字符串（实际上这里已经是纯文本了）
    }
  }
};
</script>

<style scoped>
/* 样式定义 */
</style>

注意：上面的sanitizeHtml方法是一个非常简化的示例，仅用于说明原理。在实际应用中，应使用专门的库（如DOMPurify）来清理HTML内容，以确保其安全性。DOMPurify可以精确地过滤掉潜在的恶意脚本，同时保留合法的HTML标记。

import DOMPurify from 'dompurify';

// 在methods中使用DOMPurify清理HTML
this.safeHtmlContent = DOMPurify.sanitize(this.userInput);

通过遵循这些最佳实践，你可以大大降低在uni-app应用中遭受XSS攻击的风险。