Principales techniques pour protéger les applications Web contre l'exécution de JavaScript non autorisée

TL;DR : Protégez votre application Web avec ces 5 techniques essentielles : validez et désinfectez les entrées, mettez en œuvre une politique de sécurité du contenu, utilisez l'intégrité des sous-ressources, suivez la sécurité Pratiques JavaScript et effectuer des audits de sécurité réguliers. Protégez les applications Web contre l'exécution de JavaScript non autorisée et protégez vos utilisateurs.

Début 2024, une série de cyberattaques ont exploité les vulnérabilités XSS (cross-site scripting) stockées dans des plugins WordPress populaires tels que WP Statistics, WP Meta SEO et LiteSpeed ​​Cache. Ces attaques ont permis aux attaquants d'injecter du JavaScript malveillant, compromettant plus de 5 millions d'installations actives.

Comme vous pouvez le constater, ces attaques constituent aujourd’hui une menace considérable pour les applications Web. Elles peuvent entraîner des fuites de données, des usurpations d’identité et, à terme, une perte de confiance des clients. Selon HackerOne Research, les attaques XSS représentaient 23 % de toutes les menaces de sécurité signalées en 2020, ce qui en fait les plus fréquentes.

Cet article décrit cinq techniques permettant de protéger votre application contre les exécutions JavaScript non autorisées.

1. Validation et désinfection des entrées

Cela implique principalement de vérifier si la saisie de l’utilisateur est dans le format attendu. Par exemple, les données dans le champ de texte de l'e-mail doivent être une adresse e-mail valide et les données dans le champ de texte du nom d'utilisateur doivent suivre la structure de nom d'utilisateur attendue.

La désinfection nettoie cette entrée en supprimant toutes les données malveillantes qui pourraient être utilisées dans des attaques telles que l'injection XSS et SQL. Ces deux mesures de sécurité sont essentielles pour toute application Web et constituent la première ligne de défense contre les données malveillantes que les utilisateurs pourraient saisir.

Comment mettre en œuvre la validation et la désinfection des entrées

un. Validation du formulaire côté client

La validation du formulaire côté client est la vérification initiale du processus de validation des données. Cependant, cela ne doit jamais être utilisé uniquement à des fins de sécurité, car JavaScript peut être désactivé ou manipulé, contournant ainsi facilement les vérifications côté client.

Reportez-vous à l'exemple de code suivant de validation de base côté client à l'aide de HTML 5.

<form>
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" required>
 <input type="submit" value="Submit">
</form>

Pour un aperçu plus complet de la validation des formulaires côté client, explorez ce guide détaillé.

b. Validation côté serveur

La validation côté serveur garantit que toutes les entrées sont validées, quel que soit le statut de validation côté client. Il augmente la sécurité en garantissant que les données malveillantes n'atteignent jamais la logique principale de votre application ou la validation de la base de données sur le serveur. Il est également moins vulnérable à la falsification.

