Afficher des données brutes en Blade peut exposer votre application à des failles de sécurité.
Ces failles, comme les attaques XSS, peuvent compromettre la sécurité de vos utilisateurs.
Cet article vous guide pour afficher des données non échappées en toute sécurité dans Blade.
Initiez-vous à Laravel et réalisez votre première application en toute confiance.
Dans Blade, il est possible d’afficher des données sans les échapper, ce qui peut être utile pour inclure des balises HTML ou d’autres contenus générés dynamiquement. Toutefois, il est essentiel de le faire en toute sécurité, car afficher des données sans échapper peut introduire des vulnérabilités (comme les attaques XSS) si les données ne sont pas fiables.
Afficher des données non échappées Blade
Lorsque vous devez afficher des données sans les échapper, vous utilisez la syntaxe avec des doubles accolades et des points d’exclamation {!! !!}. Contrairement à la syntaxe {{ }} qui échappe automatiquement les données pour éviter les risques de sécurité, {!! !!} permet d’afficher directement le contenu HTML ou JavaScript brut.
Pour afficher des données sans les échapper, utilisez la double accolade avec un point d’exclamation !! !! au lieu des doubles accolades normales {{ }}.
{!! $variable !!}
Cela affiche le contenu de $variable sans échapper les caractères spéciaux. Par exemple, si vous avez une variable qui contient du code HTML, il sera interprété comme tel.
Voici un exemple plus concret où l’on utilise cette syntaxe pour afficher du contenu HTML ou JavaScript dans une vue Blade.
Imaginons que vous ayez une variable $htmlContent contenant du HTML que vous souhaitez afficher directement dans une vue Blade sans que Laravel n’échappe ce contenu. Par exemple
$htmlContent = "<strong>Bienvenue sur notre site !</strong>";
Afficher ce contenu HTML dans la vue Blade, vous utilisez :
{!! $htmlContent !!}
Ce code affichera le texte » Bienvenue sur notre site ! » en gras, sans échapper les balises HTML.
Exemple pratique : Sécurité Blade et XSS
Pour afficher le code HTML sans échappement dans Blade, en ajoutant un script ou des balises HTML à la page sans risque d’échappement, vous pouvez utiliser les doubles accolades avec des points d’exclamation : {!! !!}. Cependant, il est essentiel de gérer le contenu de manière sécurisée pour éviter les failles XSS.
Dans votre cas, pour inclure du code comme alert(‘test’) et des balises <p> dans le titre, vous pouvez procéder comme suit :
@extends('layouts.main')
@section('content')
<div class="row">
<div class="col-lg-3">
@include('includes/sidebar')
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9">
<div class="card mt-4">
<div class="card-body">
<h2 id="laravel-cest-top" class="rb-heading-index-3 card-title"><h2 class="card-title">
<a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">
{!! "<script>alert('test');</script><p style='color:red'>Laravel c'est top</p>" !!}
</a>
</h2></h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta fugit fugiat hic aliquam itaque facere, soluta. Totam id dolores, sint aperiam sequi pariatur praesentium animi perspiciatis molestias iure, ducimus!</p>
<span class="author">Par <a href="" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Hamid</a></span> <br>
<span class="time">Il y'a 1 heure</span>
</div>
</div>
<!-- /.card -->
<div class="card card-outline-secondary my-4">
<div class="card-header">
Commentaires
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.</p>
<small class="text-muted">Jean le 25 Janvier à 19h02</small>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et enim aperiam inventore, similique necessitatibus neque non! Doloribus, modi sapiente laboriosam aperiam fugiat laborum. Sequi mollitia, necessitatibus quae sint natus.</p>
<small class="text-muted">Paul le 29 Juin à 15h09</small>
<hr>
<a href="#" class="btn btn-success">Laisser un commentaire</a>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col-lg-9 -->
</div>
@stop
Après le lancement du serveur, accédez à cette page. Une alerte s’affichera comme suit.
Ensuite, lorsque vous cliquez sur ‘OK’, cette page s’affichera.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment afficher du HTML brut dans Blade?
Quels sont les risques de ne pas échapper les données dans Blade?
Quand devrais-je utiliser les accolades avec des points d'exclamation dans Blade?
Comment sécuriser l'affichage de données non échappées dans Blade?
Peut-on inclure des scripts JavaScript directement dans Blade?
Conclusion
Comprendre comment afficher des données non échappées en Blade est crucial pour sécuriser vos applications. Quelles mesures de sécurité supplémentaires prenez-vous pour protéger vos données?
