TL;DR: Halten Sie Ihre Web-App mit diesen 5 wichtigen Techniken sicher: Validieren und bereinigen Sie Eingaben, implementieren Sie eine Inhaltssicherheitsrichtlinie, verwenden Sie die Integrität von Subressourcen, folgen Sie der Sicherheit JavaScript-Praktiken und regelmäßige Sicherheitsüberprüfungen durchführen. Schützen Sie Web-Apps vor unbefugter JavaScript-Ausführung und schützen Sie Ihre Benutzer.
Anfang 2024 wurden bei einer Reihe von Cyberangriffen gespeicherte Cross-Site-Scripting (XSS)-Schwachstellen in beliebten WordPress-Plugins wie WP Statistics, WP Meta SEO und LiteSpeed Cache ausgenutzt. Diese Angriffe ermöglichten es Angreifern, bösartiges JavaScript einzuschleusen und so über 5 Millionen aktive Installationen zu gefährden.
Wie Sie sehen, stellen diese Angriffe heutzutage eine erhebliche Bedrohung für Webanwendungen dar. Sie können zu Datenlecks, Identitätsdiebstahl und letztendlich zum Vertrauensverlust der Kunden führen. Laut HackerOne Research machten XSS-Angriffe im Jahr 2020 23 % aller gemeldeten Sicherheitsbedrohungen aus und waren damit die häufigsten.
In diesem Artikel werden fünf Techniken zum Schutz Ihrer App vor unbefugten JavaScript-Ausführungen beschrieben.
Hier geht es in erster Linie um die Überprüfung, ob die Eingabe des Benutzers im erwarteten Format liegt. Beispielsweise sollten die Daten im E-Mail-Textfeld eine gültige E-Mail-Adresse sein und die Daten im Benutzernamen-Textfeld sollten der erwarteten Benutzernamenstruktur folgen.
Bereinigung bereinigt diese Eingabe, indem alle schädlichen Daten entfernt werden, die für Angriffe wie XSS und SQL-Injection verwendet werden könnten. Diese beiden sind wichtige Sicherheitsmaßnahmen für jede Web-App und dienen als erste Verteidigungslinie gegen schädliche Daten, die Benutzer möglicherweise eingeben.
Die clientseitige Formularvalidierung ist die erste Überprüfung des Datenvalidierungsprozesses. Man sollte sich jedoch niemals ausschließlich aus Sicherheitsgründen darauf verlassen, da JavaScript deaktiviert oder manipuliert werden kann, wodurch clientseitige Überprüfungen leicht umgangen werden können.
Siehe das folgende Codebeispiel für die grundlegende clientseitige Validierung mit HTML 5.
<form> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Submit"> </form>
Für einen umfassenderen Einblick in die clientseitige Formularvalidierung lesen Sie diesen ausführlichen Leitfaden.
Die serverseitige Validierung stellt sicher, dass alle Eingaben unabhängig vom clientseitigen Validierungsstatus validiert werden. Es erhöht die Sicherheit, indem sichergestellt wird, dass bösartige Daten niemals Ihre Kernanwendungslogik oder Datenbankvalidierung auf dem Server erreichen. Es ist auch weniger anfällig für Manipulationen.
Sehen Sie sich das folgende Codebeispiel einer grundlegenden serverseitigen Validierung mit Node.js mit Express an.
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');
});
Bereinigung stellt sicher, dass alle potenziell schädlichen Daten entfernt oder in ein sicheres Format umgewandelt werden. Das folgende Codebeispiel bereinigt Eingaben mithilfe der Validatorbibliothek in 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');
});
Dies ist eine starke Sicherheitslösung, um Web-Apps vor Bedrohungen wie XSS und Dateneinschleusung zu schützen. Durch die Implementierung von CSP wird sichergestellt, dass nur Skripte aus bestimmten, genehmigten Quellen auf Ihren Webseiten ausgeführt werden können. Dies verringert die Wahrscheinlichkeit der Ausführung von Schadcode erheblich.
Einfacher ausgedrückt: Stellen Sie sich CSP als einen Bouncer für Ihre Web-App vor. Es prüft, woher die Skripte stammen und lässt nur solche aus vertrauenswürdigen Quellen zu, sodass fehlerhafte Skripte ferngehalten werden.
Die Implementierung von CSP umfasst das Hinzufügen von CSP-Anweisungen zum HTTP-Antwortheader Ihres Webservers. CSP-Anweisungen sind Anweisungen, die dem Browser mitteilen, welche Quellen Inhalte auf einer Webseite laden und ausführen dürfen. Diese Anweisungen ermöglichen eine detaillierte Kontrolle über verschiedene Arten von Ressourcen.
Zu den wichtigsten Richtlinien gehören:
Sie können den CSP über Ihre Webserverkonfiguration zum HTTP-Antwortheader hinzufügen. Sehen Sie sich das folgende Codebeispiel zum Einrichten von CSP im Apache-Server an.
Header set Content-Security-Policy "default-src 'self'; img-src *"
Für Nginx können Sie CSP wie folgt konfigurieren.
add_header Content-Security-Policy "default-src 'self'; img-src *"
Wenn Sie nicht auf die Konfiguration des Webservers zugreifen können, können Sie den CSP mithilfe eines -Tags direkt in Ihre HTML-Datei einbinden. Dies ist jedoch nicht der empfohlene Weg.
<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.
Verwenden Sie Tools wie OWASP ZAP oder Burp Suite, um nach bekannten Schwachstellen zu suchen. Automatisierte Scans bieten eine schnelle Möglichkeit, häufige Sicherheitsprobleme zu erkennen.
Überprüfen Sie Ihre Codebasis regelmäßig manuell, um Probleme zu erkennen, die automatisierte Tools möglicherweise übersehen. Nutzen Sie hierfür besser erfahrene Entwickler und Sicherheitsexperten.
Stellen Sie Penetrationstester ein, um Angriffe auf Ihre App zu simulieren und Schwachstellen aufzudecken, die andere Methoden möglicherweise nicht erkennen.
Halten Sie Ihre Abhängigkeiten auf dem neuesten Stand, um bekannte Schwachstellen in Bibliotheken und Frameworks zu beheben. Verwenden Sie Paketmanager wie NPM oder pip, um Updates zu verwalten.
Schulen Sie Ihr Entwicklungsteam kontinuierlich zu den neuesten Sicherheitspraktiken und häufigen Schwachstellen. Dadurch wird sichergestellt, dass Ihr Team in der Lage ist, sicheren Code zu schreiben.
Vielen Dank für das Lesen dieses Artikels. Wir hoffen, dass diese 5 Techniken den Schutz Ihrer App gegen unbefugte JavaScript-Ausführungen verbessern. Durch die Implementierung dieser Strategien können Sie das Risiko von Angriffen verringern und Ihren Benutzern eine sicherere Web-App bieten. Denken Sie daran, dass proaktiver und wachsamer Umgang mit Ihren Sicherheitsmaßnahmen der Schlüssel zum Schutz Ihrer digitalen Vermögenswerte ist.
Die JavaScript-UI-Steuerelementbibliothek von Syncfusion ist die einzige Suite, die Sie jemals zum Erstellen einer App benötigen werden, da sie über 85 leistungsstarke, leichte, modulare und reaktionsfähige UI-Komponenten in einem einzigen Paket enthält.
Für bestehende Kunden ist die neueste Version von Essential Studio auf der Seite „Lizenzen und Downloads“ verfügbar. Wenn Sie kein Syncfusion-Kunde sind, können Sie jederzeit unsere kostenlose Testversion herunterladen, um alle unsere Steuerelemente anzuzeigen.
Sie können uns auch über unser Support-Forum, Support-Portal oder Feedback-Portal kontaktieren. Wir helfen Ihnen jederzeit gerne weiter!
Das obige ist der detaillierte Inhalt vonTop-Techniken zum Schutz von Web-Apps vor unbefugter JavaScript-Ausführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
