Part 45 - Security Concerns with WYSIWYG Editors [How to Build a Blog with Laravel 5 Series]
HTML-код
- Опубликовано: 30 сен 2024
- Every app needs to take security seriously, but especially apps that accept user inputs that contain raw code. In our case we built an app with a WYSIWYG editor that accepts data from the users in the form of code and then we let the code execute on screen. We are hoping that the data is safe, but how can we know for sure?
Well that is what we will do in this video, is make sure that it is all safe before it gets stored into the database.
We will be using a library called HTML Purifier which works to clean up HTML code from our WYSIWYG editor to only allow certain HTML tags that we whitelist, and sanitize all the other tags so they can not execute. This means that if someone tries to put a script tag into our database, we will render it safe before it gets there, protecting our application. Every application that accepts user input should utilize this script.
We will be using a Laravel package for HTML Purifier. You can add it to your project using composer.
Type this into the terminal:
composer require mews/purifier
Clicking enter will run composer update and composer install. Now that it is installed in the application make sure that you add the alias and service providers to our config/app.php file.
With that installed we simply use Purifier::clean() to clean our code.
Coming Up:
Image upload for our project
-- MORE FROM THIS SERIES --
Previous Video [Part 44]: • Part 44 - Output HTML ...
Next video [Part 46]: Coming Soon
Full Playlist for the "How to Build a Blog with Laravel" Series: • How to Build a Blog wi...
- DEVMARKETER INSIDER -
Subscribe to DevMarketer Insider - A weekly (once a week) email newsletter to fans that want to know everything that is happening with DevMarketer, including announcements and articles not published on this channel. No spam ever, I promise, unsubscribe anytime.
confirmsubscri...
-- FOLLOW ME --
Subscribe for New Releases!
Twitter - / _jacurtis
(ask me questions!)
-- QUESTIONS? --
Leave a comment below and I or someone else can help you.
For quick questions you may also want to ask me on Twitter, I respond almost immediately.
Email me hello@jacurtis.com
Thanks for all your support!
---
Tags: Laravel 5.2 Framework Tutorial Easy to learn. Best tut about Laravel. Build a blog with Laravel Tutorial. Beginner tutorial. How to video. PHP framework easy best tutorial. Laravel 5 coding in PHP with Alex.
![Part 46 - Image Upload for Posts [How to Build a Blog with Laravel 5 Series]](http://i.ytimg.com/vi/N_i3UFw0_84/mqdefault.jpg)
![Part 46 - Image Upload for Posts [How to Build a Blog with Laravel 5 Series]](/img/tr.png)
![Part 12½ - Javascript Form Validation [How to Build a Blog with Laravel 5 Series]](http://i.ytimg.com/vi/JmvHTg0sy6o/mqdefault.jpg)
![Part 30½ - Authentication Shortcut [How to Build a Blog with Laravel 5 Series]](/img/1.gif)
For those who has Purifier problems update and purifier didn't want to recognize .. clear config files firs via CLI .. "php artisan config:clear" then "php artisan vendor:publish".
Thanks a lot it work.
hiii,,,,help me please,
this error
ErrorException in Manager.php line 77:
Missing argument 1 for Illuminate\Support\Manager::createDriver(), called in /var/www/project.com/vendor/laravel/framework/src/Illuminate/Support/Manager.php on line 87 and defined
Do you have the e-commerce tutorials finished??
Hello Alex, I think Laravel is escaping the tag itself. I tried to enter alert('hello'); without using HTML Purifier and submitted the form and it was successfully saved into the database by escaping the tag.
Please tell me should we really need to use HTML Purifier or not?
It is not Laravel, it is TinyMCE that is escaping it. So yes, TinyMCE already escapes it. However, if a hacker wanted to, they could disable javascript which would show a plain old textarea field now and then they could add malicious code to the text area and submit the form. Then they would have inserted bad code into our database. But having html purifier on the server side, it makes sure that even if they get around our TinyMCE security (which is easy to do) they can not avoid our server side security (which is HTML purifier). So that is why we have it.
OH now I get it. Thank You for your suggestion and Your videos are really really helpful and waiting for your upcoming videos.
Thanks for the explanation:) Once I simulated JS disabling by entering alert('hello'); into my DB - oh, oh, I didn't like the result at all! However, I am wondering whether script_tags($request->body) would do the same as purifier?
You would loose all of the html tags not only the bad ones
Yes it escapes the data, but purifier will actually remove tags that you do not want. The problem with using WYSIWYG data is that when you output it again to display the submitted data to the user (after pulling it from the database) you need to output the data unescaped. So for example if you bold some words in your blog post, then you want to actually execute those strong tags when a visitor reads the post later. So we will have to unescape the data to display it back in the post. That is when your script tag will now run and show an alert (or whatever other more malicious thing could be engineered) to the user. By using purifier you remove those and know for certain now that it is safe to use unescaped.
Escaped data is good for when you are collecting info from a user that you dont want any HTML code in it (such as a comment form maybe). Because then you can escape it and store it for later. And then display the escaped version back to the user. But when you actually need those HTML tags to render, then you can't escape the data because now it will no longer work. That is why we use purifier, to clean up any unsafe tags. Now we can trust that it is safe to use unescaped.
I just wanna say: Impossible to add custom attribute.
Condom sponsor :)))) lol
Lol first bad thing that came to mind ;)
I have been following this series from Part 1. And I can truly say you are amazing at what you do. Always prefer video tutorials and even with your rants and mistakes it just goes to show that you are a person and not a robot that gets it right all in one haha. Thanks Dude!
Haha thanks.
Anyone getting this error when running Purifier?
ErrorException in PostController.php line 56:
Non-static method Mews\Purifier\Purifier::clean() should not be called statically, assuming $this from incompatible context
make sure your path like : use Mews\Purifier\Facades\Purifier;
hi alex? ....The purifier is working as expected both in front-end and back-end, but i noticed one thing. If you click edit post when still having that alert("You have been hacked");, the script will output on the browser once you open that post for editing. Could that be avoided or escaped too?
Best regards.
Hi, did you found any solution for this? I'm curious how can i prevent outputing scripts on edit view :)
Thanks alot man, your amazing man
Can you please post the link of E-COMMERCE SITE that you OFTEN talk about???
i CAN'T FIND it in your playlist !!!!!!!!!
I just test what actually purifier does without tinymce...
it doesn't even save to DB strings like '<script>'
it just cuts it off from string and even with {{ }} you won't be able to display it.
thank you for course)
Is there something in Laravel like "mysqli_real_escape_string()" ?
Or Laravel queries do this automatically ?
How would you break your mac just by playing with PHP configuration files ?
i could not publish the config, terminal shows "Nothing to publish for tag [].". I googled the problems, but nothing helps.
Thanks for your nice tutorial. Laravel editor output missing closing div when I copy text from web. For general text, it is ok. But when I copy long div based output like bootstrap then laravel output missing the closing tag, as a result my content page breaks down. Have you any solution ?
I have to something so that editor can automatically fix the missing tags when copied.
guys, how to sort comments by date? I want, last comment on top..
ODPOWIEDZ
Hey Alex, I was just curious if you could please show us how to make a like button as well as image uploader in the posts? Thanks.
I am new to Laravel 5 but I found this tutorial for adding image intervention library to the laravel. I just can't figure out how to integrate it so that users can upload images to the post they create. Here is the link: image.intervention.io/getting_started/installation Please lets work together on this. I mean all of us.
Yes image uploader is live. We will do a like button on something soon. not in this series, but I am sure we will come across something soon where we need to add it.
yes we use image intervention in the next video actually. Go check it out and leave a comment on that video if you are still lost.
Thanks for your hard work, man! Greetings from Brazil!
Well, we didnt clean title or slug as we did for body. Is it unnecessary or ?
How do you feel about using atom over sublime for laravel?
Sir your tutorial series is good. sir how to create user role base dashbord...
When eCommerce series will be published ?
getting this error.please help!!!
Using version ^2.0 for mews/purifier
./composer.json has been updated
> php artisan clear-compiled
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.
Problem 1
- laravel/framework v5.2.26 requires ext-mbstring * -> the requested PHP extension mbstring is missing from your system.
- laravel/framework v5.2.26 requires ext-mbstring * -> the requested PHP extension mbstring is missing from your system.
- laravel/framework v5.2.26 requires ext-mbstring * -> the requested PHP extension mbstring is missing from your system.
- Installation request for laravel/framework (locked at v5.2.26, required as 5.2.*) -> satisfiable by laravel/framework[v5.2.26].
To enable extensions, verify that they are enabled in those .ini files:
- /etc/php/5.6/cli/php.ini
- /etc/php/5.6/cli/conf.d/10-mysqlnd.ini
- /etc/php/5.6/cli/conf.d/10-opcache.ini
- /etc/php/5.6/cli/conf.d/10-pdo.ini
- /etc/php/5.6/cli/conf.d/20-calendar.ini
- /etc/php/5.6/cli/conf.d/20-ctype.ini
- /etc/php/5.6/cli/conf.d/20-exif.ini
- /etc/php/5.6/cli/conf.d/20-fileinfo.ini
- /etc/php/5.6/cli/conf.d/20-ftp.ini
- /etc/php/5.6/cli/conf.d/20-gd.ini
- /etc/php/5.6/cli/conf.d/20-gettext.ini
- /etc/php/5.6/cli/conf.d/20-iconv.ini
- /etc/php/5.6/cli/conf.d/20-json.ini
- /etc/php/5.6/cli/conf.d/20-mcrypt.ini
- /etc/php/5.6/cli/conf.d/20-mysql.ini
- /etc/php/5.6/cli/conf.d/20-mysqli.ini
- /etc/php/5.6/cli/conf.d/20-pdo_mysql.ini
- /etc/php/5.6/cli/conf.d/20-phar.ini
- /etc/php/5.6/cli/conf.d/20-posix.ini
- /etc/php/5.6/cli/conf.d/20-readline.ini
- /etc/php/5.6/cli/conf.d/20-shmop.ini
- /etc/php/5.6/cli/conf.d/20-sockets.ini
- /etc/php/5.6/cli/conf.d/20-sysvmsg.ini
- /etc/php/5.6/cli/conf.d/20-sysvsem.ini
- /etc/php/5.6/cli/conf.d/20-sysvshm.ini
- /etc/php/5.6/cli/conf.d/20-tokenizer.ini
You can also run `php --ini` inside terminal to see which files are used by PHP in CLI mode.
Installation failed, reverting ./composer.json to its original content.
Update PHP
Lot of thanks sir I learn more from your tutorial
how fix this error FatalThrowableError in ProviderRepository.php line 201:
Class 'Mews\Purifier\PurifierServiceProvider' not found
am experiencing the same issue, did your manage to fix it??
Hey Alex, get video series you're doing a great job. One question, with HTMLPurifier how would I be able to show code examples in a post? When wrapping the code in 'pre' and 'code' tags it displays the less and greater than symbols by their encoded format.
Add the tag to your list of allowed tags inside the configuration file at the end. Just like how we added h1, h2, h3 and so forth, just add pre as another one and then it will not mess with it. Good luck.
? can we did this work by validation that exist in laravel only
and validation laravel is not enough for any form in app
and finally should i use HtmlPurifier in every input in my app
like input Submit,input search ,,input email and other places
really i have confuse with HtmlPurifier And Validation
I think we don't have to do this Html Purifier with other input but just for input that uses Tiny Mce becoz other input doesn't require any styling to be input which in result no html output require so we just use {{}} the escaped one instead of {!! !!}} the unescaped curly bangs bangs.....you may watch 3 previous parts of video to get a better picture of it =D
Thanks sir
Great Series
learn a lot
thanks you are the best.. 👍🤘
Sweet, you listened! :D I mentioned it a couple of months back, glad you took it onboard :D
Just waiting for the right time :)
Hey Alex it would be awesome if you could please show us how to make profile page for users too. my theories on that would be remember how you had the index.blade.php page where the user can see a list of his or her own posts and could delete or view them? so if we could possibly add a jumbotron widget on the top and allow the user to input their info and update it. it would be greatly appreciated it. thanks buddy your series on creating a blog has been awesome.
I know this is not a shopping list but also a search mechanism where users can search posts based on slug or title it would be as sweet as raspberry ice cream. Thanks man.
Its simple, just another view that shows user information. We won't do it in the series, but we will do it on an upcoming video i am sure.
Thank you Alex.
Hi, can you make a video of connecting github to remote server for the website deployment? so that whenever we do a new commit it goes to live server directly.
Eh, thats tricky. I am not sure how to do that actually. Not sure if its possible. You would probably need a service to stand between the two to see the commit on github and then push it to our server. It would probably be a bad idea anyway. Its best to use git and set up a second remote called "production" or something and then have git on your production server and then we can run "git push production master" and it will push it up to your server. That is how we will do it.
Has anyone had any issues getting RUclips embeds to work?
I had a tons of it. After a deep research, I found a solution. When you create a post and apply the filter, just pass the parameter 'youtube'. Simply like that:
$post->body = Purifier::clean($request->body, 'youtube');
should i say laravel is so easy to learn all that You just make it so easy to learn which ever alllllllll the same thank you for all your hardwork
Haha lets say both! :) I think Laravel is pretty easy to learn, but it helps to have a teacher.
cool stuff!
How did you instantly get a warning for parse error at 20:24 ?
using php lint plugin for atom
Shouldn't we add the Purifier::clean() to the comments also? Great series though!
I'm doing it everywhere :D
In a normal textarea Laravel takes care of it. With this WYSIWYG is different because we are removing Laravel protection using {!! !!}
I would have thought that you would change the "HTML Doctype" to "HTML5". Any particular reason not to?
It is currently set to html5. Whenever you just do DOCTYPE html then that is for html5.
+DevMarketer Thanks Alex.
+DevMarketer Perhaps I should elaborate a little bit. In the Purifier settings file, inside the default group, the , 'HTML Doctype' option is set to XHTML. Would that affect anything?
Looks like Purifier or some similar comes out of the box in Laravel 5.4 already
It is not in 5.4 that I know of. Trimming and escaping was added to all request data in 5.4, but not purifier that I am aware. Many people are confused on what purifier actually does (maybe i didnt explain it well enough in the video). I am doing a video soon to explain this difference. There are times when the laravel defaults (trimming and escaping) which are now automatic in 5.4 are good enough. But with WYSIWYG data you need something like purifier.
Ok Alex, thanks for the comment!