vue获取浏览器cookie和相关httpOnly的作用

cookie的获取有俩种方法，原生方法操作以及使用第三方库来获取。

1.原生操作方法获取cookie

mounted() {
    this.cookieValue = this.getCookie('yourCookieName');  // 调用cookie的方法，获取某一个cookie的值
  },
  methods: {
    getCookie(name) {
      const cookies = document.cookie.split('; '); // 注意这里cookie是以; 分割
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].split('=');
        if (decodeURIComponent(cookie[0]) === name) {
          return decodeURIComponent(cookie[1]);
        }
      }
      return null;
    }
  }

2.使用第三方库来获取cookie

首先你得先按照第三方库
npm install js-cookie
//使用
<script>
import Cookies from 'js-cookie'; // 引入

export default {
  data() {
    return {
      cookieValue: null
    };
  },
  mounted() {
    this.cookieValue = Cookies.get('yourCookieName'); // 操作获取
  }
};
</script>

以上是获取cookie的俩种方法，下面是了解一下HttpOnly的作用

HTTP Cookie中的HttpOnly属性是一种重要的安全机制，主要用于增强Web应用的安全性。以下是对其作用的详细解释及相关注意事项：

1. HttpOnly的作用
防止JavaScript访问：当Cookie被标记为HttpOnly时，客户端脚本（如JavaScript）无法通过document.cookie读取该Cookie的值。这有效降低了跨站脚本攻击（XSS）中敏感信息（如会话ID）泄露的风险。

仅限服务器交互：此类Cookie仅由浏览器在HTTP请求中自动发送到服务器，确保敏感数据仅在客户端与服务器之间传输，不被前端代码操作。

2. 如何设置HttpOnly
服务器在响应头中通过Set-Cookie字段设置，例如：

Set-Cookie: sessionid=abc123; HttpOnly; Path=/; Secure; SameSite=Strict

最佳实践：通常与Secure（仅通过HTTPS传输）和SameSite（控制跨站发送）属性结合使用，以多层防护提升安全性。
3. 适用场景
敏感信息保护：会话Cookie、身份验证令牌等应始终启用HttpOnly。

非前端依赖的Cookie：若Cookie无需通过JavaScript访问，均建议设置此属性。

4. 注意事项
功能影响：若前端需通过JavaScript访问特定Cookie（如某些自定义令牌），则不可标记为HttpOnly，否则会导致功能异常。

不防XSS攻击本身：HttpOnly仅减少XSS攻击后的信息泄露，仍需配合输入验证、输出编码等措施防御XSS。

不防CSRF：需结合SameSite属性、CSRF令牌等其他机制防范跨站请求伪造。

5. 浏览器兼容性
广泛支持：主流现代浏览器均支持HttpOnly，旧版本浏览器（如IE6+）也兼容，无需担忧兼容性问题。

6. 与其他属性的协作
Secure：确保Cookie仅通过加密的HTTPS连接传输。

SameSite：限制Cookie在跨站请求中的发送，可设为Strict或Lax以防御CSRF。

总结
HttpOnly是防御XSS导致Cookie泄露的关键措施，合理设置可显著提升应用安全性。开发者需根据业务需求判断Cookie是否需要前端访问，避免误用。同时，结合其他安全策略（如输入过滤、HTTPS、CSRF防护）构建全面防护体系。