CSRF and Scripts | Advanced Guides Docs

Autoload Script

Autoload comes with a lightweight script tag that handles two things:

CSRF Token refresh
"Edit Page" button generation (based on user authentication)

Include this script via vite:

    1@vite(['js/autoload.js'], 'vendor/autoload')

There is an alternative way to include this script, learn more at the Component Helpers page.

CSRF Token Refresh

When using Autoload's static HTML cache for your Pages, that are served through Nginx instead of your Laravel application, it is important to note that this does not update or refresh the stored CSRF Tokens. Therefore, your visitors will receive alerts that the "page has expired."

To mitigate this, the `Autoload.js` script will make an API call to a Autoload route whenever the Page it is on loads. This route is responsible for getting a fresh CSRF Token from Laravel and returning it back to the script. The script will then replace all instances of the cached, and invalid, CSRF Token with the new, valid one.

"Edit Page" button

Autoload comes with a quick "Edit Page" button that is fixed to the bottom right of the screen on a Autoload Page. This is only shown for authenticated users with the "Edit Paegs" permission.

This button is loaded over the Autoload script by also using an API call, the same one as the CSRF Token.

Lazy Load Images

Autoload's Image Component comes with lazy loading by storing the image's URL in a dataset attribute.

It is recommended to add the following javascript snippet to your main javascript file that is loaded on all pages so that it will "swap" the dataset attribute into a real "src" attribute, thus loading the image after the javascript is loaded.

     1document.querySelectorAll('.lazyload').forEach(image => {
 2    if (image.type === 'image/webp') {
 3        image.srcset = image.dataset.src;
 4        image.removeAttribute('data-src');
 5    } else {
 6        image.src = image.dataset.src;
 7        image.removeAttribute('data-src');
 8    }
 9 
10    image.classList.remove('lazyload');
11})