admin管理员组

文章数量:1298178

My site is under csurf protection at the moment.

I have assigned all my ajax call with csrf token like below

"/data/someAPI?_csrf="+ $("#_csrf").val and it works just fine with all function I had.

But now I am writing a file upload function and most of the tutorials on the internet are using sumbit form to do so.

So I wrote something like

Node.js

app.post('/upload', function(req, res) {
  if (!req.files)
    return res.status(400).send('No files were uploaded.');

  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
  let sampleFile = req.files.sampleFile;

  // Use the mv() method to place the file somewhere on your server
  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

Solved

HTML

<html>
  <body>
    <form ref='uploadForm' 
      id='uploadForm' 
      action='http://localhost:8000/upload?_csrf=<your_csrf_token>"' 
      method='post' 
      encType="multipart/form-data">
        <input type="file" name="sampleFile" />
        <input type='submit' value='Upload!' />
    </form>     
  </body>
</html>

I directly assigned the token in the form action and it works fine.

My site is under csurf protection at the moment.

I have assigned all my ajax call with csrf token like below

"/data/someAPI?_csrf="+ $("#_csrf").val and it works just fine with all function I had.

But now I am writing a file upload function and most of the tutorials on the internet are using sumbit form to do so.

So I wrote something like

Node.js

app.post('/upload', function(req, res) {
  if (!req.files)
    return res.status(400).send('No files were uploaded.');

  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
  let sampleFile = req.files.sampleFile;

  // Use the mv() method to place the file somewhere on your server
  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

Solved

HTML

<html>
  <body>
    <form ref='uploadForm' 
      id='uploadForm' 
      action='http://localhost:8000/upload?_csrf=<your_csrf_token>"' 
      method='post' 
      encType="multipart/form-data">
        <input type="file" name="sampleFile" />
        <input type='submit' value='Upload!' />
    </form>     
  </body>
</html>

I directly assigned the token in the form action and it works fine.

  • javascript
  • jquery
  • ajax
  • csrf
Share Improve this question edited Nov 28, 2017 at 8:58 Anson Aştepta asked Nov 28, 2017 at 8:34 Anson AşteptaAnson Aştepta 1,1432 gold badges14 silver badges39 bronze badges 5
  • Why not do it as you are doing in ajax call? i.e. define token in form action. – aquaman Commented Nov 28, 2017 at 8:45
  • @aquaman do you mean i should <input type='hidden' name='form-control' value='{{_csrf}}'> put this line within the form? – Anson Aştepta Commented Nov 28, 2017 at 8:49
  • 1 I meant modify your form as action="/upload?_csrf=<your_csrf_token>". And well what you suggested in another option you can try. – aquaman Commented Nov 28, 2017 at 8:51
  • thanks i solved it!!! @aquaman – Anson Aştepta Commented Nov 28, 2017 at 8:57
  • Quick question, how do you obtain that CSRF token in the first place? – Joshua M. Moore Commented Oct 23, 2018 at 19:48
Add a ment  | 

1 Answer 1

Reset to default 5

You can add hidden field for _csrf token. Here is example code

<html>
  <body>
    <form ref="uploadForm" 
      id="uploadForm" 
      action="http://localhost:8000/upload" 
      method="post" 
      encType="multipart/form-data">
        <input type="file" name="sampleFile"/>
        <input type="hidden" name="_csrf" value="<your_csrf_token>"/>
        <input type="submit" value="Upload!"/>
    </form>     
  </body>
</html>

本文标签： javascriptHow to add assign csrf token in the HTML submit formStack Overflow

版权声明：本文标题：javascript - How to add assign csrf token in the HTML submit form - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741270133a2369128.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。