发布于 由admin

在 Vue 应用中，如何防止 `XSS` (跨站脚本攻击) 和 `CSRF` (跨站请求伪造) 攻击？

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们聊聊Vue项目里的安全问题，主要是XSS和CSRF这俩“坏家伙”。别担心，我会用最接地气的方式，让你们听得懂，学得会，以后遇到它们，也能轻松应对！

咱们今天的内容主要分三大块：

  1. XSS：别让脚本“溜进”你的页面
  2. CSRF：保护你的用户，别被“冒名顶替”
  3. Vue项目中的安全实践：实战演练

一、XSS：别让脚本“溜进”你的页面

XSS，全称跨站脚本攻击（Cross-Site Scripting），简单来说，就是黑客通过某种手段，把恶意的JavaScript代码偷偷塞到你的网站页面里，当用户访问这些页面时，这些恶意代码就会执行，搞事情！

  • XSS的危害

    XSS的危害可大了，轻则窃取用户的Cookie，冒充用户身份，重则篡改页面内容，甚至传播恶意软件。

  • XSS的分类

    XSS主要分为三种类型：

    • 存储型 XSS (Stored XSS)：恶意脚本被永久存储在服务器（例如：数据库）。当用户访问包含恶意脚本的页面时，脚本就会执行。

    • 反射型 XSS (Reflected XSS)：恶意脚本作为请求的一部分（例如：URL参数）发送到服务器。服务器未经处理直接将脚本返回，并在用户的浏览器中执行。

    • DOM 型 XSS (DOM-based XSS)：恶意脚本不经过服务器，完全在客户端执行。攻击者通过修改页面的 DOM 结构来注入恶意代码。

  • 举个栗子，看看XSS是怎么发生的

    假设你的Vue项目有一个评论功能：

    <template>
  <div>
    <h1>评论列表</h1>
    <ul>
      <li v-for="comment in comments" :key="comment.id">
        {{ comment.content }}
      </li>
    </ul>
    <input type="text" v-model="newComment">
    <button @click="addComment">提交评论</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        { id: 1, content: '这个网站真不错！' },
        { id: 2, content: '我也这么觉得！' }
      ],
      newComment: ''
    };
  },
  methods: {
    addComment() {
      this.comments.push({ id: Date.now(), content: this.newComment });
      this.newComment = '';
    }
  }
};
</script>

    如果黑客在评论里输入： <script>alert('XSS!')</script>， 那么，当你的页面渲染这个评论时，就会弹出一个“XSS!”的对话框。 这只是一个简单的例子，实际上黑客可以做更坏的事情。

  • 如何预防XSS？

    预防XSS，核心原则就是：永远不要信任用户的输入！

    • 输入验证 (Input Validation)：在前端和后端都要对用户输入进行严格的验证。

      • 限制输入长度：防止用户输入过长的恶意代码。
      • 使用白名单：只允许用户输入特定的字符或格式。
      • 过滤特殊字符：移除或转义可能引起XSS攻击的字符，例如 <、>、"、'、& 等。

    • 输出编码 (Output Encoding)：在将用户输入的数据显示在页面上之前，对其进行编码。

      • HTML 编码：将HTML特殊字符转换为对应的HTML实体。 例如，< 转换为 &lt;， > 转换为 &gt;， " 转换为 &quot;， ' 转换为 '， & 转换为 &amp;。

      • JavaScript 编码：在JavaScript代码中使用用户输入的数据时，需要进行JavaScript编码，防止恶意代码注入。

      • URL 编码：在URL中使用用户输入的数据时，需要进行URL编码，防止URL解析错误或恶意代码注入。

  • Vue 中的 XSS 防护

    • 使用 v-text 代替 v-html：v-text 会将内容作为纯文本插入，而 v-html 会将内容解析为HTML，这可能会导致XSS攻击。

      <!-- 不安全 -->
<div v-html="comment.content"></div>

<!-- 安全 -->
<div v-text="comment.content"></div>

    • 使用第三方库进行HTML编码：例如 DOMPurify 或 he。

      • DOMPurify：一个非常强大的库，可以对HTML进行清理，移除所有可能导致XSS攻击的代码。

        npm install dompurify
        <template>
  <div>
    <div v-html="purifiedContent"></div>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      content: '<img src="x" onerror="alert('XSS!')">'
    };
  },
  computed: {
    purifiedContent() {
      return DOMPurify.sanitize(this.content);
    }
  }
};
</script>

      • he：一个轻量级的HTML编码/解码库。

        npm install he
        <template>
  <div>
    {{ encodedContent }}
  </div>
</template>

<script>
import he from 'he';

export default {
  data() {
    return {
      content: '<script>alert("XSS")</script>'
    };
  },
  computed: {
    encodedContent() {
      return he.encode(this.content);
    }
  }
};
</script>

    • 对 URL 参数进行编码：使用 encodeURIComponent() 函数对 URL 参数进行编码。

      let url = `/search?keyword=${encodeURIComponent(this.keyword)}`;

  • 总结一下，XSS 防御的关键点：

    • 输入验证：严格检查用户输入的数据。
    • 输出编码：对输出到页面的数据进行适当的编码。
    • 使用 v-text 代替 v-html
    • 使用第三方库进行HTML编码
    • 对URL参数进行编码

