Top-Techniken zum Schutz von Web-Apps vor unbefugter JavaScript-Ausführung

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.

1. Eingabevalidierung und -bereinigung

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.

So implementieren Sie die Eingabevalidierung und -bereinigung

A. Clientseitige Formularvalidierung

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.

B. Serverseitige Validierung

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');
});

C. Desinfektion

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');
});

2. Inhaltssicherheitsrichtlinie (CSP)

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.

So implementieren Sie CSP

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:

• default-src: Legt eine Standardrichtlinie für alle Inhaltstypen fest.
• script-src: Gibt zulässige Quellen für JavaScript an.
• style-src: Gibt zulässige Quellen für Stylesheets an.
• img-src: Gibt zulässige Quellen für Bilder an.
• object-src: Gibt zulässige Quellen für Plugins an.

So fügen Sie CSP zum HTTP-Antwortheader hinzu

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 *"

So fügen Sie Ihren CSP über Meta-Tags hinzu

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>

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.

So führen Sie regelmäßige Sicherheitsüberprüfungen durch

Automatisierte Sicherheitsüberprüfung

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.

Manuelle Codeüberprüfungen

Ü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.

Penetrationstests

Stellen Sie Penetrationstester ein, um Angriffe auf Ihre App zu simulieren und Schwachstellen aufzudecken, die andere Methoden möglicherweise nicht erkennen.

Abhängigkeiten aktualisieren

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.

Sicherheitsschulung

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.

Abschließende Gedanken

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!

Verwandte Blogs

• Einfaches Rendern flacher JSON-Daten im JavaScript-Dateimanager
• JavaScript-Steuerelemente mühelos mit DataManager synchronisieren
• Produktivität optimieren: Salesforce mit JavaScript Scheduler integrieren
• Erweitern Sie Ihre Dateneinblicke: Integrieren Sie ein JavaScript-Gantt-Diagramm in Power BI

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!