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){
// 這裏寫具體的操做
}
好，這個就完成啦~