如何将 CSRF 与多部分表单一起使用不起作用

Question

我尝试构建一个表单来上传图像，但是当使用 csrf 时，这对我有用，而且我正在阅读需要在表单 enctype 标记中使用此代码：

<form method="post" action="/?_csrf=<%=csrfToken%>">

这对我有用，但如果只想保存一个图像，但如果想要编辑或删除，则不起作用，因为使用覆盖方法 ?_method=PUT 并返回一个与我 CSRF 一起的 URl

http://localhost:3030/stories/5bafe7a5abe3a7110c5f386b?_csrf=wkhEeV2x-06M_KPnZRoSTPJ3mUZSnuZ6dl7s

Cannot POST

<form class="col s12" action="/stories/{{storieEdit.id}}?_csrf={{csrfToken}}"  enctype="multipart/form-data" method="POST">
      <input type="hidden" name="_method" value="PUT">

        <div class="row">
          <div class="file-field input-field  col s12">
            <div class="btn">
              <span>File</span>
              <input type="file" name="fileUpload" onchange="previewFile()">
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text">
          
                <img src="/uploads/{{storieEdit.image}}" alt="Image" style="width: 25rem;">
               
            </div>
          </div>
        </div>
        </form>

任何建议

感谢阅读

Answer 1

对于多张图片，您需要将 enctype 属性添加到表单中，如下所示：enctype="multipart/form-data"

对于方法覆盖，您需要将方法类型以及 csrfToken 添加到操作查询字符串： action="/stories/{{storieEdit.id}}?_method=PUT&_csrf={{csrfToken}}"

我有类似的代码并且工作正常。 您可以在下面的代码中直接找到所需的更改。

<form class="col s12" enctype="multipart/form-data" action="/stories/{{storieEdit.id}}?_method=PUT&_csrf={{csrfToken}}"  enctype="multipart/form-data" method="POST">
      <input type="hidden" name="_method" value="PUT">

        <div class="row">
          <div class="file-field input-field  col s12">
            <div class="btn">
              <span>File</span>
              <input type="file" name="fileUpload" onchange="previewFile()">
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text">
          
                <img src="/uploads/{{storieEdit.image}}" alt="Image" style="width: 25rem;">
               
            </div>
          </div>
        </div>
        </form>