CSRF TOKEN 节点 js multer 无效

大佬教程收集整理的这篇文章主要介绍了CSRF TOKEN 节点 js multer 无效，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决CSRF TOKEN 节点 js multer 无效？

我正在尝试上传以下文件是我的实现，我正在使用 multer，基本上，当我使用表单操作和所有执行正常表单提交时，此设置有效。我想异步执行 我做错了什么吗？？？

<form ID="AnnouncementPostForm" method="post">
     <input type="hIDden" class="_csrf" ID="_csrf" value="<%=csrftoken%>">
     <input ID="attachment" type="file"/>
     <@R_403_5554@ class="btn btn-custom float-right mb-2 postAnnouncementBtn"> Post </@R_403_5554@>
</form>

----ClIEnt Js ------
    var formData = new FormData();
    formData.append('attachment',document.getElementByID("attachment").files[0])
    fetch('/createAnnouncement',{
        method: 'POST',body:formData
    }).then(result => {
        return result.Json();
    }).then(data => {
        console.log(data);
    })

服务器返回消息：'无效的 csrf 令牌'， 代码：'EBADCSrftOKEN'

//csrf - cross site scripTing 
const csrf = require('csurf');

const app = express();

//store files
const fileStorage = multer.diskStorage({
    desTination:(req,file,cb)=>{
      cb(null,'uploads/files')
    },filename:(req,new Date().getTime().toString()+'-'+file.originalName)
    }
});

//filtering incoming attachments
const fileFilter = (req,cb) => {
    if(file.mimetype === 'application/pdf' || file.mimetype === 'text/plain' || file.mimetype ==='image/png' || file.mimetype ==='image/jpg'|| file.mimetype ==='image/jpeg'){
      cb(null,truE);
    }else{
      cb(null,falsE);
    }
}

//multer mIDdleware
app.use(
  multer({
    storage:fileStorage,fileFilter:fileFilter,}).single('attachment')
);

app.use('/uploads',express.static(path.join(__dirname,'uploads')));

const csrfProtection = csrf();
app.use(csrfProtection);
app.use((req,res,next) => {
    res.locals.csrftoken = req.csrftoken();
    next();
  })
app.use(authRoutes);

解决方法

您fetch()从浏览器代码到服务器的请求是跨站点请求伪造 (csrf)。您将服务器配置为拒绝这些，并使用适当的 AnnouncementPostForm 令牌在 HTML 中配置了 value="<%=csrfToken%>">。所以那个不是伪造的。但是你fetch()是那个。

为防止伪造，您需要在 _csrf 请求中包含相同的表单字段，名为 fetch。您的客户端 Javascript 代码可以从您的 html 表单中检索类似这样的内容，以将其包含在您的 formData 对象中。

var formData = new FormData();
const csrf = document.querySELEctor('form#AnnouncementPostForm #_csrf').value
formData.append('_csrf',csrf)
formData.append('attachment',document.getElementById("attachment").files[0])
...

而且，顺便说一下，您的 html 表单字段不会按书面方式工作。要发送到您的服务器的每个字段都需要一个 name 属性以及一个 id 属性。并且您必须将按钮标记为具有 type="submit"。

<form id="AnnouncementPostForm" method="post">
     <input type="hidden" class="_csrf" id="_csrf" name="_csrf" value="<%=csrfToken%>">
     <input id="attachment" name="attachment" type="file"/>
     <button 
          class="btn btn-custom float-right mb-2 postAnnouncementBtn"
          type="submit"> Post </button>
</form>

您还必须在 nodejs 程序中使用会话，并在 credentials: 'same_origin' 请求的选项中提及 .fetch()。

这里发生了什么？每次呈现您的页面时，它都会获得一个不同的、难以猜测的 res.locals.csrfToken 值。然后，当您回发到服务器时，它会根据您的会话检查传入的 _csrf 值。这可以防止网络爬虫抓取您的 html 并将垃圾或恶意数据发布到您的服务器。