如何使用 javascript 将 CSRF 令牌输入添加到所有表单？答案

【问题标题】：How can I add CSRF token input to all forms with javascript?如何使用 javascript 将 CSRF 令牌输入添加到所有表单？
【发布时间】：2021-10-29 14:32:47
【问题描述】：

我正在尝试这个脚本，但我不知道为什么不起作用
（cookie 的格式为 CSRF=...）

 <script>
        let decodedCookie = document.cookie.split('=');
        let inputElement = document.createElement('input');
        inputElement.setAttribute('type', 'hidden');
        inputElement.setAttribute('name', '_csrf');
        inputElement.setAttribute('value', decodedCookie[1]);
    
        let forms = document.getElementsByTagName("form");
      
        Object.values(forms).forEach( (key) =>{
            key.insertAdjacentHTML('afterbegin', inputElement.outerHTML);
        })
        
        
    </script>

inputElement 生成正确，我认为问题出在 forEach

【问题讨论】：

标签： javascript csrf

【解决方案1】：

您确定设置 cookie 时没有 HttpOnly 标志吗？这使得无法从document.cookie.获得它

我将从调试变量中的值开始，例如document.cookie、decodedCookie（因为decodedCookie = 'key=value; key2=value2' 将导致decodedCookie[1] 成为value; key2=value2）

脚本在哪里？它应该在这些表格下，以便它们被实际选中。在<head></head> 中包含此代码肯定行不通。

【讨论】：

cookie 正在工作，我在 decodedCookie[1] 中有正确的值，而 console.log(inputElement) 显示了正确的元素。我将脚本放在 html 文件的末尾。 forEach 语句正在工作（每个键都是一个表单）但 insertAdjacentHTML 不是

【解决方案2】：

好的，我找到了解决方案。没有真正的问题。使用 chrome 的检查元素，我想我会在 HTML 页面中看到标签。我错了，输入在那里但不可见，因为 whit js 添加了一个隐藏元素，在“检查元素”中不可见，但通过 js 脚本可见：

 Object.values(allforms).forEach( (key) =>{
               
                key.insertAdjacentHTML('afterbegin', inputElement.outerHTML);
console.log(key);
            })

【讨论】：