为什么通过 Ajax 而不是通过常规 Http 请求发送文件对象数组是安全的？答案

【问题标题】：Why is it safe to send Array of File Objects via Ajax but not via a regular Http Request?为什么通过 Ajax 而不是通过常规 Http 请求发送文件对象数组是安全的？
【发布时间】：2018-04-12 08:17:26
【问题描述】：

我使用 HTML 表单来允许用户上传文件。

为了使添加附件对用户更加友好，我添加了客户端代码以允许用户添加/删除文件（我基本上按照this answer 中的说明进行了此操作）。

因为我不想过多地调整我的服务器端代码，我还是想在常规请求中发送表单，在我的服务器上处理它，并返回一个 Http 响应（即：没有 Ajax，从与主页相同的线程发送请求，然后在我的Servlet 上重定向或转发响应）。

但是，提交FormData 对象的唯一方法是通过 Ajax。当我寻找通过常规 Http 请求（例如：将其附加到表单）发送 FormData 对象的方法时，我听说这是不允许的，因为它不安全。

为什么 FormData 可以通过 XMLHttpRequest 提交，但通过常规 Http 请求（如常规表单提交）提交对用户来说是不安全的？有什么不同？换一种说法：如果您通过Ajax 提交附件，但不是通过常规请求提交，您可能会弄乱附件。为什么？

如果有办法在常规请求中提交FormData，我很想知道它是什么。

谢谢。

额外说明（由 cmets 推动）：

表单上的输入元素不能准确地表示用户的选择。我允许用户添加/删除文件。我通过在客户端代码中创建自己的 Array 或 File 对象来做到这一点。这个新的File 对象数组需要随请求一起发送。这可以通过 Ajax 实现（即：通过创建 FormData 对象），而不是常规表单提交；为什么？

【问题讨论】：

FormData 用于创建基于<form> 的对象，然后可以通过 AJAX 发送该对象。如果您想以非 Ajax 方式发送文件，首先不要创建 FormData 对象。您所要做的就是将<input>s 添加到您的表单中。不确定问题出在哪里，tbh。
我正在创建自己的 File 对象数组。请阅读第二段（包括链接）。
我知道你想做什么；我的建议是使用数组方法，然后基于它们构建<input>s 并将它们添加到<form>，而不是构建FormData 对象并通过AJAX 发送。
添加<input>元素是没有问题的，但是如何给它们设置File对象呢？据我了解，这是不可能的......再次回顾一下，我有一个 Array 的 File 对象。我当然可以使用 javascript 为这些Files 中的每一个在我的表单中添加一个<input> 元素，但我无法设置它的value。
因此发挥创意：让用户选择一个文件，将隐藏的<input>（已设置其值）移动到<form> 中，然后创建一个新的隐藏文件。 jsfiddle.net/khrismuc/bke2nat3（顺便说一句，您说“无法设置其值”的评论比您的编辑更能澄清您的问题）

标签： javascript jquery ajax multipartform-data form-data

【解决方案1】：

提交 FormData 对象的唯一方法是通过 Ajax

这不是真的。

FormData 对象只是在传输之前对二进制数据进行编码的一种方式（有关其用途的完整概述，请参阅MDN）。只有在向服务器发送文件（即二进制数据）时才真正需要它。

如果您想在不使用 AJAX 的情况下执行此操作，请将 enctype="multipart/form-data" 属性添加到您的 form 元素并照常提交。

另请注意，正如您的问题标题所暗示的那样，FormData 的使用与安全性无关。

【讨论】：

如何将FormData 对象附加到表单？我在客户端代码中创建了 FormData 对象。 form 还不知道。
你不需要。您只需为 AJAX 请求手动构建FormData。如果您不想（或不需要）使用 AJAX，那么只需将我上面提到的enctype 属性添加到<form> 中，浏览器会在提交之前为您编码数据。
请阅读问题的第二段（包括链接）。 form 上的 input 元素不能准确地表示用户的选择。我允许用户添加/删除文件。我通过在客户端代码中创建自己的 Array 或 File 对象来做到这一点。这个新的File 对象数组需要随请求一起发送。这对于 Ajax 是可能的，而不是常规的表单提交；为什么？