iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
永豐金融APIs

30天全端挑戰!React+Spring Boot+Mongo DB 串接永豐API 打造金融網站系列 第 27

[Day 27] - React 前端串後端 - Cookie存取

目前在瀏覽器儲存使用者資料的主流方式有兩種,
一種是存local storage、一種是存在Cookie裡面,
其他還有trust token、web sql等等的這裡就先不提

透過瀏覽器的開發者工具(f12),可以看到這個網站存了哪些東西在什麼地方
https://ithelp.ithome.com.tw/upload/images/20211012/20128973boBozcGVBg.png

在React中,我們可以直接用js呼叫localStorage來操作資料的存取,
不過因為跟Cookie相比,localStorage在資安上的防禦手段沒有Cookie來得豐富,
所以我決定還是使用Cookie在瀏覽器上存取資料。

首先安裝npm i universal-cookie

接著在程式中import Cookies from 'universal-cookie';

然後新增 存&取Cookie的function,還滿簡單的吧~

//cookie
  const cookies = new Cookies();

  export const setToken = (token) => {
  cookies.set('token', token, 
  { path: '/',secure: true,sameSite :true}
  );
  console.log(cookies.get('token'));
  };

export const getAuthToken = () => {
  if (cookies.get('token')===undefined){
    return '';
  }
  return cookies.get('token');
};

這三個參數分別代表:
secure: true 只能在https連線下回傳Cookie
httpOnly: true 禁止透過script操作Cookie
sameSite :true 禁止跨站回傳Cookie

我原本在這個Cookie裡面有加上Optional的參數httpOnly: true,
但是發現加上去的話我就沒辦法在前端存取Cookie內的token了...

如果不加上httpOnly: true,就表示javascript可以對Cookie做操作,
雖然有另外兩個參數,但安全性還是大大降低,因此另外還需要透過其他header來做資安上的補強

下次來試試看trust token api好了/images/emoticon/emoticon10.gif


上一篇
[Day 26] - React 前端串後端 - 串接登入
下一篇
[Day 28] - React 前端串後端 - Donate!
系列文
30天全端挑戰!React+Spring Boot+Mongo DB 串接永豐API 打造金融網站30

尚未有邦友留言

立即登入留言