花旗卡的推薦人系統在以勾選的情況還出現請勾選確認的問題分析

Posted on by Clarence

今天在用花旗卡的推薦人系統的時候發現它有點問題，明明資料都填了卻會出現沒有勾選需要確認勾選的警告。

網頁渲染問題

本來以為網頁是前端渲染，不過查了一下發現是後端渲染的問題，它在沒有帶入參數跟有帶入參數出現的網頁長得不一樣。

帶入參數使用網頁

如果帶入參數它會把第二個 “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。

No comments yet