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.
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.
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é.
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');
});
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');
});
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.
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 :
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 *"
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>
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.
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:
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.
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">
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.
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:
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();
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);
}
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:
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>
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.
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.
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.
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.
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.
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é.
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 !
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!
Comment mettre à niveau Douyin
Explication détaillée de la commande Linux dd
Comment résoudre le problème que localhost ne peut pas être ouvert
Que dois-je faire si eDonkey Search ne parvient pas à se connecter au serveur ?
Utilisation de la classe Snoopy en php
Méthodes courantes de détection des vulnérabilités des sites Web
La différence entre git et svn
Tutoriel sur l'achat et la vente de Bitcoin sur Huobi.com
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
