在浏览器中拦截和编辑多部分表单数据 POST 请求正文

Question

我有一个网站接受在POST 请求中作为multipart/form-data 发送的文件上传。为了验证之后显示文件名的上传是否受到 XSS 的保护，我想上传一个文件名中包含 HTML 标签的文件。 这实际上比我预期的要难。我无法在我的文件系统 (Windows) 上创建包含 < 的文件。此外，我不知道在上传之前更改 DOM 中文件输入元素的文件名的方法（这是我对普通/隐藏输入所做的）。所以我想在上传之前编辑POST 正文，但我不知道怎么做。流行的扩展（我记得 Tamper Data，Tamper Dev）只让我更改标题。我想这是由于我使用的浏览器 Chrome 的插件系统。

那么，操作POST 请求正文的最简单方法是什么？我可以使用 cUrl 制作整个请求，但我还需要状态、大量附加参数和会话数据等，这会变得相当复杂......浏览器中的简单方法会很好。

Answer 1

因此，虽然这不是一个完美的解决方案，但它至少是一种使用FormData 和fetch 重新创建和操作表单提交的方法。它不像我希望的那样通用，但它适用于这种情况。只需在 devtools 中使用此代码以更改文件名提交表单：

let formElement = document.querySelector('#idForm'); // get the form element
let oldForm = new FormData(formElement);
let newForm = new FormData;
// copy the FormData entry by entry
for (var pair of oldForm.entries()) {
    console.log(pair[0]+': '+pair[1]);
    if(typeof(pair[1]) == 'object' && pair[1].name) {
        // alter the filename if it's a file
        newForm.append(pair[0],pair[1],'yourNewFilename.txt');
    } else {
        newForm.append(pair[0],pair[1]);
    }
} 
// Log the new FormData
for (var pair of newForm.entries()) {
    console.log(pair[0]+': ');
    console.log(pair[1]);
}
// Submit it
fetch(formElement.action, {
    method: formElement.method,
    body: newForm
});

我仍然很欣赏其他方法。