iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
1
Modern Web

🍐放學後的網頁開發系列 第 20

[Day20] 柚子放學後的網頁生活 - Cookie / Session

今天要介紹Cookie/Session,在後面會用到這概念,但在開始前要先介紹 Web 運作

Web 運作

我們畫個簡單的圖,看著箭頭指向

來個情境

  1. 我們從Chrome要搜尋交通大學
  2. 我們在Url輸入nctu.edu.tw像Server Request
  3. 藉由DNS解析,Server會收到140.113.X.X
  4. 經DNS Response 給 Browser
  5. 因此我們看到想要的網站

那直接輸入IP位址呢 ?
可以,但要記的住,人老了總是記憶力會下降XD

那 .. Server認識你嗎?

沒有QQ
HTTP 本身是無狀態(Stateless)的Protocol。
像是很多客人 ( Client ) 來敲門,老闆怎麼可能記的住
所以你這次來跟下次來,都會被當做兩個不同的客人

那我該怎麼被老闆記住呢?

Session vs Cookie

  • Session:Session可以翻譯成會議,像是打電話會話的期間,兩方消息互相連結

    1. 存在Server端
    2. 存在檔案或資料庫
    3. 搭配cookie使用
  • Cookie:假設表單填到一半,網頁突然關掉,重新打開發現先前填的內容還在

    1. 存在Client端
    2. 以key/value方式儲存
    3. 會Expire,過期就消失
  • 那要怎麼讓Server區別這Session是誰打來的 ?
    Session ID.
    我們用Browser在第一次向網站request時,伺服器就會自動幫我們產生一個新的Session ID,之後就可以依此判斷囉 ~

  • 會員系統怎麼紀錄帳號密碼呢 ?

  1. User 輸入帳號密碼、按下Submit
  2. 將合法用戶資訊存入Session中並將用戶資料存入Cookie中回傳
  3. Client收到回傳的HTTP header 中 Set-Cookie 指令會依照提供的資訊來存放Cookie,將 Cookie 的名稱與值儲存在 Browser 的 Cookie 存放區,並記錄該 Cookie 隸屬的網域、網址路徑、Expire date、是否安全等資訊
  4. 下次發出Http請求時會先去尋找當前網域的資料夾中有無cookie,如果有就會包含在 HTTP Request 指令的 Cookie Header 中
  • 那這樣安全嗎?
    其實不安全,因為 Cookie 是存在 Client 端,所以重要資料不建議存放在 Cookie
    但是,我們還有 HTTPS
    HTTPS 經由 HTTP 進行通訊,利用 SSL / TLS 加密封包,目的在於提供對網站伺服器的身分認證,保護交換資料的隱私與完整性,但也不是說想用就用,還需要經過一些Authenticate的步驟,現在很多廠商會讓你加價購買此服務。

  • Cookie存在Client端,那可以看嗎?
    可以,讓我們來找找看Chrome放在哪

點選 ( 目前使用6個Cookie )

就可以看到Cookie資料夾底下存放的Cookie囉,每個都包含了名稱、內容、網域、時間、Expire date,那我們下節會開始使用在專案內 ~

資料來源:
https://zh.wikipedia.org/wiki/Cookie
https://en.wikipedia.org/wiki/Session_ID

下課囉 ~ 請鎖定 柚子放學後的網頁生活


上一篇
[Day19] 柚子放學後的網頁生活 - Django Template tags ( If )
下一篇
[Day21] 柚子放學後的網頁生活 - Django Register
系列文
🍐放學後的網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言