白話文解說 Http Only Cookies

大家應該常用瀏覽器的開發者工具除錯吧?不知道你有沒有曾經注意到 cookie 的欄位中有一欄 HttpOnly , 你知道是它是做什麼的嗎?

httponly.png

你可以在開發者工具的 console 貼上以下 JavaScript 程式碼,這段程式碼的作用是讓人能夠讀取指定名稱的 cookie 值:

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if(name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

如果你試圖讀取 1 個沒有 HttpOnly 的 cookie, 例如 getCookie('_ga') 就會得到它的值,如果你試圖讀取 1 個有 HttpOnly 的 cookie, 就會發現怎麼也讀取不到它的值,甚至它也不存在於 document.cookie 的值裡。 但是當你正常使用網頁觸發 network requests 時,卻又可以在 Headers 中的 Cookie 標頭中發現它! 猜到作用了嗎? HttpOnly 是 1 個瀏覽器所支援的保護機制,讓開發者可以為特定的 Cookie 設定一層保護,使得他人無法使用/注入 JavaScript 程式碼存取這些受到保護的 Cookie 值,這個保護機制的最大用途就是用來防禦 XSS 攻擊! 因為現代網頁應用很多都是靠 cookie 裡的 Session Id 作為判斷有沒有登入依據,一旦有惡意人士透過 XSS 攻擊在你瀏覽的網頁裡埋入可以偷走 Session Id 的 JavaScript 程式碼,並傳送到惡意人士的手上的話,那麼惡意人士就能夠假裝是你本人直接進行操作(連密碼都不用知道!)⋯⋯。 p.s. 不過現在不一定只以 Session Id 作為判斷依據就是,最簡單的方法是額外判斷來源 IP 位址,如果 IP 位址跟後端資料庫紀錄的不一樣就視為未登入 所以通常 Session Id 或者機敏性高的 cookie 都會加上 HttpOnly 的保護,藉此降低 XSS 攻擊的風險,提高系統的安全性! 至於瀏覽器怎麼知道要為 cookie 設定 HttpOnly 呢? 其實很簡單,只是伺服器在回應 set-cookie 標頭時加上 HttpOnly 而已:

Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly

瀏覽器讀到後面的 HttpOnly, 就知道這個 Cookie 要設定為 HttpOnly 囉!

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!