Vue interpolation

Published 2 months ago by kenny11

When you have a user content which includes double curly brakets {{ }} in blade files, it will compile it by Vue.

So, what I mean by that is if users' input is like this my input is {{ alert('hello xss vulnabilities') }} it will alert in blade files. If you don't trust me try it, but you need to run npm run production since the command remove a debug tool.

public function index () {
$text = 'hello {{ xss vulnabilities }}';

return view('welcome', compact('text'));

}

// the screen will go blank if your js file is not minified but it will alert when minified
in blade
<h1>{{ $text }}</h1>

Yes we can use v-pre on every tag where you show your users' contents to tell Vue to not compile it but it is very tiring isn't it?

How do you guys go about fixing this?

Snapey
Snapey
2 months ago (678,375 XP)

You need to put three backticks ``` before and after the code block in order for html to show up in the forum

kenny11

I made a middleware to remove curly brackets, but don't know if this is a better way to do this

Snapey
Snapey
2 months ago (678,375 XP)

I don't understand the issue?

spodlogar

in Blade you need to escape the curly braces.

Give this a try

public function index () {
$text = 'hello @{{ xss vulnabilities }}';

return view('welcome', compact('text'));

}

// the screen will go blank if your js file is not minified but it will alert when minified
in blade
<h1>{{ $text }}</h1>
kenny11

That's just an example. I don't have control what users would type

https://github.com/vuejs/vue/issues/4223

clay
clay
2 months ago (80,905 XP)

<h1>@{{ $text }}</h1> or

@verbatim
    <h1>{{ $text }}</h1>
@endverbatim

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