JSF Web应用开发：提交前加密表单输入并还原原值的实现咨询

这问题我之前做内部系统时碰到过，刚好可以给你一套通用、对用户完全透明的实现方案，完美匹配你的需求——通过标记类识别需要加密的字段，提交前客户端加密、提交后自动还原原始文本，全程用户无感知。

核心思路 #

1. 用自定义CSS类（比如encrypt-field）标记需要加密的输入框
2. 为每个标记字段绑定一个隐藏输入框，专门存储加密后的值
3. 监听表单提交（含AJAX提交）事件，提交前加密原始值到隐藏字段
4. 提交完成后（尤其是AJAX回调），自动将原始值恢复到输入框中
5. 后端接收隐藏字段的加密值，解密后处理业务逻辑

1. 页面结构实现（JSF） #

给需要加密的h:inputText加上标记类，同时创建对应隐藏字段（命名建议和原始字段关联，比如后缀加Encrypted）：

<h:form id="userForm">
    <!-- 原始输入框：加encrypt-field标记类，绑定后端展示用的属性 -->
    <h:inputText 
        id="username" 
        styleClass="encrypt-field" 
        value="#{userBean.username}" 
        placeholder="请输入用户名"
    />
    <!-- 对应隐藏字段：存储加密后的值，绑定后端接收用的属性 -->
    <h:inputHidden 
        id="usernameEncrypted" 
        value="#{userBean.usernameEncrypted}" 
    />

    <h:inputText 
        id="password" 
        styleClass="encrypt-field" 
        value="#{userBean.password}" 
        type="password"
        placeholder="请输入密码"
    />
    <h:inputHidden 
        id="passwordEncrypted" 
        value="#{userBean.passwordEncrypted}" 
    />

    <!-- 提交按钮（支持普通提交和AJAX提交） -->
    <h:commandButton value="提交" action="#{userBean.handleSubmit}">
        <f:ajax execute="@form" render="@form" />
    </h:commandButton>
</h:form>

2. 客户端JavaScript逻辑 #

这里用CryptoJS做示例加密（你可以替换成自己的加密算法，比如RSA非对称加密），重点实现加密、还原的通用逻辑：

// 替换成你的加密实现，示例用AES对称加密（注意：生产环境建议用非对称加密！）
function encryptRawValue(rawValue) {
    // 密钥不能硬编码！生产环境建议从后端动态注入（比如页面渲染时放到隐藏域）
    const secretKey = 'your-secure-key-from-backend';
    return CryptoJS.AES.encrypt(rawValue, secretKey).toString();
}

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
    const targetForm = document.getElementById('userForm');

    // 处理普通表单提交
    targetForm.addEventListener('submit', (e) => {
        encryptTargetFields();
    });

    // 处理JSF AJAX提交
    jsf.ajax.addOnEvent((ajaxData) => {
        if (ajaxData.status === 'begin') {
            // AJAX请求发起前执行加密
            encryptTargetFields();
        } else if (ajaxData.status === 'success') {
            // AJAX成功后恢复原始输入值
            restoreOriginalValues();
        }
    });
});

// 加密所有标记字段
function encryptTargetFields() {
    const encryptFields = document.querySelectorAll('.encrypt-field');
    
    encryptFields.forEach(field => {
        const rawValue = field.value.trim();
        if (!rawValue) return;

        // 存储原始值到临时属性，用于后续还原
        field.dataset.originalValue = rawValue;
        // 清空原始输入框（避免提交原始值，可选，看后端接收逻辑）
        field.value = '';

        // 找到对应隐藏字段
        const hiddenFieldId = `${field.id}Encrypted`;
        const hiddenField = document.getElementById(hiddenFieldId);
        if (hiddenField) {
            hiddenField.value = encryptRawValue(rawValue);
        }
    });
}

// 提交完成后还原原始输入值
function restoreOriginalValues() {
    const encryptFields = document.querySelectorAll('.encrypt-field');
    
    encryptFields.forEach(field => {
        if (field.dataset.originalValue) {
            field.value = field.dataset.originalValue;
            // 清理临时属性
            delete field.dataset.originalValue;
        }
    });
}

3. 后端Bean逻辑（Java） #

接收加密值，解密后处理业务，同时保留原始值用于页面展示：

@ManagedBean
@ViewScoped
public class UserBean implements Serializable {
    // 用于页面展示的原始值（提交后会自动保留）
    private String username;
    private String password;

    // 接收加密后的值
    private String usernameEncrypted;
    private String passwordEncrypted;

    public void handleSubmit() {
        // 解密加密值（和前端算法保持一致）
        String decryptedUsername = decryptEncryptedValue(usernameEncrypted);
        String decryptedPassword = decryptEncryptedValue(passwordEncrypted);

        // 执行业务逻辑，比如验证、存储等
        System.out.println("解密后的用户名：" + decryptedUsername);
        System.out.println("解密后的密码：" + decryptedPassword);

        // 注意：username和password字段无需修改，页面渲染时会自动显示原始值
    }

    // 替换成你的解密实现
    private String decryptEncryptedValue(String encryptedValue) {
        String secretKey = "your-secure-key-from-backend"; // 和前端一致
        return CryptoJS.AES.decrypt(encryptedValue, secretKey).toString(CryptoJS.enc.Utf8);
        // 实际Java代码请用对应加密库实现，比如BouncyCastle或Java自带加密API
    }

    // Getter & Setter
    public String getUsername() { return username; }
    public void setUsername(String username) { this.username = username; }
    public String getPassword() { return password; }
    public void setPassword(String password) { this.password = password; }
    public String getUsernameEncrypted() { return usernameEncrypted; }
    public void setUsernameEncrypted(String usernameEncrypted) { this.usernameEncrypted = usernameEncrypted; }
    public String getPasswordEncrypted() { return passwordEncrypted; }
    public void setPasswordEncrypted(String passwordEncrypted) { this.passwordEncrypted = passwordEncrypted; }
}

关键注意事项 #

• 密钥安全：绝对不能把对称密钥硬编码在前端JS中！生产环境建议用RSA非对称加密（前端用公钥加密，后端用私钥解密），或者通过后端动态注入对称密钥（比如渲染页面时放到加密的隐藏域）。
• 加密算法选择：敏感数据（如密码）优先用非对称加密，避免密钥泄露风险；普通数据可以用对称加密但要保证密钥传输安全。
• 兼容性：不同JSF版本的AJAX事件可能略有差异，测试时注意验证jsf.ajax.addOnEvent的回调逻辑。
• 空值处理：加密逻辑中跳过空值输入，避免不必要的加密操作。

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