Reportez-vous à l'exemple de code suivant de validation de base côté serveur à l'aide de Node.js avec Express.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
    const email = req.body.email;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        return res.status(400).send('Invalid email format.');
    }
    // Process the valid email.
    res.send('Email is valid!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

c. Désinfection

La désinfection garantit que toutes les données potentiellement dangereuses sont supprimées ou modifiées dans un format sûr. L'exemple de code suivant nettoie les entrées à l'aide de la bibliothèque de validation dans Node.js.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const validator = require('validator');

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
    let email = req.body.email;
    if (!validator.isEmail(email)) {
        return res.status(400).send('Invalid email format.');
    }
    email = validator.normalizeEmail(email);
    // Process the sanitized email
    res.send('Email is valid and sanitized!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2. Politique de sécurité du contenu (CSP)

Il s'agit d'une solution de sécurité solide pour protéger les applications Web contre les menaces telles que XSS et l'injection de données. La mise en œuvre de CSP garantit que seuls les scripts provenant de sources spécifiques et approuvées peuvent s'exécuter sur vos pages Web. Cela réduit considérablement les risques d'exécution de code malveillant.

En termes plus simples, considérez CSP comme un videur pour votre application Web. Il vérifie d'où proviennent les scripts et n'autorise que ceux provenant de sources fiables, gardant les mauvais scripts à l'écart.

Comment mettre en œuvre le CSP

La mise en œuvre de CSP implique l’ajout de directives CSP à l’en-tête de réponse HTTP de votre serveur Web. Les directives CSP sont des instructions qui indiquent au navigateur quelles sources sont autorisées à charger et exécuter du contenu sur une page Web. Ces directives fournissent un contrôle granulaire sur différents types de ressources.

Les directives clés incluent :

• default-src : Définit une politique par défaut pour tous les types de contenu.
• script-src : Spécifie les sources autorisées pour JavaScript.
• style-src : Spécifie les sources autorisées pour les feuilles de style.
• img-src : Spécifie les sources autorisées pour les images.
• object-src : Spécifie les sources autorisées pour les plugins.

Comment ajouter CSP à l'en-tête de réponse HTTP

Vous pouvez ajouter le CSP à l'en-tête de réponse HTTP via la configuration de votre serveur Web. Reportez-vous à l'exemple de code suivant pour configurer CSP sur le serveur Apache.

Header set Content-Security-Policy "default-src 'self'; img-src *"

Pour Nginx, vous pouvez configurer CSP comme suit.

add_header Content-Security-Policy "default-src 'self'; img-src *"

Comment ajouter votre CSP via des balises méta

Si vous ne pouvez pas accéder à la configuration du serveur web, vous pouvez inclure le CSP directement dans votre fichier HTML à l'aide d'une balise . Mais ce n'est pas la méthode recommandée.

<head>
 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *"">
</head>

3. Sub-resource integrity (SRI)

This security feature helps browsers check if the resources obtained from a third party (for instance, a CDN) have been modified. It allows you to provide a cryptographic hash for these resources.

When the browser gets the resource, it compares its hash to the given hash. If the hash does not match, the resources will not be loaded, thereby protecting your app from malicious modifications.

How to implement SRI

Implementing SRI involves adding a cryptographic hash to the integrity attribute of your or tags. Here’s a step-by-step guide to setting up SRI:

Step 1: Generating the hash

You must generate a hash for the resource you want to include in your webpage. This can be done using a tool or online service like the Subresource Integrity Generator tool.

Step 2: Adding the hash to your resource

Once you have the hash, add it to the integrity attribute of the or < link> tag.

Refer to the following code example.

<script src="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous"></script>

In this example, the integrity attribute contains the hash, and the crossorigin=”anonymous” attribute ensures the resource is fetched with CORS (cross-origin resource sharing).

You can use SRI for stylesheets, as well.

<link rel="stylesheet" href="https://example.com/styles.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous">

4. Secure JavaScript coding practices

Secure JavaScript coding practices are crucial for developing web apps robust against various attacks, XSS, and other malicious exploits. By following these best practices, developers can ensure their code is secure, maintainable, and less vulnerable to unauthorized execution.

Avoid using eval()

The eval() function is a significant security risk, as it executes a string of code, potentially allowing attackers to inject malicious scripts. Always avoid using eval() and similar functions like setTimeout(string) and setInterval(string).

Why these functions are dangerous:

• Arbitrary code execution: These functions can execute any code passed to them as a string. If an attacker successfully inserts a malicious string, it will operate in the same way as the remaining code of your script.
• Difficulty in code analysis: Using these functions makes it harder to analyze the code for security vulnerabilities. Static analysis tools cannot examine the strings that are passed through such functions.
• Dynamic code injection: Attackers can use these functions to inject and execute code dynamically that was not originally part of the app, bypassing traditional security measures.

Use strict mode

Enabling strict mode in JavaScript helps catch common coding mistakes and unsafe actions, such as assigning values to undeclared variables. This improves the security and stability of your code. To enable strict mode, add “use strict”; at the beginning of a script or a function.

"use strict";

function safeFunction() {
    // Code in strict mode.
    let secureVariable = "Secure";
    console.log(secureVariable);
}

safeFunction();

Advantages and implications of enabling strict mode:

• In strict mode, this is undefined in functions that are not called methods.
• Strict mode will throw an error if a function has duplicate parameter names or an object literal has duplicate property names.
• A with statement is not allowed in the strict mode because it makes code difficult to predict and optimize.

Refer to the following code example.

"use strict";

// Eliminates this coercion.
function showThis() {
    console.log(this); // In non-strict mode, this would be the global object; in strict mode, it's undefined.
}
showThis();

// Disallows duplicate property names or parameter values.
// This will throw an error in strict mode.
const obj = {
    prop: 1,
    prop: 2
};

// Prevents the use of with statement.
// This will throw an error in strict mode.
with (Math) {
    let x = cos(3.14);
}

Avoid inline JavaScript

Inline JavaScript can be significantly vulnerable to XSS attacks because it allows attackers to inject malicious scripts directly into your HTML. Instead, use external scripts to ensure all JavaScript is properly vetted and sanitized.

Avoid inline JavaScript because of:

• Ease of injection: Inline JavaScript is more susceptible to injection attacks because it is part of the HTML content.
• CSP compliance: Content security policies (CSP) can be more effectively enforced when JavaScript is kept in external files. Inline scripts often require the use of the unsafe-inline directive, which weakens CSP’s effectiveness.
• Maintainability: Keeping JavaScript in separate files makes the codebase easier to manage and maintain.

Refer to the following code example.

<!-- Insecure Inline JavaScript -->
<!-- <button onclick="alert('Clicked!')">Click Me</button> -->

<!-- Secure External JavaScript -->
<button id="secureButton">Click Me</button>
<script>
    document.getElementById('secureButton').addEventListener('click', function() {
        alert('Clicked!');
    });
</script>

5. Regular Security Audits and Updates

Regular audits are essential for maintaining the integrity and security of web apps. By continuously assessing your app’s security, you can identify and fix vulnerabilities that could be exploited to execute unauthorized JavaScript or other malicious actions.

Comment mener des audits de sécurité réguliers

Analyse de sécurité automatisée

Utilisez des outils comme OWASP ZAP ou Burp Suite pour rechercher les vulnérabilités connues. Les analyses automatisées offrent un moyen rapide d'identifier les problèmes de sécurité courants.

Révisions manuelles du code

Examinez régulièrement votre base de code manuellement pour détecter les problèmes que les outils automatisés pourraient manquer. Il est préférable de faire appel à des développeurs expérimentés et à des experts en sécurité pour cela.

Tests d'intrusion

Engagez des testeurs d'intrusion pour simuler des attaques sur votre application et découvrir des vulnérabilités que d'autres méthodes pourraient ne pas détecter.

Mettre à jour les dépendances

Gardez vos dépendances à jour pour corriger les vulnérabilités connues dans les bibliothèques et les frameworks. Utilisez des gestionnaires de packages comme NPM ou pip pour gérer les mises à jour.

Formation en sécurité

Formez continuellement votre équipe de développement sur les dernières pratiques de sécurité et les vulnérabilités courantes. Cela garantira que votre équipe est équipée pour écrire du code sécurisé.

Réflexions finales

Merci d'avoir lu cet article. Nous espérons que ces 5 techniques amélioreront les défenses de votre application contre les exécutions JavaScript non autorisées. En mettant en œuvre ces stratégies, vous pouvez réduire le risque d'attaques et garantir une application Web plus sûre et plus sécurisée pour vos utilisateurs. N'oubliez pas que rester proactif et vigilant dans vos mesures de sécurité est essentiel pour protéger vos actifs numériques.

La bibliothèque de contrôles d'interface utilisateur JavaScript Syncfusion est la seule suite dont vous aurez besoin pour créer une application, car elle contient plus de 85 composants d'interface utilisateur hautes performances, légers, modulaires et réactifs dans un seul package.

Pour les clients actuels, la dernière version d'Essential Studio est disponible sur la page Licence et téléchargements. Si vous n'êtes pas client Syncfusion, vous pouvez toujours télécharger notre évaluation gratuite pour voir tous nos contrôles.

Vous pouvez également nous contacter via notre forum d'assistance, notre portail d'assistance ou notre portail de commentaires. Nous sommes toujours heureux de vous aider !

Blogs connexes

• Rendu facilement des données JSON plates dans le gestionnaire de fichiers JavaScript
• Synchronisez sans effort les contrôles JavaScript à l'aide de DataManager
• Optimiser la productivité : intégrer Salesforce avec JavaScript Scheduler
• Optimisez vos informations sur les données : intégration du diagramme de Gantt JavaScript dans Power BI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!