Display name using v-pre in auth scaffolding

[suth]

Issue

The default auth scaffolding displays the user's name HTML escaped, but if the user has used curly braces the default Vue setup will try to interpolate it. This could lead to the user executing javascript or breaking the page rendering entirely. I don't believe this is a security vulnerability since it will only happen to the currently authenticated user, but a good example should be set for users.

Steps to Reproduce

1. Create a new Laravel project
2. Run php artisan auth:make
3. Register a user named {{ breaksPage }} or {{ alert('Hello World') }}

Solution

Use the v-pre Vue directive on the element displaying the name.

[taylorotwell]

I don't really understand what you're talking about. Why would we put a v-pre directive on a page that doesn't even use Vue at all?

[suth]

Out of the box Laravel includes a compiled JS file that mounts Vue to #app, so even if it's not intended, the page does use Vue.

This video follows those three steps exactly: https://streamable.com/k2uc5