二、CSRF：保护你的用户，别被“冒名顶替”

CSRF，全称跨站请求伪造（Cross-Site Request Forgery），简单来说，就是黑客冒充你的用户，在用户不知情的情况下，偷偷发送一些请求到你的服务器，执行一些操作（例如：修改密码、转账）。

  • CSRF的危害

    CSRF的危害也很大，轻则修改用户资料，重则盗取用户资金。

  • CSRF的原理

    CSRF攻击的原理是：用户在登录网站A后，网站A会在用户的浏览器中保存一个Cookie，用于标识用户的身份。当用户访问恶意网站B时，网站B可以通过某种手段（例如：隐藏的表单、JavaScript代码），诱使用户向网站A发送请求，由于请求中包含了网站A的Cookie，所以网站A会认为这个请求是用户自己发送的，从而执行相应的操作。

  • 举个栗子，看看CSRF是怎么发生的

    假设你的Vue项目有一个修改用户密码的功能：

    <form action="/changePassword" method="post">
  <label for="newPassword">新密码：</label>
  <input type="password" id="newPassword" name="newPassword">
  <button type="submit">修改密码</button>
</form>

    如果黑客在自己的网站上构造一个类似的表单：

    <form action="https://your-website.com/changePassword" method="post">
  <input type="hidden" name="newPassword" value="hacked">
  <input type="submit" value="免费领取游戏礼包">
</form>

    如果用户在登录你的网站后，不小心访问了这个恶意网站，并且点击了“免费领取游戏礼包”按钮，那么浏览器就会自动向你的网站发送一个修改密码的请求，将用户的密码修改为“hacked”。

  • 如何预防CSRF？

    预防CSRF，核心原则就是：验证请求的来源！

    • 使用 CSRF Token

      • 原理：服务器在用户访问页面时，生成一个随机的Token，并将Token保存在Session和页面的隐藏字段中。当用户提交请求时，需要将Token一起提交到服务器。服务器验证Token是否和Session中的Token一致，如果一致，则认为是合法的请求，否则认为是CSRF攻击。

      • 实现：

        1. 服务器端生成 Token：在用户登录后，生成一个随机的Token，保存在Session中。

          // Node.js (Express) 示例
const crypto = require('crypto');

app.get('/login', (req, res) => {
  // ... 登录逻辑
  const csrfToken = crypto.randomBytes(32).toString('hex');
  req.session.csrfToken = csrfToken;
  res.render('profile', { csrfToken });
});

        2. 在页面中嵌入 Token：将Token嵌入到页面的隐藏字段中。

          <template>
  <form action="/changePassword" method="post">
    <input type="hidden" name="csrfToken" :value="csrfToken">
    <label for="newPassword">新密码：</label>
    <input type="password" id="newPassword" name="newPassword">
    <button type="submit">修改密码</button>
  </form>
</template>

<script>
export default {
  props: {
    csrfToken: {
      type: String,
      required: true
    }
  }
};
</script>

        3. 验证 Token：在服务器端验证Token是否和Session中的Token一致。

          // Node.js (Express) 示例
app.post('/changePassword', (req, res) => {
  if (req.body.csrfToken !== req.session.csrfToken) {
    return res.status(403).send('CSRF 攻击！');
  }
  // ... 修改密码逻辑
});

    • 使用 SameSite Cookie

      • 原理：SameSite Cookie可以限制Cookie的发送范围，只有在同源请求时才会发送Cookie。

      • 设置：

        // Node.js (Express) 示例
app.use(session({
  secret: 'your secret key',
  resave: false,
  saveUninitialized: true,
  cookie: {
    secure: true, // 仅在 HTTPS 连接中发送
    httpOnly: true, // 阻止客户端脚本访问
    sameSite: 'strict' // 严格模式，仅在同源请求中发送
  }
}));
        • SameSite 有三个值：
          • Strict：最严格的模式，Cookie仅在同源请求中发送。
          • Lax：允许在导航到目标网址的GET请求中发送Cookie。
          • None：Cookie将在所有请求中发送，但需要同时设置 Secure 属性为 true。

    • 验证 HTTP Referer Header

      • 原理：HTTP Referer Header 记录了请求的来源地址。 服务器可以验证Referer Header是否是来自自己的域名，如果不是，则认为是CSRF攻击。

      • 注意：Referer Header 可能会被篡改或被禁用，所以这种方法并不是完全可靠。

    • 双重 Cookie 验证 (Double Submit Cookie)

      • 原理：服务器在设置Cookie的同时，也设置一个同名的Cookie，并将Cookie的值保存在页面的隐藏字段中。当用户提交请求时，需要将隐藏字段中的Cookie值一起提交到服务器。服务器验证两个Cookie的值是否一致，如果一致，则认为是合法的请求，否则认为是CSRF攻击。

      • 注意：这种方法只适用于无状态的API，因为服务器不需要保存Session。

  • Vue 项目中的 CSRF 防护

    • 在 Axios 中设置 CSRF Token

      import axios from 'axios';

