The first time I wrote a title starting with [bug] in my blog, I thought that one of the main tasks of programmers is to solve all kinds of bugs, so it is very important to solve the solution of bugs.

The page looks like this

Tokens are often used in forms to solve CSRF problems. Most commonly, tokens are placed in input: Hidden and output when the server generates the page. When the page is refreshed, the token value is refreshed. When the form is submitted, the token value is also sent to the server for verification. If the token is consistent, the verification is passed; otherwise, it is not.

<form action="/">
    <input type="text" value="" />
    <input type="hidden" value="${token}" />
</form
Copy the code

And then there’s the Bug

The test found that some accounts were inconsistent with the token stored on the server, and the cause was not found. After opening Devtool, I found that the page was requested twice, and I found the following reason

The CSS background: url ()

<p style="background:url('')">lorem</p>
Copy the code

In the inline style above, the url of the background image is empty, and the browser defaults to the address of the current page. This results in the above page being requested twice. The page is output on the server and the token is refreshed. However, the request is initiated by the image and the page is not refreshed, so the token of the client page remains the same.

The second request, Accept, is of the image type, and the request is made by background.

One small problem is that the Network panel in Chrome DevTools sometimes doesn’t accurately reflect a real request, such as a second page request, where the server returns HTML, but DevTools shows an empty return.

Make an advertisement

The company is now urgently looking for front-end development, the coordinates of Shenzhen Nanshan, interested can see here, directly send my resume email. [email protected]