Disable Props from Being Displayed in "data-page" attribute

[abdorrahmani]

Hello, I use React. Is there a way to not show this data-page attribute? Thanks

[iambherulal]

Have you got a solution I'm facing the same issue.

[iambherulal]

There is another solution. return an empty error

app/Http/Middleware/HandleInertiaRequests.php

public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user(),
            ],
            'ziggy' => function () use ($request) {
                return [ ];
            },
        ]);
    }

[Twyar]

There is another solution. return an empty error

app/Http/Middleware/HandleInertiaRequests.php

public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user(),
            ],
            'ziggy' => function () use ($request) {
                return [ ];
            },
        ]);
    }

Personally I use a function in my app.js for this.

This function will remove the data-page attribute from the element with id app

const cleanApp = () => {
  document.getElementById('app').removeAttribute('data-page');
};

You can then execute this function after Inertia is done loading by using the then() method on createInertiaApp().

createInertiaApp({
    // Your createInertiaApp settings.
}).then(cleanApp);

[iambherulal]

Yes, I'm aware of this but the issue is it only works on the front end anyone can see this data by viewing the page source.

[Twyar]

That's what SSR could be usefull for right ?

[iambherulal]

Yes not sure about how to implement this.

[Twyar]

Actually just tested this.

When you use a Server Side Rendering context this won't work because the object document and window are undefined since they are only available client-side.

Not sure what the best solution for this would be, but I'm positive that it's possible.

[Twyar]

Think it's impossible. I managed to remove the data-page attribute using SSR as well, so it's not there when you're viewing the page source, but you'll receive the following error.

Inertia really needs the JSON data from the attribute.

It's only possible to remove it cosmetically, so when you inspect element.

[reinink]

Hey folks! So the data-page attribute is required on the initial Inertia page load — this is how we get the initial page data from the server to the client-side app (React, Vue, Svelte). This attribute is only necessary for the initial page visit, as all subsequent page visits are done via XHR and the page data is passed via JSON in those responses.

You can read about this in the docs on the protocol page:

The very first request to an Inertia app is just a regular, full-page browser request, with no special Inertia headers or data. For these requests, the server returns a full HTML document.

This HTML response includes the site assets (CSS, JavaScript) as well as a root <div> in the page's body. The root <div> serves as a mounting point for the client-side app, and includes a data-page attribute with a JSON encoded page object for the initial page. Inertia uses this information to boot your client-side framework and display the initial page component.

Also, keep in mind that all data sent to the client from Inertia is publicly visible — that's how Inertia works, so always be careful what data you send. There is a note about this on the responses page:

To ensure that pages load quickly, only return the minimum data required for the page. Also, be aware that all data returned from the controllers will be visible client-side, so be sure to omit sensitive information.

So while you could technically remove this attribute using JavaScript (as @Twyar suggested), it's still technically visible in the original server side response. Meaning, this shouldn't be a way to keep this data secure — as it's very much not.

Again, all data sent in an Inertia response is publicly available and should be treated as such. Only share data that is safe to share.

Hope that helps 🤙