Réflexion et pratique de la séparation front-end et back-end basée sur NodeJS (4) Solutions aux problèmes de sécurité

Avant-propos

Dans le modèle de développement de séparation front-end et back-end, l'un des changements les plus évidents en termes de rôles et de fonctions de développement est le suivant : dans le passé, les étudiants front-end qui étaient uniquement responsables du développement dans l'environnement du navigateur étaient nécessaires pour vous immerger au niveau du serveur. Écrivez du code côté serveur. Une question fondamentale à laquelle nous sommes confrontés est de savoir comment assurer la sécurité du Web ?

Cet article, sous l'architecture du mode de séparation front-end et back-end, propose des solutions aux problèmes de sécurité rencontrés par le front-end dans le développement Web, ainsi que des contre-mesures et précautions.

Défense contre les attaques de cross-site scripting (XSS)

Problèmes et solutions

L'attaque par script intersite (XSS, Cross-site scripting) est la méthode la plus courante et la plus basique pour attaquer des sites Web. Un attaquant peut publier des données contenant du code offensant sur une page Web, et lorsqu'un spectateur voit la page Web, un script spécifique sera exécuté avec l'identité et les autorisations de l'utilisateur du spectateur. XSS peut facilement modifier les données utilisateur, voler des informations utilisateur et provoquer d'autres types d'attaques, telles que les attaques CSRF.

La méthode de base pour empêcher les attaques XSS consiste à garantir que toutes les données sorties vers une page HTML sont échappées en HTML (échappement HTML). Par exemple, le code de modèle suivant :

Copier le code Le code est le suivant :

$description dans ce code est une variable de modèle (la syntaxe des variables définies dans différents modèles est différente, voici juste une illustration), les données soumises par l'utilisateur, puis l'attaquant peut saisir un morceau de code contenant "JavaScript ", de sorte que le résultat de l'instruction de modèle ci-dessus devienne le résultat suivant :

Copier le code Le code est le suivant :

<br>
<script>alert('hello')'</script>

Le code ci-dessus, une fois rendu dans le navigateur, exécutera le code JavaScript et alertera bonjour à l'écran. Bien entendu, ce code est inoffensif, mais un attaquant peut créer un JavaScript pour modifier les informations de l'utilisateur ou voler les données des cookies.

La solution est très simple, qui consiste à échapper en HTML la valeur de $description. Le code de sortie échappé est le suivant

Copier le code Le code est le suivant :

<br>
<script>alert("bonjour!")</script>

Le code HTML échappé ci-dessus est inoffensif.

La solution de Midway

Échapper à toutes les données de sortie utilisateur dans la page

Il existe plusieurs situations et méthodes pour échapper aux données :

1. Utilisez le mécanisme fourni à l'intérieur du modèle pour vous échapper

Midway utilise KISSY xtemplate en interne comme langage de modèle.

Dans l'implémentation de xtemplate, deux crochets ({{val}}) sont utilisés pour analyser grammaticalement les données du modèle. Par défaut, les données sont échappées en HTML, afin que les développeurs puissent écrire des modèles comme celui-ci :

Copier le code Le code est le suivant :

Dans xtemplate, si vous ne souhaitez pas que les données de sortie soient échappées, vous devez utiliser trois crochets ({{{val}}}).

2. Appelez explicitement la fonction d'échappement dans Midway

Les développeurs peuvent appeler directement la méthode d'échappement HTML fournie par Midway dans le programme ou le modèle Node.js pour échapper explicitement les données, comme suit :

Méthode 1 : données d'échappement HTML dans le programme Node.js

Copier le code Le code est le suivant :

var Security= require('midway-security');

//données du serveur，par exemple {html:''，other:""}

data.html =Security.escapeHtml(data.html);

xtpl = xtpl.render(données);

Méthode 2 : HTML échappe les données HTML dans le modèle

Copier le code Le code est le suivant :

Remarque : utilisez Security.escapeHtml pour vous échapper uniquement lorsque les données ne sont pas échappées à l'intérieur du modèle. Sinon, deux échappements seront superposés à l'intérieur du modèle et dans le programme, entraînant une sortie inattendue.

Recommandation : si vous utilisez xtemplate, il est recommandé d'utiliser directement le {{}} intégré au modèle pour vous échapper ; si vous utilisez d'autres modèles, il est recommandé d'utiliser Security.escapeHtml pour vous échapper.

Filtrer le texte enrichi généré par les utilisateurs dans la page

Vous pensez peut-être : « En fait, je souhaite simplement générer du texte enrichi. Par exemple, certains forums et forums de discussion offrent aux utilisateurs des fonctions simples de taille de police, de couleur, d'arrière-plan et d'autres fonctions. Alors, comment dois-je gérer un texte aussi riche ? pour prévenir le XSS ? Quoi ? »

1. Utilisez la fonction richText fournie par Security in Midway

Midway fournit la méthode richText, spécialement utilisée pour filtrer le texte riche et prévenir les vulnérabilités telles que XSS, le phishing et le vol de cookies.

Il existe un forum de messages, le code du modèle peut être le suivant :

Copier le code Le code est le suivant :

{{{message}}}

Parce que le message est une donnée saisie par l'utilisateur et que le contenu du forum contient des informations en texte enrichi, donc ici dans xtemplate, trois accolades sont utilisées et l'échappement HTML n'est pas effectué par défaut, alors les données saisies par l'utilisateur le sont ; comme suit :

Copier le code Le code est le suivant :

http://eval.com/eval.js"> style="color:red;font-size:20px;position:fixed ;">Je laisse un message

Si les données de texte enrichi ci-dessus sont directement sorties sur la page, cela entraînera inévitablement l'injection du js du site eval.com dans la page actuelle, provoquant une attaque XSS. Afin d'éviter cette vulnérabilité, il suffit d'appeler la méthode Security.richText dans le modèle ou le programme pour traiter le texte enrichi saisi par l'utilisateur.

La méthode d'appel est similaire à escapeHtml, il existe deux manières comme suit

Méthode 1 : Appeler directement dans le programme Node.js

Copier le code Le code est le suivant :

message =Security.richText(message);

var html = xtpl.render(message)

Méthode 2 : Appeler

dans le modèle

Copier le code Le code est le suivant :

Sécurité.richText({{{message}}})

Après avoir appelé la méthode richText de Security, le résultat final est le suivant :

Copier le code Le code est le suivant :

Je laisse un message

On constate que tout d'abord : les balises de script qui peuvent provoquer des attaques XSS sont directement filtrées en même temps, l'attribut CSS position:fixed style dans la balise style est également filtré ; Enfin, produisez du texte riche HTML inoffensif

Découvrez d'autres voies possibles pour les attaques XSS

En plus des éventuelles attaques XSS dans les modèles de page, les applications Web peuvent être exposées à plusieurs autres risques.

1. Vulnérabilité de la page d'erreur

Si une page est introuvable, le système peut signaler une erreur 404 Not Found, par exemple : http://localhost/page/not/found

404 non trouvé
La page /page/not/found ne se ferme pas
Évidemment : un attaquant peut utiliser cette page pour construire une connexion comme celle-ci, http://localhost/

Derniers articles par auteur