如何通过JavaScript实现表单XSS防护？调用htmlEncode与jsEscape

你需要实现sanitize()函数，在表单提交前对username字段的值进行编码处理，利用已定义的htmlEncode或jsEscape函数过滤XSS风险字符。以下是具体实现：

function sanitize() {
    // 获取username输入框元素
    const usernameInput = document.getElementById('username');
    // 获取原始输入值
    let rawValue = usernameInput.value.trim();
    
    // 使用htmlEncode编码（推荐用于HTML渲染场景）
    // 若需在JS上下文使用，可替换为jsEscape函数
    const sanitizedValue = htmlEncode(rawValue);
    
    // 将编码后的值放回输入框，确保提交的是安全内容
    usernameInput.value = sanitizedValue;
    
    // 可选：提示用户输入已被处理
    if (rawValue !== sanitizedValue) {
        alert('输入包含不安全字符，已自动处理');
    }
}

关键说明 #

• 函数选择：如果后端会将用户名渲染到HTML页面，优先用htmlEncode；如果会插入到JavaScript代码中，使用jsEscape。多数场景下htmlEncode足以应对常见XSS攻击。
• 前端校验局限性：前端校验仅作辅助防护，必须在后端重复执行相同的编码/校验逻辑——攻击者可直接绕过前端（如你提供的curl命令），后端校验才是最终安全屏障。
• 配合已有正则：输入框的pattern属性已做Email格式校验，但仍需编码处理潜在风险字符，避免绕过正则的XSS攻击。

完整整合代码 #

将sanitize函数添加到现有<script>标签中即可：

<script>
    function htmlEncode(str){
        return String(str).replace(/[^\w. ]/gi, function(c){
            return '&#'+c.charCodeAt(0)+';';
        });
    }
    function jsEscape(str){
        return String(str).replace(/[^\w. ]/gi, function(c){
            return '\\u'+('0000'+c.charCodeAt(0).toString(16)).slice(-4);
        });
    }
    
    // 新增的sanitize函数
    function sanitize() {
        const usernameInput = document.getElementById('username');
        let rawValue = usernameInput.value.trim();
        const sanitizedValue = htmlEncode(rawValue);
        usernameInput.value = sanitizedValue;
        
        if (rawValue !== sanitizedValue) {
            alert('输入包含不安全字符，已自动处理');
        }
    }
</script>

<html:form action="forgotUsername" styleId="loginFormBean" styleClass="margin-1rem-top">
    <div>
        <div class="form-floating field">
            <input autocomplete="off" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
                   type="text" id="username" name="username" required class="form-control"
                   value="${loginForm.username}" placeholder="Email"/>
            <label for="username">Email</label>
            <span class="autoComplete-img">
                <img src="assets/images/envelope-gray.svg" alt="">
            </span>
        </div>
        <div class="actions margin-1rem-top text-center">
            <button type="submit" id="submitButton" name="forgotUsernameBtn"
                    class="submit butn-blue butn-md butn"
                    onclick = "sanitize();">
                Forgot Username
            </button>
        </div>
    </div>
</html:form>

内容的提问来源于stack exchange，提问作者Richard