Filtering Faulty HTML Using Purifier Package

I am going to start this article by a fact that on all over the internet, the blogging websites that were approximately numbered at 152 million in 2013 have gone to almost twice as 300 million in 2017. I mean, that’s a lot of websites and even more content on them.

And as every programmer is an artist and makes his/her own copy of CMS to put in the content and publish on a click of a button. Every one of those websites will have a text editor on them, so we can see the result as we write our content.

 

A typical editor on a laravel site.
A typical editor on a Laravel site.

You can always learn how to integrate a text/html editor on your Laravel installation on one of my posts.

We set our own stylesheets for styling various attributes on our content. But for that to work correctly, we need to have a proper HTML code in place.

What do I mean by that?

As humans, we tend to make mistakes more than often we want to admit. And as with ease we can write HTML in our editor, we can make mistakes in closing a tag, or early/late closing/opening of a tag, which would possibly mess up your CSS and you will end up worrying, how’d that happen. I know, I have been there.

Programmer’s help each other by making tools that they thought they needed for some purpose and make it free. For the problem we have at hand, we also have a package that we can use in Laravel, with/without a text editor.

As it will work with any input, just a textarea would suffice.

HTMLPurifier For Laravel

We can use this package to purify our HTML and handle all kinds of things to prevent our site, if we accept content from other people.

Installing the package

composer require mews/purifier

We can just run the above command and it will install the latest stable version of the package. And if you are using Laravel 5.5 or above, you don’t need to register the provider and alias for the package.

But if you aren’t, you will have to register the provider in your config/app.php,

'providers' => [
// ...
Mews\Purifier\PurifierServiceProvider::class,
]
and alias,

'aliases' => [
// ...
'Purifier' => Mews\Purifier\Facades\Purifier::class,
]

Let’s imagine, you have a text editor and after adding the content on it, you are making a form submit to an endpoint in your Controller file:

purifier example
purifier example, Image from Carbon.now.sh

The Purifier is a facade that has been made and you can call the clean() method on it to clean the HTML.

Alternatively, you can just call the clean() method, which is registered by the package.

Advanced

You can also publish the package’s config file by running the below command:

php artisan vendor:publish --provider=”Mews\Purifier\PurifierServiceProvider”

This will add a config/purifier.php which can be modified with your needs.

You can set all sorts of settings in this file, for example you can set which of the html tags are allowed in your content and CSS properties that you can apply inline on HTML attributes etc.

'settings' => [
'default' => [
'HTML.Allowed' => 'div,b,strong,i,em,u,a[href|title],ul,ol,li,p[style],br,span[style],img[width|height|alt|src]',
'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',
]
]

Like with HTML.Allowed property you can set what all HTML attributes are allowed in your content.

And with CSS.AllowedProperties property, you can set what CSS properties you can use on HTML attributes.

If you are running a CMS, these settings will come in very handy to you at handling the security of site by only allowing safe HTML to pass through and this package will come as a guardian.

Summary

I know this can be benefit many CMS owners who have to let others post content on their website and you just spit the HTML you get into a page. But it can mess up your CSS if it is not properly formatted.
So, if you have any editor and you want to handle the content in it and make restrictions, you can do that by using this package.

And you can find more about this package here.

Interesting Links
Filtering Faulty HTML Using Purifier Package

You May Also Like

Leave a Reply

Your email address will not be published.