今天在用花旗卡的推薦人系統的時候發現它有點問題,明明資料都填了卻會出現沒有勾選需要確認勾選的警告。
網頁渲染問題
本來以為網頁是前端渲染,不過查了一下發現是後端渲染的問題,它在沒有帶入參數跟有帶入參數出現的網頁長得不一樣。
帶入參數使用網頁
如果帶入參數它會把第二個 “form-check__item” 吃了,也就是 c2 的 “form-check__label” 根本不會跑出來,可是它又會去檢查這個 checkbox,難怪會出現沒有勾選的問題。直接使用 curl 取得網頁就可以明顯看到問題。
curl -v --silent https://www.citibank.com.tw/global_docs/chi/cc/160907_mgm/index2.html\?media=199\&agent=0\&c=AAA123\&ecid=MGLNNTWCCAZHCA 2>&1 | grep -A8 -E -m 1 '<div class="form-check">' <div class="form-check"> <p class="form-check__item"> <label for="c1" class="lh-110 form-check__label"> <input type="checkbox" name="iagree-notcie1" id="c1"> <span></span>本人已知悉並同意將成為卡友推薦之被推薦人<br>本人已閱讀並了解花旗(台灣)銀行於網站上提供給本人之「<a href="https://www.citibank.com.tw/global_docs/chi/pressroom/infoprotect.pdf" target="_blank" class="form-check__link">蒐集、處理及利用個人資料告知事項</a>」</label> </p> </div> <!-- <div class="each plus gift_note GIFTID_area"></div> --> </div>
不帶入參數使用網頁
可是在不帶入參數的情況它又正常
curl -v --silent https://www.citibank.com.tw/global_docs/chi/cc/160907_mgm/index2.html\?media=199 2>&1 | grep -A11 -E -m 1 '<div class="form-check">' <div class="form-check"> <p class="form-check__item"> <label for="c1" class="lh-110 form-check__label"> <input type="checkbox" name="iagree-notcie1" id="c1"> <span></span>本人已知悉並同意將成為卡友推薦之被推薦人</label> </p> <p class="form-check__item"> <label for="c2" class="lh-110 form-check__label"> <input type="checkbox" name="iagree-notcie" id="c2"> <span></span>本人已閱讀並了解花旗(台灣)銀行於網站上提供給本人之「<a href="https://www.citibank.com.tw/global_docs/chi/pressroom/infoprotect.pdf" target="_blank" class="form-check__link">蒐集、處理及利用個人資料告知事項</a>」</label> </p> </div>
結論
會出現這個問題應該是 JS 的地方誤寫了或是 HTML 渲染的問題,不知道哪個才是它們真正想要做的效果,以上僅供研究探討問題需要跟官方確定請它們修復。
更新
2021-12-04:看了一下功能已經正常了,看起來是修正了 JS 的檢查讓它不要去檢查 iagree-notcie
。
《AWS CDK 完全學習手冊:打造雲端基礎架構程式碼 IaC》
第 12 屆 iT 邦幫忙鐵人賽 DevOps 組冠的《用 CDK 定 義 AWS 架構》
第 11 屆 iT 邦幫忙鐵人賽《LINE bot 好好玩 30 天玩轉 LINE API》
一個熱愛分享的雲端工程師!