我有一个较旧的 MVC(我认为是 v4,它是用 .Net 4.8 编写的)Web 应用程序,我们将其移至 AFD 后面并在阻止模式下启用了所有默认 WAF 规则。
有时用户无法通过 html 表单上传图像。 根据日志,我遇到以下失败:
我确实看到了这篇文章,但它已经发布了 2 年,我希望 MSFT 现在已经修复了。 完全禁用规则并不理想,这就是为什么我想看看是否可以在代码中做一些事情来使文件上传始终成功。 例如,我应该使用与
POST
不同的 HTTP 方法吗?
形式:
<form method="POST" action="@urlForSavingLogo" enctype="multipart/form-data">
<p>
Browse to an image on your computer and then click the Upload button.
</p>
<p>Image formats supported: .png and .jpg</p>
<p>Optimal pixel height for logo: @Model.OptimalHeightInPx</p>
<ul>
<li>Supports smaller images</li>
<li>
Please note: Logos smaller than the optimal size will not be resized.
</li>
<li>We recommend .png at 300dpi for best quality</li>
</ul>
<br />
<div class="form-group">
<label for="image">@Model.Title</label><br />
<input id="image" class="hiddenInput" type="file" name="image" />
<button id="uploadButton" class="btn btn-default">Browse...</button>
<span id="selectedFileName">No file selected</span>
</div>
</form>
控制器动作:
[HttpPost]
public RedirectResult SaveWebsiteLogo(HttpPostedFileBase image)
{
// omitted for brevity
}
为了清楚起见,以下是表单如何使用 javascript 在单击浏览按钮时选择文件。
//trigger click of hidden input
$("body").on('click', '#uploadButton', function (e) {
e.preventDefault();
$('#image').click();
});
$("body").on('change', '#image', function () {
populateSelectedFileName();
});
有时,我们会遇到两个阻止上传的错误,有时则不会。 我正在尝试找出原因。 它是间歇性的,这一事实让我相信这可能是由于图像的编码或大小造成的。
- Microsoft_DefaultRuleSet-2.1-General-200002
详细信息_匹配_s:[{“matchVariableName”:“ParseBodyError”,“matchVariableValue”:“1”}]
当WAF出现问题时,如果请求正文很大、格式不正确或不支持标准格式,则会触发此规则。
- Microsoft_DefaultRuleSet-2.1-General-200003
详细信息_匹配_s:[]
当请求正文为空时,会出现此规则,或者它会标记内容类型与请求正文结构不相符的请求。
POST
和 multipart/form-data
上传文件的代码设置对于处理图像是正确的。但 WAF 可能会因为请求正文内容或大小而将其标记为可疑,而不是 HTTP 方法本身。
(例如,
image/jpeg
表示 JPEG 图像或 ) image/png
适用于 PNG 文件)。
使用 JavaScript 处理文件选择和上传时,如果您以这种方式发送上传,请检查文件的 MIME 类型是否在任何 FormData
用于受控文件上传:
$('#image').on('change', function () {
const file = this.files[0];
const maxSize = 128 * 1024; // Example size limit (128 KB)
if (file && file.size > maxSize) {
alert("File size must be under 128 KB.");
$(this).val(''); // Clear the input if the file is too large
} else {
const formData = new FormData();
formData.append("image", file);
$.ajax({
url: '@Url.Action("SaveWebsiteLogo", "YourController")',
type: 'POST',
data: formData,
contentType: false, // Let jQuery set the correct Content-Type
processData: false,
success: function (response) {
alert('Image uploaded successfully');
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Upload failed: ' + errorThrown);
}
});
}
});