Sécuriser les formulaires avec Laravel

Laravel inclut un plug-in CSRF intégré, qui génère des jetons pour chaque session utilisateur active. Ces jetons vérifient que les opérations ou requêtes sont envoyées par l’utilisateur authentifié concerné.

1. @csrf

• C’est une directive de Blade pour générer un champ de jeton qui sera utilisé pour la vérification. Il génère un champ de saisie masqué.
• Lorsque la directive blade @csrf est utilisée, une balise input de type=’hidden‘ est ajoutée au formulaire.
• La valeur sera le jeton CSRF qui sera envoyé dans le cadre des données du formulaire lorsque le formulaire est soumis.

• Syntaxe

[...]
      <form action="{{ url('/.......')}}" method="post">
          @csrf   
         [...]
      </form>
[...]

• Activité

• Créez un fichier de vue Laravel nommé form-csrf.blade.php avec le code HTML suivant où la directive @csrf est utilisée pour générer le jeton CSRF.

<div class="container mt-5">
        <form action="" method="post">
        @csrf
<div class="row">

            <div class="form-group col-6 lg" >
                <label>Prénom & Nom</label>
                <input type="text" class="form-control" name="prenomNom" id="prenomNom">
            </div>

            <div class="form-group col-6 lg">
                <label>Email</label>
                <input type="email" class="form-control" name="email"
                    id="email">
            </div>
</div>
<div class="row">
            <div class="form-group col-12 lg">
                <label>Message</label>
                <textarea class="form-control" name="message" id="message"
                    rows="4"></textarea>
            </div>
</div>
            <input type="submit" name="send" value="Submit" class="btn btn-primary btn-block">
        </form>
    </div>

• Ajoutez la route suivante dans le fichier web.php pour charger le fichier de vue dans le navigateur. Lorsque l’utilisateur donnera form-csrf après l’URL de base (http://127.0.0.1:8000/form-csrf), il recherchera le fichier form-csrf.blade.php dans le dossier de vue du projet Laravel.

Route::get('/form-csrf', function () {return view('form-csrf');});

• Si vous inspectez la page après l’exécution, vous obtiendrez la sortie comme ci-dessous. Ici, un champ masqué avec la valeur est généré automatiquement par la directive @csrf .



2. csrf_token ()

• Cette fonction peut être utilisée dans la balise meta et le champ de saisie masqué du formulaire HTML. Il génère une chaîne aléatoire en tant que jeton CSRF.
• Créez un fichier de vue Laravel nommé csrf2.blade.php avec le code HTML suivant où la fonction csrf_token () est utilisée pour générer le jeton CSRF. Cette fonction est utilisée comme valeur de l’attribut value du champ masqué et est utilisée avec deux accolades.

• Syntaxe

<form method = "POST">
  <input type = "hidden" name = "_ token" value = "{{csrf_token ()}}">
  .....
  .....
</form>

• Activité

• Créez un fichier de vue Laravel nommé form-csrf_token.blade.php avec le code HTML suivant où la fonction csrf_token () est utilisée pour générer le jeton CSRF. Cette fonction est utilisée comme valeur de l’attribut value du champ masqué et est utilisée avec deux accolades.

<div class="container mt-5">
        <form action="" method="post">
       
<div class="row">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="form-group col-6 lg" >
                <label>Prénom & Nom</label>
                <input type="text" class="form-control" name="prenomNom" id="prenomNom">
            </div>

            <div class="form-group col-6 lg">
                <label>Email</label>
                <input type="email" class="form-control" name="email"
                    id="email">
            </div>
</div>
<div class="row">
            <div class="form-group col-12 lg">
                <label>Message</label>
                <textarea class="form-control" name="message" id="message"
                    rows="4"></textarea>
            </div>
</div>
            <input type="submit" name="send" value="Submit" class="btn btn-primary btn-block">
        </form>
    </div>

• Si vous inspectez la page après l’exécution, vous obtiendrez la même sortie de l’exemple précédent.

3. csrf_field ()

• Cette fonction crée un champ masqué pour le formulaire HTML où il est utilisé et génère un jeton CSRF.

• Syntaxe

<form method = "POST" action="/profile">
   {{ csrf_field() }}
   ...
</form>

• Activité

• Considérez les lignes de code suivantes. Ils affichent un formulaire qui prend trois paramètres en entrée: Nom & prénom, email et message.

<div class="container mt-5">
        <form action="" method="post">
        {{ csrf_field() }}
<div class="row">
            <div class="form-group col-6 lg" >
                <label>Prénom & Nom</label>
                <input type="text" class="form-control" name="prenomNom" id="prenomNom">
            </div>
            <div class="form-group col-6 lg">
                <label>Email</label>
                <input type="email" class="form-control" name="email"
                    id="email">
            </div>
</div>
<div class="row">
            <div class="form-group col-12 lg">
                <label>Message</label>
                <textarea class="form-control" name="message" id="message"
                    rows="4"></textarea>
            </div>
</div>
            <input type="submit" name="send" value="Submit" class="btn btn-primary btn-block">
        </form>
    </div>

• Le résultat du code ci-dessus est le formulaire ci-dessous que l’utilisateur final peut afficher:



• Veuillez noter que le bouton d’envoi inclut des fonctionnalités dans la section contrôleur. La fonction postContact est utilisée dans les contrôleurs pour ces vues associées. Il est montré ci-dessous:

public function postContact(Request $request) {
   return $request-> all();
}

• La sortie obtenue renverra JSON avec un jeton comme indiqué ci-dessous: