登錄對接CAS-跨域導致的一個意想不到的Bug
背景描述
業務需求是平臺登錄，接入Cas驗證
問題描述
- 平臺登錄頁，點擊登錄方式，跳轉Cas登錄頁，提交登錄請求，結果發現，又回傳平臺登錄頁；
- 再次點擊登錄方式，登錄成功，跳轉到目標頁面，
問題排查
排查方向-瀏覽器兼容性問題
這個問題，開發人員在其本地開發環境復現不了，僅在我本機可以，因此，他們初步懷疑，這個是瀏覽器兼容性問題，開發人員經過一段時間排查，終究沒找出問題所在，
排查方向-跨域問題
筆者無意中發現，登錄成功后，再次退出登錄，然后重復該動作，這種情況下是，問題是不可復現的，但通過點擊流量收藏夾中的網址，實作登錄時，問題就重現了，
于是，仔細檢查了下收藏的網址，發現是網址使用的是http協議，非https，然后我很開心的告訴開發，這種情況下能復現，
經過一番分析后，開發人員得出了結論，就是跨域問題，導致前端獲取不到存盤到localStorage中的Token(最侄訓存盤為Cookie)，所以訪問后端時，沒有攜帶該token值，最終登錄失敗，并基于此準備一些相對復雜的解決方案，
根因分析與解決方案
根因分析
結合自己的分析，及開發的解釋，依舊是云里霧里，感覺開發沒有說清楚里面的邏輯，終不能說服自己，于是結合請求程序，同開發進行二次探討，
以下是整個操作程序中，筆者抓取的一些關鍵請求資訊
- 訪問前臺頁面
GET http://target.sit.example.com/
-
自動觸發登錄檢測請求
GET http://target.sit.example.com/api/admin/checkLogin關鍵回應頭及回應體
Set-Cookie: _TOKEN_KEY_=; Path=/; Expires=Thu, 01-Jan-1970 00:00:00 GMT; Max-Age=0 {"msg":"to login","result":{"redirect":"https://wcas.sit.example.com/cas/login?service=https%3A%2F%2Fmg.sit.example.com%2Fapi%2Fadmin%2Flogin%3FloginType%3DCAS-DATA"},"succ":"jump"} -
檢測結果為未登錄，程式根據目標平臺提示，跳轉Cas登錄頁
GET https://wcas.sit.example.com/cas/login?service=https%3A%2F%2Fmg.sit.example.com%2Fapi%2Fadmin%2Flogin%3FloginType%3DCAS-DATA -
提交Cas登錄
POST https://wcas.sit.example.com/cas/login?service=https://mg.sit.example.com/api/admin/login?loginType=CAS-DATA關鍵回應頭：
Location: https://mg.sit.example.com/api/admin/login?loginType=CAS-DATA&ticket=ST-43509-fE0FeJmFdA3TlLW9dV9Y-casnode1&language=zh&country=CN&variant=CN Set-Cookie: CASTGC-D-SS="";Version=1;Path=/cas;Domain=.sit.example.com;Expires=Thu, 01-Jan-1970 00:00:00 GMT;Max-Age=0 Set-Cookie: CASTGC-D=TGT-939448-9ZhaREwusKuYIvucwdASdPOoCx6yIwpopNWdhS4M2Ousq2Opsu-O2QFU3-casnode1;Path=/cas;Domain=.sit.example.com Set-Cookie: CASTGC-D-SS=TGT-939448-9ZhaREwusKuYIvucwdASdPOoCx6yIwpopNWdhS4M2Ousq2Opsu-O2QFU3-casnode1;Path=/cas;Domain=.sit.example.com;HttpOnly;Secure;SameSite=None -
根據服務器回傳302回應狀態碼及location請求頭，自動重定向
GET https://mg.sit.example.com/api/admin/login?loginType=CAS-DATA&ticket=ST-43509-fE0FeJmFdA3TlLW9dV9Y-casnode1&language=zh&country=CN&variant=CN關鍵回應頭
Location: https://target.sit.example.com/#/home?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIwMTM2NzU5OSIsImV4cCI6MTY4MDI2NzE0M30.auqOB37uknCdoleGdEyCjpUoPlrEtsoV4z1p4zWmpsI&loginType=CAS-DATA Set-Cookie: JSESSIONID=node0vltj8s5ysap840ozd62zcyau14488.node0; Path=/ Set-Cookie: _TOKEN_KEY_=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIwMTM2NzU5OSIsImV4cCI6MTY4MDI2NzE0M30.auqOB37uknCdoleGdEyCjpUoPlrEtsoV4z1p4zWmpsI; Path=/ -
根據服務器回傳302回應狀態碼及location請求頭，自動重定向
GET https://target.sit.example.com/ -
自動觸發是否登錄檢測請求
https://target.sit.example.com/api/tenant/checkLogin關鍵請求頭
Cookie: JSESSIONID=node0hjccl321oho11ioud9caco7bg14483.node0; _TOKEN_KEY_=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIwMTM2NzU5OSIsImV4cCI6MTY4MDI2NzE0M30.auqOB37uknCdoleGdEyCjpUoPlrEtsoV4z1p4zWmpsI關鍵回應
HTTP/1.1 200 OK Set-Cookie: JSESSIONID=node01bh0somchrk8d109bhvjeav6ji14490.node0; Path=/ Set-Cookie: _TOKEN_KEY_=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIwMTM2NzU5OSIsImV4cCI6MTY4MDI2NzE0NH0.qFHISyVRkWcpP7QYkgmb0K32NKhHxUInNQWTNFTfrx0; Path=/ {"msg":"","result":{"accountModifyNum":0,"contacts":"賴大家","email":"","entTenantCode":"WPMJ1d20230317111905","entTenantType":2,"phone":" ] }","registerTime":"2023-03-17","tenantCode":"WPMJ1d20230317111905","tenantType":2,"userAccount":"cNmSiwUONW","userStatus":1,"userType":1},"succ":"ok"}
結合上述請求程序，和開發討論哪一步導致登錄失敗，結論是上述第5步，也就是使用ST換取token后，
和前端開發人員溝通，第5步執行完成后，需要將程式回傳的token存盤到Cookie中，開發截圖代碼如下
從上圖可知，token是在重定向完成后，通過獲取瀏覽器中查詢引數獲取的，這里對開發提出質疑，這一步能否獲取到引數，開發最終驗證的結果是可以取到值，
按理，此時代碼存盤token，按理也是存盤到https協議的域名下面，不應該是存到http協議的域名下，所以，提出假設，這里window.localStorage.getItem('loginType')未獲取到值，因為這個一開始是訪問的http協議的站點時存盤到localStorage中的，此時訪問的是https協議的站點，跨域了，所以取不到值，導致后續的請求Cookie沒有攜帶對應的Token值，
基于這個假設，讓開發去掉獲取登錄型別的判斷，然后構建驗證，結果發現成了，
那如何解釋，第二次點擊登錄方式就成功登錄呢？此時已經是https協議了，二次點擊時不存在跨域問題，重新執行一次登錄請求，因為上次登錄過Cas，所以不會再調跳轉Cas登錄頁，然后就成功了，
解決方案
一開始和開發討論，這個是否考慮存盤到某個檔案，然后從檔案讀取，或其它者跨域存盤方案，后面想一下，直接從介面回傳登錄型別即可，
作者：授客
微信/QQ：1033553122
全國軟體測驗QQ交流群：7156436
Git地址：https://gitee.com/ishouke
友情提示：限于時間倉促，文中可能存在錯誤，歡迎指正、評論！
作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額隨意，您的支持將是我繼續創作的源動力，打賞后如有任何疑問，請聯系我!!!
微信打賞
支付寶打賞 全國軟體測驗交流QQ群
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/551916.html
標籤：其他
上一篇：太卷了！4年測驗在崗，薪資卻被剛剛招來的年輕人超過了...
下一篇：返回列表