Cà Phê Chém Gió Về Cookie & Session
Вставка
- Опубліковано 23 лип 2024
- 👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
----
Cà Phê Chém Gió Về Cookie & Session
Bạn đã thực sự hiểu về cookie và session?
Vậy thì đây sẽ là video giúp các bạn giải đáp những thắc mắc đó, trong video chúng ta sẽ cùng tìm hiểu cookie, session và các khái niệm liên quan để giúp các bạn có góc nhìn chính xác hơn về nó nhé!
Vì những kiến thức liên quan rất nhiều và mình cũng muốn nói kĩ hơn nên thời lượng video sẽ dài nên các bạn hãy cố gắng theo dõi.
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #nodejs #expressjs #devops #f8
---------
Phân đoạn trong video:
00:00 - Chém gió
02:30 - Khởi tạo dự án Express
08:22 - Tìm hiểu về Cookie
30:20 - Session để giữ phiên đăng nhập
01:16:10 - Trả lời khi phỏng vấn
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu.vn/courses/less...
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức. - Наука та технологія
Đã học xong khóa html css pro của anh, cảm thấy rất hài lòng và số tiền bỏ ra hơn cả mong đợi, vẫn chờ ngày anh ra khóa Js Pro
Hehee, cảm ơn cậuuu. Nào ready để ra khóa JS F8 sẽ update tới toàn bộ học viên nháaa.
Ui cảm ơn em nhiều. Tiếp thêm động lực cho anh làm nhiều bài học tốt hơn nữa 💪💪🎉🎉
@@F8VNOfficial Mong anh Sơn làm thêm 1 khóa về data base, sql cơ bản, áp dụng cơ bản giống khóa js với node js, bao nhiêu khóa học mất tiền còn chả bằng khóa free của F8. Dạy biết chỉ nghĩa code, cách hệ thống hoạt động và biết đưa ra dẫn chứng ví dụ
nhiều cty giờ cần sql, database quá mà F8 lại không có, học mấy khóa ngoài toàn nộp tiền xong bọn nó đem con bỏ chợ
Củng cố kiến thức về cookie quá, ad làm thêm về cors và JWT hay localStorage là full combo luôn ạ. Chúc ad nhiều sức khoẻ cống hiến cho công đồng nhiều hơn.🎉🎉
Okie em để anh làm sớm nhé
@@F8VNOfficial công nhận chất lượng, mình cũng tập code authentication dùng nhiều tools (e.g., auth0, firebase, supabase, etc.) nhưng cũng không hiểu bản chất, hôm nào bạn làm một cái demonstration về nội dung chiếm phiên đăng nhập mà bạn nói trong video cho ae hiểu rõ,
cảm ơn anh ạ, lâu không coi video của anh mà nó vẫn cuốn hay bổ ích và dễ hiểu
Đã lâu từ khi tạm biệt web a sau khi full toàn bộ khóa, giờ thấy a đẹp trai hẳn
Mỗi lần xem video của a Sơn, mặc dù là về chủ đề đã biết rồi nhưng sau khi xem xong vẫn thấy thực sự mình hiểu được sâu hơn rất nhiều. Cám ơn anh nhiều ạ ❤
Anh cảm ơn em vì đã cảm ơn anh nhé 😍
Hay quá a ơi, lại có video củng cố ❤
Cảm ơn em nha
Cám ơn F8 rất nhiều vì những khóa học chất lượng. F8 nhớ giữ gìn sức khỏe nhé :D
Cảm ơn bạn nhiều nha
Chất lượng quá ạ
Cảm ơn a thật nhiều ạ❤
Mong anh Sơn làm thêm 1 khóa về data base, sql cơ bản, áp dụng cơ bản giống khóa js với node js, bao nhiêu khóa học mất tiền còn chả bằng khóa free của F8. Dạy biết chỉ nghĩa code, cách hệ thống hoạt động và biết đưa ra dẫn chứng ví dụ
nhiều cty giờ cần sql, database quá mà F8 lại không có, học mấy khóa ngoài toàn nộp tiền xong bọn nó đem con bỏ chợ
chúc anh nhiều sức khỏe nha
Hay quá, em đang làm login session luôn.
Xem video hiểu nguyên lý thôi em ơi. Code thật dùng thư viện làm việc với session nha em.
Nhạc nền anh dùng ở đầu video hay quá
Vì anh nói rất rõ ràng và dễ hiểu nên mọi người bật x2 lên nghe cũng zdo lắm á :D
Cảm ơn em nha
A đúng là vị cứu tinh mà. Em đang không biết làm thế nào để domain share cookies cho các subdomain để SSO thì chính video này đã giúp em
Cảm ơn a rất nhiều!!!
Mọi cống hiến của anh đều rất đáng trân trọng.
+1 Respect
Ui vui quá. Cảm ơn em nhiều nha
@@F8VNOfficial a ơi em có 1 case như thế này :
''127./0./0./1'' ''localhost./com'' (SSO)
''127./0./0./1'' ''uk./localhost./com'' (react1)
''127./0./0./1'' ''ok./localhost./com'' (react2)
- Sau khi login thì con SSO set cookie với domain là ''./localhost./com'' nhưng 2 con service nó lại không nhận được
- Em không biết có phải do là khác port hay không ?
hôm qua anh Sơn lên video, mà lúc đó buồn ngủ quá. Video rất hữu ích đối với em, cảm ơn anh Sơn nhiều ạ. Em vẫn đang hóng đợi khóa JS Pro của F8. Chúc anh thật nhiều sức khỏe ạ.
Cảm ơn em nhiều nha
@@F8VNOfficial Dạ
Học xong Html CSS pro đỉnh quá. Giờ hóng JS pro quá a ơi !!!
Cảm ơn em nhiều nhé
quá là chi tiết
hay quá đại ka :3
Cảm ơn em nha
cũng gần 2 năm mới coi lại clip của a, bây giờ a giảng chậm vs dễ hiểu hơn xưa nữa
Cảm ơn em nhiều nha
Bữa mới bị nhà tuyển dụng hỏi về cái này hiccc
a sơn nay trắng trẻo mũm mĩm ghê kkk
Anh Sơn có thể chia sẻ 1 video về cách cấu hình server và deploy 1 website ngoài thực tế là làm như thế nào không ạ. Em cảm ơn anh ạ.
Mn cho em hỏi mảng front-end ngoài html/css(sass)/javascript ra còn những ngôn ngữ nào khác hỗ trợ không ạ?
Đúng cứu tinh của em🎉🎉🎉🎉
Em đang làm gì liên quan hả em
Em không có cà phê nhưng có chiếu trải ra để ngồi nghe ạ.
hi
Anh có day nestjs không ạ
Hello a Sơn nhá =)
mong a tiếp tục phần nodejs
ui nhớ anh qué
vậy khi mình gắn cookie tự động bằng tay lên nó có tự đăng nhập luôn không nhỉ
anh Sơn cho em hỏi là nếu mỗi lần req nó đề đính theo cookie thì mình có thể chỉ cần kiểm tra cookie đó thôi mà không cần add nó vào session để kiểm tra được không ạ ? em mới học đến node.js nên đang thắc mắc ạ 😅
bên mình có khóa học ReactNative không a nhỉ
sếp mới mua quả kính, đeo tri thức thật đấy 😂😂😂
Kk 🤣
nice
Uầy anh Sơn nay tròn thế 🤣
😭😭
mong anh ra khóa js pro , nếu được ah ra thêm khóa liên quan tới nhiều ngôn ngữ khác như PHP chẳng hạn
Em tìm kênh Hoàng An học PHP ok nha
em xin info kính anh Sơn ơi
Gặp Cơ Thiếu gì anh 😂
Giờ ra thêm video hướng dẫn lấy HttpOnly cookie nữa là đẹp anh ạ 🐧
Kk. Cái này em viết extension là lấy được mà
@@F8VNOfficial ra khóa extension này hoặc có hướng dẫn bao tiền e cũng mua ạ hi
@F8VNOfficial Hi F8, ở đoạn 1:17:05 có nói là "set expire thì cookie sẽ là session cookie, đóng browser thì nó sẽ biến mất". Theo mình thì phải là ngược lại đúng ko?
==> "set expire thì cookie sẽ là persistent cookie, đóng browser thì nó vẫn lưu, chỉ biến mất khi quá thời hạn expire date."
À đoạn đó mình nói là "nếu ở Expires nó có chữ Session" thì nó là loại "Session cookie", loại này tắt trình duyệt nó sẽ mất bạn nha. Còn khi set expires là date string trong tương lai nó sẽ là "persistent cookie", nó sẽ được lưu trữ cho tới khi hết hạn, dù đóng trình duyệt cũng không mất.
Chỗ màn hình đăng nhập mà một số page nó hỏi có dùng user pass đã lưu thì là tính năng của browser hay cũng là cookie.
Nó gợi ý lại value đã từng nhập ở form thì nó là tính năng của trình duyệt bạn nhé.
day ròi mai xem
Dài lắm
49:49 Mọi người cho mình hỏi anh Sơn dùng cái emoji đấy là tổ hợp phím nào á
Windows + . nha em
@@F8VNOfficial Em cảm ơn ạ :3
Mình cũng đang kiếm người cmt về cái emoji, cám ơn b và a Sơn :))
cho e hỏi mình submit lên nó hiện thông tin ở phần payload mất tiêu thế thì làm cách nào để không hiện thông tin đó ạ ? Dùng ssl hay sao ạh
Hiện ở đó là đương nhiên em ơi. Còn khi em dùng TLS (trước gọi là SSL) thì nó sẽ mã hóa để tin tặc có bắt được request cũng không đọc được payload. Nhưng em mở DevTool ra thì kiểu gì cũng thấy nhé, nó là Debug tool mà.
1 cái nữa cho e hỏi là như fb nó giữ mãi phiên đăng nhập hay shoppe lưu đăng nhập khoảng 1 tuần vậy nó lưu cookie, token tại Local Storage hay sao ạ
Nó refresh token nha em
Mà anh Sơn ơi cho em hỏi là những cái session làm được thì cookies vẫn có thể làm được mà phải hong anh. Ví dụ như là việc giữ phiên thì em có thể dùng middleware để check xem nếu trên browser hiện tại đang không có cookies nào được set thì em sẽ coi như user đã hết phiên đăng nhập hoặc đã logout. Như vậy điểm duy nhất để mình cân nhắc giữa session và cookies đó là việc session lưu data trên server nên nó an toàn hơn phải hong anh Sơn. Em cảm ơn anh ạ
Nó là 2 khái niệm khác nhau nên không thể nói là session làm được và cookie cũng làm được em nhé. Điểm khác biệt chính thì session lưu ở server, cookie lưu ở client. Trong việc giữ trạng thái đăng nhập với session thì cookie được được sử dụng để lưu sessionId (server gửi về qua set-cookie header). Tức là để giữ trạng thái đăng nhập với session thì vai trò của server là tạo ra session và lưu trữ nó (gồm sessionId và data ánh xạ với sessionId đó), còn cookie được dùng để lưu sessionId phía client (thường là trình duyệt), các request từ sau đó sẽ gửi theo cookie sessionId để server lấy ra data ánh xạ của nó và query lấy ra user.
Việc em nói chỉ cần check từ server check nếu không có cookie là biết người dùng hết phiên là chưa đúng hoàn toàn, có thể cookie bị xoá đi trong khi session vẫn còn trên server em nhé. Khi đó chẳng qua client và server không “kết nối” được vì mất cookie thôi. Với cả khi cookie gửi lên hợp lệ thì vẫn cần truy cập session để lấy ra data tương ứng của nó để query lấy ra user.
Điểm duy nhất mà em nói để cân nhắc giữa session và cookie là vì session lưu ở server là an toàn hơn là chưa phù hợp em ạ. Mình không cân nhắc gì giữa session và cookie cả, nó là 2 khái niệm khác nhau - nơi lưu trữ khác nhau nên mục đích sử dụng khác nhau. Khi em cần lưu data nhỏ trên trình duyệt, đặc biệt khi cần có thời hạn hoặc chỉ muốn server truy cập được (httpOnly) hoặc muốn lưu theo domain và path, hoặc muốn nó đính kèm request mang lên server thì em dùng cookie. Còn session dùng khi em giữ phiên người dùng, không nhất thiết phải là phiên đăng nhập. Đơn giản là một phiên để xác định được một client giữa các request khác nhau. Ví dụ làm tính năng giỏ hàng trên ưeb mà người dùng chưa cần đăng nhập, khi đó có thể dùng session em nhé.
@@F8VNOfficial Dạ em đã hiểu ròi ạ. Em cảm ơn anh Sơn nhiều ạ 💕
comeback
Khi nào a ra mắt khóa học js thế ạ
Tầm tháng sau nha em ơi
Trường hợp mà cookie bị hết hạn, thì mình xử lý như nào để vẫn tiếp tục giữ phiên đăng nhập, như refreshToken với JWT thế ạ.
Phía server check session và hạn của nó, sắp hết thì có thể tự trả về Header set-cookie với sessionId thời gian sống lâu hơn.
cuối tháng này ra JS Pro chưa anh ơi, hóng quá rồi anh
Cuối tháng hoặc đầu tháng sau nha em
Khóa node js của anh thiếu đúng cái này, năm ngoài học làm xong mô hình mvc đến lúc tìm hiều tính năng đăng nhập mới ngớ ra là ko có bài về authenticate 😂
Hình như nodejs không hỗ trợ localstorage phải ko ạ
localStorage ở trình duyệt em, node chạy trên server nên không có đâu. Server thì lưu dữ liệu ra file, RAM, database,… em nhé
video của a chi tiết thật, nhưng em có chút thắc mắc mong được anh giải đáp ạ:
1. Khi trang A call api tới endpoint B (tính cả trường hợp giống và khác origin, khác origin thì đã config để A có thể gọi đc)
và ở endpoint B set-cookie lại cho trang A
Vậy thì trong cái devtool, tab name,value,domain,path,… nếu endpoint B không set domain cho A, thì domain lưu ở trang A sẽ là domain của trang A, hay trang B vậy ạ, path thì nó sẽ là “/“ nếu không set (cái này em hiểu)
Nếu ở ý 1 mà endpoint B set domain cho trang A (mà domain khác A, ví dụ endpoint B nó set cookie + domain là C + path là / cho tranh A) thì có phải ở A sẽ không set được không a?
Và nếu như set được đi, thì phải có sameSite là none + 1 số config khác, thì khi F5 trang A, cookie đó vẫn còn mặc dù domain của cookie là C
Client luôn gửi all cookie à bạn hay chỉ gửi một loại nào đó?
Browser tự động gửi all cookies cùng origin bạn nha. Bạn xem bài sau (CORS) để biết về Origin nha.
a dùng font gì cho vscode thế a, cả terminal nữa ạ
github.com/kube/sf-mono-ligaturized đây nh em
Anh sơn ơi cho em hỏi code thật thì session mình lưu trong db hay dùng gì để lưu ạ. Cảm ơn anh ạ
Thường là lưu trong file, ví dụ em code PHP thì có hàm session_start() để bắt đầu phiên luôn, nó sẽ mặc định lưu ra file và tự động xử lý các công việc như trong video anh làm. Còn với ExpressJS thì không có sẵn hàm session_start() như PHP, nhưng nó lại có thư viện "express-session", em tìm "npm express-session" là ra nhé, mặc định nó lưu trong Memory, nhưng em có thể đọc kỹ tài liệu phần "#compatible-session-stores" để có thể lưu nó ra nhiều nơi khác nhé.
@@F8VNOfficial em cảm ơn anh nhiều ạ
Anh cho em hỏi nếu không đọc được cookie bằng js với http only thì có cách nào để em có thể check được ở client là đã login hay chưa không? Ví dụ nếu đã login thì hiển thị avatar user ngược lại hiển thị nút login ạ 🎉🎉
Với SSR truyền thống như anh làm trong video thì em đẩy user data sang view và hiển thị lên nhé. Còn với SPA thì em gọi API get currentUser(), nếu lấy thành công thì hiển thị lên thông tin, avatar em nha.
@@F8VNOfficial OKi anh. Em hiểu rồi ạ
🥰
anh sơn ơi, vì sao code react sao có lúc phần scss nếu cấu hình riêng cho từng module nó nhận lại có lúc chỉ nhận module global thui. Em thấy rất lạ dù đường dẫn đúng và tìm đủ mọi cách nó không có ăn code đó và khi chép đoạn code đó vào module global nó ăn ?
Em ơi đặt lại câu hỏi giúp anh, nói rõ giúp anh cái nào là module, cái nào global em nhé. Đã module là không phải global, em đang nói “module global” làm anh chưa phân biệt được để trả lời em nè.
@@F8VNOfficial em fix đc rùi cám ơn a đã quan tâm đến comment của e
21:25
đợt em đi phỏng vấn junior, có câu hỏi stateful vs stateless là gì, nay em mới hiểu
Ko hẳn em ơi. Nó là thuật ngữ nha em. Đơn giản là “không trạng thái” và “có trạng thái” thôi em ơi. Mà trong phần mềm thì trạng thái nó là dữ liệu. Khi một đối tượng bản thân nó không sinh lưu trữ dữ liệu đó thì là stateless, nó lưu trữ dữ liệu thì nó là statefull.
Như HTTP các request là độc lập, dữ liệu tạo ra từ request trước không lưu lại để request sau sử dụng được nó là stateless, nhưng dùng cookie vào nó lại là statefull vì request trước tạo ra dữ liệu và request sau vẫn mang theo dữ liệu đó (cookie).
Tương tự, trong DevOps. Một dịch vụ không lưu trữ data, ví dụ không tạo ra log lưu trên nó, không tạo ra data lưu trên nó, mà chỉ nhận data đầu vào và thực hiện xuất data ra ngoài lưu chỗ khác, cũng không lưu những config cụ thể mà chỉ nhận config từ ngoài đẩy vào thì là stateless, ngược lại là statefull.
Ở góc độ frontend thì một component chỉ nhận data từ ngoài vào, và kết quả nó tạo ra phụ thuộc bởi data đầu vào, mỗi đầu vào cụ thể luôn cho ra kết quả cụ thể thì nó là stateless. Ngược lại nó là statefull. Ví dụ em có component hiển thị thời gian đếm ngược, nếu time đó truyền từ ngoài vào component con chỉ hiển thị nó là stateless, thời gian được tính toán bên trong thì nó là statefull.
@@F8VNOfficial dạ em cám ơn ạ, thì ra nó nằm ở nhiều góc độ khác nhau chứ kh hẳn là chỉ ở http
anh dùng font chữ gì thế ạ?
SF Mono nha em
Khóa JS bao lâu nữa release vậy ạ
Tầm tháng tới thôi em nha
Giờ muốn mua áo F8 thì phải làm sao anh?
Em đặt qua link này nha forms.gle/FZG2n7o7gCRMRiom9
Face ID đẹp zaii ác anh
Kk, mặt tròn luôn rồi em
a Sơn dùng font chữ gì thế ạ?
SF Mono em nhé
@@F8VNOfficial em cám ơn anh, font chữ siêu đẹp luôn.
Anh Sơn ra khóa Js Pro đi ạ
Hiện bên tớ đang sản xuất nội dung, xong tầm qua tháng sẽ pre-order cậu nhá.
@@kieuoanhf8 Ok cậu
Nhiều khi người phỏng vấn chưa chắc người ta đã biết 😂
Tuỳ người em ơi. Nhiều khi phỏng vấn vị trí fresher cũng là các bạn có 1-2 năm kinh nghiệm thôi. Với cả những chỗ anh bảo chưa chắc người PV biết nó là mấy cái ít sờ tới ấy.
@@F8VNOfficial Nao anh rảnh anh làm video giữ phiên đăng nhập bằng token nữa nhé. Tại sao trong SPA ng ta lại hay dùng token. Thank kiu anh ạ
3:21 gặp bạn Cơ Thiếu .... 😂
CƠ mà bạn ý hơi THIẾU sót mà 🤣
ngon anh
anh cho em xin tên font anh dùng với được không ạ ❤
Em tìm “sf mono ligatures” vào google là ra Github của nó nha.
@@F8VNOfficial dạ em cảm ơn anh nha.
Vẫn chi tiết, dễ hiểu như ngày đầu
Không biết sau anh có định mở khoá học PHP cơ bản không ạ😢
Bên tớ done xong FE đã, sau đó sẽ đi tiếp các ngôn ngữ phía BE cậu nhá.
Cơ Thiếu....Hoàng =))
😂😂
e phân Access token thành 3 đoạn , 1 đoạn lưu vào cookie,1 đoạn lưu vào local stogare 1 đoạn lưu vào redux persits, khi nào dùng thì lấy ghép lại rồi để vào header của API . Ko biết có hiệu quả ko anh, nhưng mà hacker khóc thét :)))
Không hiệu quả. Vì chỉ cần inspect network vẫn thấy token em truyền ở Header với Authorization Bearer . Nó sẽ khó hơn nếu em thay đổi cách nhận dữ liệu trên server ý. Phía client chia token thành nhiều đoạn rồi gửi từng đoạn lẻ lên, server nhận rồi xử lý. Mà phòng người ngay thôi chứ kẻ gian thì nó có cách hết, nên thường thì anh ko mất công vào điều này 🤣