{{ $Auth::User() }} bug?

Published 1 month ago by Poke

So I created a website with Laravel, and I just found out if a user writes {{ $Auth::User() }} and it gets displayed on the website, for example if the user makes his username that then the website breaks.

This is with the default auth scaffolding or in a forum post.

I found out if I remove the line that says <script src="{{ asset('js/app.js') }}"></script> in the main layouts app.blade.php file, then it works fine again.

This points to the file in the public\js folder called app.js

Also if I remove the file and pointer then no JavaScript elements seems to work.

Update (Still not solved):

This seems to be something with Vue in the app.js file trying to read the curly brackets and breaks. This does not seem good if anyone puts in curly brackets they can break your website...

Update 2 (Fixed):

So it was Vue in the default app.js file that took the "un-escaped" strings from either a username or some input from the user in general. Which then get taken by Vue, where it sees curly brackets as something it needs to interpenetrate.

I fixed it by removing the default app.js file and replaced it with my own that support bootstrap.

Thanks for a nice and healthy discussion, I learned something new! :D

Best Answer (As Selected By Poke)
sutherland

You don't have to use the default js file at all. If you're using Bootstrap and that's the only javascript you need, just remove app.js and load jQuery and Bootstrap from a CDN.

martinbean

@poke What do you mean by “anywhere where the user can input things that gets displayed on the website”?

Also, you shouldn’t have a dollar symbol in front of Auth, and the method name is camelCased, i.e. just user() not User().

Poke

If I create a user called {{ $Auth::User() }} then it flashes the website for a split second, and then everything goes blank. I don't fully know if it is that file that app.js but when its not there then it at least shows the website.

Doesn't matter with the dollar symbol, since it still breaks the website. Could be the curly brackets that does it.

The user gets created correctly, its when displaying the name with {{Auth::user()->name}} it breaks.

Poke

It displays the name correctly when the app.js file is removed tho, so this is why I believe that the file has something to do with the website breaking.

Cronix
Cronix
1 month ago (169,770 XP)

Why would you output the entire user object anywhere, except maybe for debugging? That's the entire object, not a property (which is ok to output {{ Auth::user()->name }}). You will get unpredictable results with that, especially after running it through blade {{ }} since it converts the variable into a html-safe manner by running it through htmlspecialchars().

If you look at the html source for the page, you'll probably see why it's causing a problem. It's probably breaking the html somewhere.

Poke

I am not outputting the entire user object. I just crate a new user named {{ $Auth::User() }} which then breaks the website, not gonna write how it breaks since I already did above.

sutherland

He's saying that if he displays the user input unescaped and it breaks.

The reason that it happens when you load the default app.js file is because Vue tries to render anything in {{ ... }} using their template engine, and obviously if it's a variable that doesn't exist you'll get an error. Try loading it again and look at your browser's javascript console and you should see the error.

Poke

Ok, so it's a flaw in Vue then? And when it breaks the website, it removes everything(nearly) from the website. And there are no console errors.

This is what's left in the body, and I have also tried this on a live server. Got the same result. This ain't good tho, if it breaks on the default auth scaffolding.

<body>
    <!---->

    <!-- Scripts -->
    <script src="http://127.0.0.1:8000/js/app.js"></script>
    

</body>

The reason it flashes the website first is because it have not run the script yet. But when it get to it, then it removes everything in body, but the pointer to itself. (It seems like)

sutherland

That's because everything is in <div id="app">...</div> which Vue wants to render by default. If you don't use Vue, don't include it in your compiled JS file. If you are using Vue and just don't want it to try to render user input, simply add the v-pre prop to elements that contain user submitted data.

<span v-pre>{{ this will not be compiled }}</span>
Poke

Ok, thanks! I don't know where Vue came from, I have no clue on what it does. So I will try to remove it from the compiled JS file. (Gonna look up on how to do that.)

And then come back here with an update!

martinbean

@Poke What do you mean you’re creating a user named {{ $Auth::User() }}?!

Poke

Step 1. Go to a sign up page.

Step 2. Where it says name, put in {{ $Auth::User() }}, do whatever for email and password.

Step 3. Login.

Step 4. Website breaks, as I described above.

sutherland

@martinbean like I said, it's an unescaped user input problem. Vue tries compiling the page and sees the curly braces, it could be anything that isn't a variable and it would break.

Snapey
Snapey
1 month ago (683,015 XP)

so simply, if you create user content that contains {{ anything }} then when you insert that into html, then vue will consider it as something that needs parsing.

It is not escaped by php because { and } are not special characters

I can see how this could be an issue and open to misuse.

@martinbean , @Cronix

Poke

@sutherland is Vue with Laravel by default?

If it is then why is the default auth made in an un-escaped manner, which leads unskilled developers like me to believe it's the correct way to do it?

Snapey
Snapey
1 month ago (683,015 XP)

the code you posted should never make it to the user's browser.

Please sign in or create an account to participate in this conversation.