J’ai la possibilité de m’exercer au dev HTML, CSS et PHP depuis quelques temps. Petit easter egg : sécuriser l’accès des pages pour les utilisateurs un peu trop fouineurs avec une page erreur 403 « Geek » … Gooooo 🙂

Gestes techniques

Commencons par préciser dans le <head> le link suivant :

<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/press-start-2p" type="text/css"/>

Ensuite, préparons le CSS (main.css) :

/* ERROR 403 PAGE */

.error{
font-family: "Press Start 2p";
display:flex;
flex-direction: column;
align-items: center;
margin: 50px;
border: solid 15px red;
border-radius: 20px;
box-shadow: 10px 10px 30px;
}
.head{
margin: 50px;
font-size: 50px;
font-weight: bold;
color: red;

}

.mens{
margin: 20px 50px 50px 50px;
font-size: 40px;
font-weight: bold;
}

.desc{
margin: 20px 50px 50px 50px;
font-size: 20px;
}

/******************/

 

Nous allons créer une page HTML.Twig nommé « error403.html.twig » avec le code suivant :

<div class="error">
<div class="head">ERREUR 403</div>
<div class="mens">L'acc&egraves est interdit <i class="fas fa-smile-wink"></i></div>
<div class="desc"></div>
</div>

Nous finirons par inclure dans cette page HTML – dans une page « cible »

{% if is_granted(['ROLE_XXX', 'ROLE_YYY', 'ROLE_ZZZ']) %}
...
<!-- Contenu -->
...
{% endif %}

<!-- ERREUR 403 - ACCES REFUSE -->
{% include 'error403.html.twig' %}

J’ai conscience que la sécurisation ne devrait pas se faire dans la vue …. affaire à suivre !

Résultat

⚠ Si vous travaillez avec deux environnements – dev et prod – n’oubliez pas de faire les commandes suivantes pour appliquer en prod :

cd /var/www/MonRepertoireProjet
php bin/console cache:clear --env=prod --no-debug

 

Un petit souvenir de la Sega Mega Drive 😛

Stay Connected ! 🙂

Catégories : Dev

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *