摘要:需要注意的細節問題為什么前后端都要進行表單驗證前后端都要驗證郵箱格式是否正確,賬號密碼格式是否正確,兩次提交的密碼是否相同等。因為黑客可以繞過前端的驗證流程,例如黑客可以直接使用進行請求的發送,直接與后臺服務器進行交互。
這篇文章是前一篇文章(Cookie理論知識)的實踐性理解
完整代碼:
完整代碼
Cookie在注冊登錄時的作用過程: 注冊注冊時把賬號密碼寫入數據庫
登錄第一次登錄時服務器給瀏覽器發送Cookie.
后臺的登錄路由代碼(nodejs):
else if (path === "/sign_in" && method === "POST") { readBody(request).then((body) => { let strings = body.split("&") // ["email=1", "password=2", "password_confirmation=3"] let hash = {} strings.forEach((string) => { // string == "email=1" let parts = string.split("=") // ["email", "1"] let key = parts[0] let value = parts[1] hash[key] = decodeURIComponent(value) // hash["email"] = "1" }) let { email, password } = hash var users = fs.readFileSync("./db/users", "utf8") try { users = JSON.parse(users) // [] } catch (exception) { users = [] } let found for (let i = 0; i < users.length; i++) { if (users[i].email === email && users[i].password === password) { found = true break } } if (found) {//關鍵在這里,驗證成功,設置登錄Cookie為登錄的郵箱,并放在響應里發給瀏覽器 response.setHeader("Set-Cookie", `sign_in_email=${email}`) response.statusCode = 200 } else { response.statusCode = 401 } response.end() }) }
在登錄成功的一瞬間,需要后臺設置一個Cookie,記錄一下登陸的用戶id(這里用郵箱表示,代碼在上面),然后發響應給瀏覽器
例如在服務器端設置響應頭:set-cookies:user_email=1@mtt.com
這時候我們查看響應:
發現響應頭已經設置cookie.
然后跳轉到主頁,這時候我們查看跳轉到主頁的請求:
發現跳轉到主頁的請求頭中包含cookie字段(以后訪問這個域名都會帶著這個Cookie)!所以,就像上篇文章說的:
如果服務器給了瀏覽器一個setcookie的響應頭,那么這個瀏覽器以后所有的請求,只要是相同的源(即就是上次給我發送Cookie的那個域名,域名和端口相同),那就么就會把當時服務器發給這個瀏覽器的Cookie帶著
以后,瀏覽器一旦訪問這個路徑,瀏覽器就會附上這段 Cookie 發送給服務器
即:第一次請求,服務器為瀏覽器設置Cookie.下次請求,瀏覽器帶上Cookie,發送給服務器.
第一次登錄的時候,服務器給瀏覽器的響應設置一個Cookie,set-cookies:user_email=1@mtt.com,然后當瀏覽器下次進行請求的時候,發現Cookie中有名為User_email的Cookie,而且我發送請求的域名還是上次發給我帶Cookie的響應的那個域名.
那么就無需再次登錄了.相當于服務器給瀏覽器發了進入門票,下次或下下次瀏覽器在進入服務器的時候給服務器看票就可以了
后臺讀取Cookie保留登錄狀態與刪除Cookie退出登錄狀態首頁代碼:
我是首頁
你的狀態是:__status__
你的郵箱賬號是:__email__
你的密碼是:__password__
退出登錄(刪除cookie)
后臺路由代碼
if (path === "/") { response.statusCode = 200 let string = fs.readFileSync("./index.html") string = string.toString(); var users = fs.readFileSync("./db/users", "utf8") users = JSON.parse(users)//轉化為user對象數組 console.log(users); let cookies = request.headers.cookie || ""http://["email=111", "asdasd=111"] cookies = cookies.split("; ") let hash={} cookies.forEach((string)=>{ let parts = string.split("=") let key = parts[0] let value = parts[1] hash[key] = value; }) let eamil = hash.sign_in_email let foundedUser users.forEach((userObj)=>{ if(userObj.email===eamil){ foundedUser = userObj; } }) console.log(foundedUser); if(foundedUser){ string = string.replace("__status__", "已登錄") string = string.replace("__email__", foundedUser.email) string = string.replace("__password__", foundedUser.password) }else{ string = string.replace("__status__", "未登錄,請去登錄") string = string.replace("__email__", "沒") string = string.replace("__password__", "沒") } response.setHeader("Content-Type", "text/html;charset=utf-8") response.write(string) response.end() }
在沒有Cookie的時候,首頁的狀態
登錄之后,后臺根據Cookie查詢數據庫,將用戶名與密碼傳到前臺的首頁上
退出登錄將刪除Cookie并刷新頁面,重新回到未登錄的狀態
Cookie在登錄的時候的特點我們得到Cookie的特點:
第一次登錄的時候,服務器通過 Set-Cookie 響應頭設置 Cookie,然后以響應的形式發給瀏覽器
瀏覽器得到 響應中Cookie 之后,之后每次請求這個域名都要帶上這個 Cookie
之后服務器讀取當時自己設置的 Cookie 就知道登錄用戶的信息(email)
幾個關于Cookie的問題1.我在 Chrome 登錄了得到 Cookie,用 Safari 訪問,Safari 會帶上 Cookie 嗎
no
2.Cookie 存在哪
Windows 存在 C 盤的一個文件里
3.Cookie會被用戶篡改嗎?
可以,例如在谷歌瀏覽器開發者模式下的application->Cookie中可以手動修改,修改之后,下次發送請求時,附帶的就是修改后的Cookie
JS中也有可以操作cookie的api
( 假如換成別的用戶的賬號,那么還可以登錄成功的話,就會存在風險問題.Session 來解決這個問題,防止用戶篡改)
后端可以強制設置不允許修改Cookie,只要將Cookie的屬性設置為Httponly即可(還可以手動改,但是JS改不了,也無法獲取),具體語法看 MDN
4.Cookie 有效期嗎?
默認有效期20分鐘左右,不同瀏覽器策略不同(如果瀏覽器一直開著,那么Cookie不會被刪除.如果關閉瀏覽器,那么瀏覽器為了安全考慮,20分鐘左右后可能會刪除Cookie.這也取決于服務器如何設置Cookie的有效期)
后端可以強制設置有效期,具體語法看 MDN
Cookie 遵守同源策略嗎?
也有,不過跟 AJAX 的同源策略稍微有些不同。
當請求 qq.com 下的資源時,瀏覽器會默認帶上 qq.com 對應的 Cookie,不會帶上 baidu.com 對應的 Cookie
當請求 v.qq.com 下的資源時,瀏覽器不僅會帶上 v.qq.com 的Cookie,還會帶上 qq.com 的 Cookie
另外 Cookie 還可以根據路徑做限制,請自行了解,這個功能用得比較少。
前后端都要驗證郵箱格式是否正確,賬號密碼格式是否正確,兩次提交的密碼是否相同等。
因為黑客可以繞過前端的js驗證流程,例如黑客可以直接使用curl 進行請求的發送,直接與后臺服務器進行交互。
如圖:
所以后臺也需要進行表單驗證。
Cookie如何手動關閉 翻譯cookie:曲奇餅
cache-control:緩存控制
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98124.html
摘要:在路由回調函數里面操作的時候,直接用就可以獲取到客戶端的值。用回調函數來寫后期看起來會很吃力看有沒有重名的看是不是同一郵箱又想重復注冊如果是以上兩種情況,就發送錯誤信息。此賬戶名已經被注冊。 1. 開場白 用戶系統是許多網站的基礎。這篇文章主要就是講解如何寫一個基于Node的單頁應用的用戶系統,這個用戶系統的功能包括:注冊,登錄,自動登錄,忘記密碼,修改密碼,郵件激活。如果使用在后端使...
摘要:介紹結合框架作手機頁面的登錄注冊組件登錄注冊相關知識點和的作用個人理解,如果不到位,懇請指出我的電腦通過請求登錄某一個網頁,登錄成功之后,服務器會返回一個給我的電腦。 介紹 結合`vue`框架作手機H5頁面的登錄注冊組件 登錄注冊相關知識點 1.cookie和token的作用(個人理解,如果不到位,懇請指出) token: 我的電腦通過http請求登錄某一個網頁,登錄成功之后,服務...
摘要:的優勢使用簡單,性能足夠強悍,儲存空間無限制,多臺服務器可以使用統一的登錄態,登錄邏輯代碼的解耦。每次登錄時清除上一次用戶的登錄信息,即清除登錄校驗信息,這樣就能保證同一用戶同一時間只能在一個地方登錄。 HI!,你好,我是zane,zanePerfor是一款我開發的一個前端性能監控平臺,現在支持web瀏覽器端和微信小程序端。 我定義為一款完整,高性能,高可用的前端性能監控系統,這是未來...
閱讀 3058·2023-04-26 00:49
閱讀 3725·2021-09-29 09:45
閱讀 987·2019-08-29 18:47
閱讀 2746·2019-08-29 18:37
閱讀 2728·2019-08-29 16:37
閱讀 3295·2019-08-29 13:24
閱讀 1778·2019-08-27 10:56
閱讀 2349·2019-08-26 11:42