【Laravel Inertia】めちゃ長いdata-pageを非表示にしたい

はじめに

Inertia を使っていると一番気になるところ
フロント画面に渡す値は必ずこの app 要素の data-page に json で展開される

HTMLを覗いただけで、すべての値が確認できてしまうのはリスクを気にしてしまう
あと要素が増えすぎるとデバッグがとてもしにくい

これを非表示にできないか

data-page の使われ方の調査

Inertia がどのようにレンダリングをしているかは、以下の記事がとても分かりやすい

つまり、初回アクセス時に data-page にある値を参照してレンダリングをしている
ということは、使い終わったら消しても良いのでは

調査

• Vue 3: Props are visible using the element inspector · inertiajs/inertia · Discussion #372 · GitHub
• Disable Props from Being Displayed in "data-page" attribute · inertiajs/inertia · Discussion #1430 · GitHub

初回実行は app.ts の setup() 内、 createApp() が該当する
いわく、この処理の後で data-page を消しちゃって OK とのこと

ほんとか？

dataset は HTMLElement に生えてるらしいので、強制変換＆null条件演算子で繋げる

resources/js/app.ts

    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);

        delete (el as HTMLElement)?.dataset?.page;
    },

こんな感じ
試してみると

なんと成功
とても見やすくなった！

おわりに

消したとしても JS 内には値があるので、フロントにセキュアな値は送らないようにしよう

Inertia v2 が出るみたいなので、標準搭載されるといいな