axios.defaults.xsrfCookieName = 'csrftoken'; // Cookie 的名称
axios.defaults.xsrfHeaderName = 'X-CSRFToken'; // Header 的名称

      然后在你的服务器端，你需要设置一个名为 csrftoken 的Cookie，并将Token的值设置进去。

    • 在 Vuex 中管理 CSRF Token

      // store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    csrfToken: ''
  },
  mutations: {
    setCsrfToken(state, token) {
      state.csrfToken = token;
    }
  },
  actions: {
    async getCsrfToken({ commit }) {
      const response = await axios.get('/csrf');
      commit('setCsrfToken', response.data.csrfToken);
    }
  },
  getters: {
    csrfToken: state => state.csrfToken
  }
});

      在你的组件中，你可以这样使用：

      <template>
  <form action="/changePassword" method="post">
    <input type="hidden" name="csrfToken" :value="$store.getters.csrfToken">
    <label for="newPassword">新密码：</label>
    <input type="password" id="newPassword" name="newPassword">
    <button type="submit">修改密码</button>
  </form>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['csrfToken'])
  },
  mounted() {
    this.$store.dispatch('getCsrfToken');
  }
};
</script>

  • 总结一下，CSRF 防御的关键点：

    • 使用 CSRF Token：这是最常用的方法。
    • 使用 SameSite Cookie：可以有效地防止CSRF攻击。
    • 验证 HTTP Referer Header：作为一种辅助手段。
    • 双重 Cookie 验证：适用于无状态的API。

三、Vue 项目中的安全实践：实战演练

说了这么多理论，现在咱们来点实际的，看看在Vue项目中，如何将这些安全措施应用起来。

  • 案例：一个简单的博客系统

    假设我们正在开发一个简单的博客系统，用户可以发表文章、评论，以及修改个人资料。

  • 安全措施

    1. XSS 防护

      • 输入验证：对用户发表的文章和评论进行输入验证，限制长度，过滤特殊字符。

        // 例如，使用 validator.js 进行验证
import validator from 'validator';

function validateArticle(article) {
  if (!validator.isLength(article.title, { min: 1, max: 100 })) {
    throw new Error('标题长度必须在 1-100 之间');
  }
  if (!validator.isLength(article.content, { min: 1, max: 10000 })) {
    throw new Error('内容长度必须在 1-10000 之间');
  }
  if (!validator.isXSS(article.title)) {
      throw new Error("标题存在XSS风险")
  }
    if (!validator.isXSS(article.content)) {
      throw new Error("内容存在XSS风险")
  }
  // ... 其他验证
}

      • 输出编码：使用 DOMPurify 对文章和评论的内容进行清理，防止XSS攻击。

        <template>
  <div>
    <div v-html="purifiedContent"></div>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  props: {
    content: {
      type: String,
      required: true
    }
  },
  computed: {
    purifiedContent() {
      return DOMPurify.sanitize(this.content);
    }
  }
};
</script>

    2. CSRF 防护

      • 使用 CSRF Token：在用户修改个人资料的表单中添加 CSRF Token。

        <template>
  <form @submit.prevent="updateProfile">
    <input type="hidden" name="csrfToken" :value="csrfToken">
    <label for="username">用户名：</label>
    <input type="text" id="username" v-model="username">
    <button type="submit">更新资料</button>
  </form>
</template>

<script>
import { mapGetters } from 'vuex';
import axios from 'axios';

export default {
  data() {
    return {
      username: ''
    };
  },
  computed: {
    ...mapGetters(['csrfToken'])
  },
  mounted() {
    this.$store.dispatch('getCsrfToken');
    // 获取用户资料
    axios.get('/profile').then(response => {
      this.username = response.data.username;
    });
  },
  methods: {
    updateProfile() {
      axios.post('/profile', {
        username: this.username,
        csrfToken: this.csrfToken
      }).then(response => {
        // 更新成功
      });
    }
  }
};
</script>

      • 使用 SameSite Cookie：设置Session Cookie的 SameSite 属性为 Strict 或 Lax。

    3. 其他安全措施

      • HTTPS：使用HTTPS协议，对所有数据进行加密传输。
      • 定期更新依赖：及时更新Vue和相关的依赖库，修复已知的安全漏洞。
      • 使用安全头：设置HTTP安全头，例如 X-Frame-Options、X-Content-Type-Options、Content-Security-Policy 等。

  • 总结

    安全是一个持续的过程，需要不断地学习和实践。希望今天的讲座能够帮助大家更好地理解XSS和CSRF的原理和防御方法，并在Vue项目中应用这些安全措施，保护你的用户和你的应用。

    记住，安全无小事，多一份防范，少一份风险！

好了，今天的讲座就到这里，感谢大家的收听！ 如果大家还有什么问题，欢迎随时提问！ 拜拜！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注