[bug]记一次CSS引发的Token的失效

第一次在博客中写由[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
复制代码

然后Bug就出现了

测试发现使用有些账号时，token跟服务器上存放的不一致，而找不到原因。后打开devtool发现页面被请求了两次，才发现了下面的原因

css的background:url()

<p style="background:url('')">loremp>
复制代码

上面的行内样式中，背景图的url为空，浏览器会默认取当前页面的地址来请求。这就导致了上面所说的页面被请求了两次。故而服务器上页面会输出，token因而也会被刷新。但请求却是由图片所发起，页面并不会被刷新，所以客户端页面的token还是原来的。

上面我们可以看到第二次的请求，Accept类型为图片类型，也侧面说明了请求是由background所发出的。

这里有一个小问题，就是Chrome devtools的Network面板，有时并不能准确的反映出真实的请求，比如第二次的页面请求，服务器是有返回html的，但是在devtools里却显示返回为空。