In the world of articles, there are articles that are a bit lenient (just for the sake of getting things going) when it comes to XSS protection, so I would like to write about XSS protection in Laravel and points to be aware of taking that into account.

What is XSS?

Cross-Site Scripting has security vulnerabilities.

A malicious third party can run scripts unintended by the implementer within the service we implemented and use them for various malicious purposes.

Therefore, XSS protection is necessary.

Verification Environment

Laravel 6

Basic XSS Protection in Laravel

The most important point to be cautious of when we implement is,

"Displaying data in a system where users can save data at will."

Since anyone can save scripts, it is necessary to prevent them from being triggered when displayed.

In Laravel, XSS protection can be easily done.

{{$user->name}}

By enclosing it in {{}}, you can protect against XSS.

People who have implemented like this should be careful

Using <?php

People who have just started using Laravel might be implementing using PHP syntax.

//Not recommended
<?php
echo $user->name

Always use the method mentioned earlier.

//Recommended
{{$user->name}}

Using {!! !!} for line breaks

Let's avoid this.

Although this method is often seen in articles about line breaks, it does not have XSS protection.

It is recommended to implement line breaks using CSS's white-space property.

<p style="white-space: pre-wrap;">{{$post->content}}</p>

Rewriting html with Javascript or jQuery

For example, when you are writing code using text retrieved from the database, you need to be careful.

//javascript
document.querySelector("#title").innerHTML = "{{$post->title}}"

//jquery
$("#title").html("{{$post->title}}")

Be careful when writing code like this.

Improvement ① Rewriting text

//jquery
$("#title").text("{{$post->title}}")

Improvement ② Rewrite <> saved in the database and then change the html

var title = "{{$post->title}}"
title = title.replaceAll("<", "&lt;").replaceAll(">", "&gt;")
$("#title").html("{{$post->title}}")

Summary

How was it?

I recently received a security diagnosis for a service, and I learned from professionals in the field that XSS protection requires a lot of attention.

This time, I picked up the points to be careful of in Laravel, which is simple, but I hope it was helpful.

As long as you are displaying simply with {{}}, there should be no problem.

If you have any questions or find anything strange, please contact me via Twitter DM.

That's it.