第一次在博客中写由[bug]开头的标题,想着程序员日常的主要工作之一就是解决各种各样的Bug,所以Bug的解决方案自解是十分重要的了。
表单中我们经常会用到token来解决CSRF的问题,比较常用的是token放在input:hidden中,由服务器生成页面时输出。token在服务端中存放在session中,当我们刷新页面时,这个token就随之刷新,表单提交时,也一道把token值发送到服务器校验,如果token一致,那么就校验通过,否则不通过。
<form action="/">
<input type="text" value="" />
<input type="hidden" value="${token}" />
form
复制代码
测试发现使用有些账号时,token跟服务器上存放的不一致,而找不到原因。后打开devtool发现页面被请求了两次,才发现了下面的原因
<p style="background:url('')">loremp>
复制代码
上面的行内样式中,背景图的url为空,浏览器会默认取当前页面的地址来请求。这就导致了上面所说的页面被请求了两次。故而服务器上页面会输出,token因而也会被刷新。但请求却是由图片所发起,页面并不会被刷新,所以客户端页面的token还是原来的。
上面我们可以看到第二次的请求,Accept
类型为图片类型,也侧面说明了请求是由background所发出的。
这里有一个小问题,就是Chrome devtools的Network面板,有时并不能准确的反映出真实的请求,比如第二次的页面请求,服务器是有返回html的,但是在devtools里却显示返回为空。