httponly cookie 如何检测

检测httponly cookie 是否存在

近期做了一个需求，需要检测cookie失效，然后完成自动化刷新。
正常我们取值cookie都是通过document.cookie来获取全部的cookie这个没有错，而我也是这样开始做的。等到发布上到日常以后 cookie存在还是一直提示cookie失效 需要刷新。这难道是代码写的有问题？马上就去排查，没发现什么问题。最后。。排查出来是集团这边后台返回cookie的时候设置了 httponly = true；那httponly设置这个是什么作用呢？
如果您在cookie中设置了HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击 大概就是这个意思，如果想了解的更详细可以谷歌一下哈。
好既然我们知道这个不能通过document.cookie获取到，那我们如何检测cookie是否存在 来判断是否失效呢。通过具体的了解发现，设置了httponly的cookie 是不能删除和修改的 咦~ 哪。。。 直接上代码！

// 定义一个检测cookie列表
const cookieData = ['userName', 'xman', 'spl'];

// 处理httponlycookie
function doesHttpOnlyCookieExist(cookiename) {
  const d = new Date();
// 设置cookie时间 为1秒后失效
  d.setTime(d.getTime() + (1000));
  const expires = `expires=${d.toUTCString()}`;

  document.cookie = `${cookiename}=new_value;path=/;${expires}`;
 // 如果设置完当前cookie以后通过检测 检测不出来刚设置的cookie 就代表当前这个cookie设置了httponly 并且没有失效
  if (document.cookie.indexOf(`${cookiename}=`) === -1) {
    return true;
  }
  // 检测有新设置的这个cookie删除它
  d.setTime(d.getTime() - (2000));
  const expires2 = `expires=${d.toUTCString()}`;
  document.cookie = `${cookiename}=new_value;path=/;${expires2}`;
  return false;
}

// 获取cookie信息
// 因为我们不确定cookie列表的那些cookie设置了httponly 即使知道 万一以后改动了呢。。。
// 所以我们也要检测document.cookie里面的,如果document.cookie没有 再去检测设置了httponly的
function getCookie() {
  const cookieList = document.cookie.split(';');
  const cookieObj = {};
  let i = 0;
  for (const item of cookieList) {
    const cookieKeyVal = item.trim().split('=');
    cookieObj[cookieKeyVal[0]] = cookieKeyVal[1];
  }

// 遍历cookie检测列表
  for (const cookieItem of cookieData) {
// 如果document.cookie存在当前cookie
    if (cookieObj[cookieItem]) {
      i += 1;
      // 如果不存在,去检测httponly， 返回true 为cookie有效 fasle 为无效
    } else if (doesHttpOnlyCookieExist(cookieItem)) {
      i += 1;
    }
  }
  return i;
}

// 这里调用一下 如果cookie列表中有cookie失效
if(getCookie() !== cookieData.length){
// 这里写具体的操作
}
好，这个就完成啦~