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){
// 这里写具体的操做
}
好，这个就完成啦~