How to protect statics when authorizing through a token?

Question

OAuth

Good afternoon.

There is a SPA application on React. Authorization on the Backend of the application is performed using the OAuth2 authorization of Google, Facebook,...

The sequence of actions is as follows:
1. Index.html is loaded into the browser and the React application is initialized.
2. LocalStorage is checked for access and refresh tokens. If there are tokens, then a request is made to the Backend (with an access token) to obtain information about the user.
3. If Backend responds with 403 error, then access and refresh tokens are used.
4. If the Backend returns a 403 error with the refresh token, then the user is redirected to a page with the "Continue with Google" authorization buttons and the rest.
5. After successful OAuth authorization on Google, Backend receives the user's Name and E-mail, generates access and refresh tokens, and redirects the user to the login.html page, whose task is to write tokens to localStorage and redirect to index.html.

This mechanism works great, and the React app refreshes its tokens when making XHR requests to the Backend.
Now I need to somehow authorize the user's browser requesting statics (pictures, documents,...) from the server.

- I can't slip headers into the request;
- I also can't use an access token as a parameter in a link to statics - its lifetime is short, the user can be authorized a long time ago, and request statics only now;
- Using both tokens is also pointless, because can't process headers.

It remains to use a cookie, which can be easily dragged away. Tell me how to do it better.