Level 80
@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().
Oct 13, 2017
30
Level 3
{{ $Auth::User() }} bug?
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
Level 3
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.
Level 3
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.
Level 67
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.
Level 3
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.
Level 28
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.
1 like
Level 3
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)
Level 28
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>
1 like
Level 3
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!
Level 80
@Poke What do you mean you’re creating a user named {{ $Auth::User() }}?!
Level 3
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.
Level 28
@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.
1 like
Level 122
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.
1 like
Level 3
@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?
Level 122
the code you posted should never make it to the user's browser.
Level 28
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.
1 like
Level 3
This code?!
<body>
<!---->
<!-- Scripts -->
<script src="http://127.0.0.1:8000/js/app.js"></script>
</body>
Or do you mean the {{ Auth::user()->name }}?
Because the {{ Auth::user()->name }} is getting transformed into the users name, it will spit out their name escaped, but since Vue then takes it and reads the curly brackets then it breaks.
That's at least how I understand it.
Level 3
@sutherland Thank you very much, this fixed my issue. But still weird that the default js file has Vue, and that the default way of showing a logged in username is in a way that breaks the website.
Level 122
if you get this {{ Auth::user()->name }} in your html output then it is either data from user input, or you are not putting .blade. in your view template names
Level 3
@Snapey as I just said, I do not :)
Level 122
you still misunderstand
Because the {{ Auth::user()->name }} is getting transformed into the users name, it will spit out their name escaped, but since Vue then takes it and reads the curly brackets then it breaks.
if you put {{ Auth::user()->name }} in a blade template then it is processed by blade and completely replaced by the user's name. This html is sent to the browser and does not contain any curly braces that might be seen by vue.
if, on the other hand data contains a string with curly braces then it will be passed in the view to the client, and will be seen by Vue
Level 3
@Snapey I understood you. And as you say "if". And it was what happen, a user created a username with a curly bracket.
1 like
Level 28
@Snapey I think you still misunderstand. He doesn't have that in his HTML output, it's in the default auth scaffolding. His report is about user inputted data, which we already established.
1 like
Level 122
no, I know what is happening as mentioned several posts ago, and also that Auth::user()->name is totally irrelevant
it's just striking that a 'user' managed to set their user name to a common and valid Laravel snippet.
I was trying to establish that the OP had not stumbled on this issue because he was not parsing blade correctly and ending up with blade tags in the html output
I remain concerned that a malicious user could cause unwanted vue behaviour in another user's browser. As you said earlier, user submitted content should be excluded by using the v-pre prop... but I wonder how many devs know that?
Level 3
@Snapey well, this is default behavior from the auth scaffolding in Laravel. That's why I thought it was safe, I have now removed Vue, and it works perfect!
Level 28
@Snapey I've already submitted a PR. Since the with scaffolding will only ever display the current user, I don't think it's a big issue but it definitely should be added to set a good example.
1 like
Level 3
@sutherland can you link to it? :)
Level 1
Dont allow anything but a-z0-9 for a username. Why you allowing them to write {{}} $ ?
Level 122
@sadis if you use the provided scaffolding, that's what you get. @sutherland made a pr to fix but taylor just shut it down without thinking about it... very poor IMO
Please or to participate in this conversation.