「饥人谷每日一题」CSRF 是什么？
Posted 饥人谷前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了「饥人谷每日一题」CSRF 是什么？相关的知识，希望对你有一定的参考价值。
先从一个故事说起（故事纯属虚构，恶意模仿后果自负）：
小谷最近遭遇电信诈骗被骗的倾家荡产，于是他想到了报复社会。在知乎上狂点800个没有帮助1000个举报后，他决定做点正事干票捞钱的生意。
「很多视频网站都有赠送礼品的功能，假如所有人都赠送我个礼物，我再转卖掉，不就发财啦」小谷寻思着。
说干就敢，经过一番折腾测试，小谷发现视频网站赠送礼物的接口是:
https://xxxx.com/gift/send?target=someone&giftId=ab231
那如何才能让其他用户请求这个接口呢？其实只要用户点击就行，「色诱是最好的陷阱」回想起自己被骗的经过，小谷猥琐狠狠的打了一行文字 ——「想要的都在这里，今夜注定让你无眠~~ 饥人谷-最有爱的前端学习社区」，然后在各个群组里回复。
经过一天等待，有几个上钩的，但远远达不到预期，「有没有更自动的办法，让用户只要看到即使不点也能上钩呢？」。小谷开始对整个网站功能逐一过滤，突然他眼前一亮，在用户评论编辑框内看到了上传外链图片的功能。
https://xxxx.com/gift/deleteRecord
接口类型为POST，请求参数为 { giftId:"ab231"}。 用户无法通过点击一个链接在不知情的情况下发送 POST 请求，怎么办呢？于是，小谷构造了一个页面：
<body> 哈哈，给你开了个玩笑，莫生气~ <iframe name="hiddenIframe" style="display:none"></iframe> <form action="https://xxxx.com/gift/deleteRecord" id="form" method="post" style="visibility:hidden" target="hiddenIframe"> <input type="text" name="giftId" value="ab231"> </form> <script> document.getElementById('form').submit(); location.href = "http://xxxx.com"; </script> </body>
当用户点开这个页面的链接后，会自动发送 POST 请求，然后跳转到原始首页。这样用户既在不知情的情况下赠送了礼品，又在不知情的情况下删除了赠送记录。大功告成后，小谷购买了个广告机在各大论坛狂发....
一周之后，警察
以上是关于「饥人谷每日一题」CSRF 是什么？的主要内容，如果未能解决你的问题，请参考以下文章
Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程
9月新班前端项目班：用React.js做一个IM即时通讯系统——饥人谷