JSP/Servlet 驗證碼驗證時序問題：利用圖片 onload 事件同步 Session 值

問題場景

• 驗證碼圖片由 Servlet 生成，值存入 Session。
• JSP 頁面需獲取該值進行前端校驗，但 JSP 渲染時 Session 可能尚未寫入（或讀到舊值）。
• AJAX 輪詢、延時等方案不可靠。

解決方案：圖片 onload 注入腳本

1. JSP 頁面

<img src="CaptchaServlet" id="captchaImg" 
     onload="syncCaptcha()" />
<script>
var captchaValue = '';
function syncCaptcha() {
    // 動態創建 script 標籤請求專用 JSP
    var s = document.createElement('script');
    s.src = 'GetCaptchaValue.jsp?t=' + Date.now(); // 防緩存
    document.head.appendChild(s);
}
// GetCaptchaValue.jsp 返回：var captchaValue = "A1B2";

2. GetCaptchaValue.jsp

<%
String code = (String)session.getAttribute("captchaCode");
response.setContentType("application/javascript");
out.print("captchaValue = " + (code != null ? "\"" + code + "\"" : "null") + ";");
%>

3. 表單提交前驗證

function validateForm() {
    var input = document.getElementById('captchaInput').value;
    if (input.toUpperCase() !== captchaValue.toUpperCase()) {
        alert('驗證碼錯誤');
        return false;
    }
    return true;
}

優勢

• 圖片加載完成 = Servlet 已寫入 Session = 獲取值最準確時機。
• 無需輪詢、無需延時、無競態條件。
• 兼容所有瀏覽器，無 AJAX 需求。