如何通过JavaScript为所有表单添加CSRF token输入项 排查脚本不生效问题

原有代码主要存在3个问题：

• Cookie解析逻辑不严谨，若站点存在多组Cookie时会拿到错误值
• 遍历HTMLCollection的方式冗余，且未处理DOM加载时机问题，经常会出现找不到表单元素的情况
• 未做重复插入校验，可能出现同一个表单被多次添加CSRF输入项的问题

修正后可直接运行的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
    // 提取CSRF Cookie值
    const csrfMatch = document.cookie.match(/(^| )CSRF=([^;]+)/);
    const csrfToken = csrfMatch ? csrfMatch[2] : '';
    if (!csrfToken) return;

    // 遍历所有表单插入隐藏输入项
    Array.from(document.getElementsByTagName('form')).forEach(form => {
        // 避免重复添加
        if (form.querySelector('input[name="_csrf"]')) return;
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_csrf';
        csrfInput.value = csrfToken;
        form.prepend(csrfInput);
    });
});

核心调整点 #

1. 新增DOMContentLoaded事件监听，确保页面所有DOM元素渲染完成后再执行逻辑，不会出现找不到表单的情况
2. 优化Cookie解析逻辑，通过正则匹配精准提取CSRF对应的值，不受其他Cookie干扰
3. 直接用Array.from转换getElementsByTagName返回的类数组对象，遍历逻辑更简洁稳定
4. 新增重复插入校验，避免同一表单被多次添加CSRF输入项
5. 用原生DOM的prepend方法插入元素，替代outerHTML字符串操作，稳定性更高

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