Zeichenfolge in JavaScript bereinigen

1. Verwenden Sie die sanitize()-Methode, um Strings in JavaScript zu bereinigen
2. Verwenden Sie die sanitize()-Methode von DomPurify, um Strings in JavaScript zu bereinigen

In diesem Artikel wird die Desinfektion im Detail besprochen. Pakete, die zum Bereinigen von Daten in HTML oder zum Verhindern von XSS-Angriffen verwendet werden, werden ebenfalls ausführlich erläutert.

Verwenden Sie die sanitize()-Methode, um Strings in JavaScript zu bereinigen

Webanwendungen erfordern häufig HTML-Eingaben. Es ist jedoch schwierig, sie sicher auf einer Webseite darzustellen, da sie Cross-Site-Scripting-Angriffen (XSS) ausgesetzt sind.

Die sanitize()-Methode der Sanitizer-Schnittstelle bereinigt einen Baum von DOM-Knoten und entfernt unerwünschte Elemente oder Attribute. Es sollte verwendet werden, wenn die Daten bereits als DOM-Knoten verfügbar sind, z. B. beim Bereinigen einer Document-Instanz in einem Frame.

Die Standardkonfiguration sanitizer() entfernt automatisch XSS-relevante Eingaben, darunter Skript-Tags, benutzerdefinierte Elemente und Kommentare. Diese Konfiguration kann mit den Konstruktoroptionen sanitizer() angepasst werden.

Syntax:

sanitize(input)

Parameter:

• input: Es kann ein DocumentFragment oder ein Document sein, das bereinigt werden soll.

Rückgabewert:

• Der Rückgabewert ist ein bereinigtes DocumentFragment.

Wir werden nun Daten aus einem iframe mit der ID username bereinigen.

Beispiel:

const sanitizer = new Sanitizer();  // Default sanitizer;

// Get the frame and its Document object
const frame_element = document.getElementById('username')
const unsanitized_frame_tree = frame_element.contentWindow.document;

// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);

Verwenden Sie die sanitize()-Methode von DomPurify, um Strings in JavaScript zu bereinigen

DOMPurify ist ein XSS-Reinigungsprogramm nur für DOM für HTML, MathML und SVG, das superschnell und übertolerant ist. Es ist auch mühelos zu bedienen und loszulegen.

DOMPurify ist in JavaScript aufgebaut und mit allen modernen Browsern kompatibel (Safari (10+), Opera (15+), Internet Explorer (10+), Edge, Firefox, Chrome usw., die Blink oder WebKit verwenden). Es wird nicht von MSIE6 oder anderen älteren Browsern beeinflusst und verwendet entweder einen Fallback oder tut überhaupt nichts.

Automatisierte Tests decken jetzt 19 verschiedene Browser ab, weitere werden folgen. Darüber hinaus werden auch Node.js v14.15.1, v15.4.0, v16.13.0, v17.0.0 und ältere Versionen abgedeckt, wenn DOMPurify auf JSDOM ausgeführt wird.

Sicherheitsexperten haben DOMPurify mit umfassender Erfahrung in Online-Angriffen und XSS entwickelt.

Was DOMpurify tut

DOMPurify bereinigt HTML und schützt vor XSS-Angriffen. Sie können DOMPurify einen String zuführen, der schmutziges HTML enthält, und es wird einen String zurückgeben, der sauberes HTML enthält (sofern nicht anders festgelegt).

DOMpurify entfernt alles, was schädliches HTML enthält. Es geht auch relativ schnell.

Es nimmt die Technologie des Browsers und wandelt sie in einen XSS-Filter um, sodass DOMPurify schneller ist, wenn Ihr Browser schneller ist. Fügen Sie einfach DOMPurify in Ihre Website ein, um es zu verwenden.

Verwenden Sie die nicht minimierte Entwicklungsversion

<script type="text/javascript" src="src/pure.js"></script>

Verwenden Sie die minimierte und getestete Produktionsversion

<script type="text/javascript" src="dist/pure.min.js"></script>

Anschließend können Sie Strings bereinigen, indem Sie den folgenden Code ausführen:

let clean = DOMPurify.sanitize(dirty);

Das generierte HTML kann mit innerHTML in ein DOM-Element oder mit document.write(). direkt in das DOM geschrieben werden. Das liegt ganz bei Ihnen.

Es ist erwähnenswert, dass es standardmäßig HTML, SVG und MathML zulässt. Wenn Sie nur HTML benötigen, was ein häufiger Anwendungsfall ist, können Sie es auch einfach aufstellen:

let clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {html: true}});

Bitte beachten Sie, dass die Bereinigungsvorteile verloren gehen können, wenn Sie HTML zuerst bereinigen und dann bearbeiten. Wenn Sie das bereinigte Markup nach der Bereinigung an eine andere Bibliothek senden, stellen Sie sicher, dass die Bibliothek den HTML-Code nicht selbst stört.

Nachdem Sie Ihr Markup bereinigt haben, können Sie in der Eigenschaft DOMPurify.removed nachsehen, welche Elemente und Attribute gelöscht wurden.

Sie können dieses Skript asynchron laden, wenn Sie einen AMD-Modullader wie Require.js verwenden:

import DOMPurify from 'dompurify';

var clean = DOMPurify.sanitize(dirty);

DOMPurify kann sowohl serverseitig mit Node.js als auch clientseitig mit Browserify oder gleichwertigen Übersetzern verwendet werden. Node.js 4.x oder höher ist erforderlich.

DOMPurify soll jede als aktiv markierte Version unterstützen. Gleichzeitig wird die Unterstützung für alle als Wartung markierten Versionen eingestellt.

DOMpurify wird möglicherweise nicht sofort mit allen gewarteten Versionen brechen, aber es hört auf, Tests mit bestimmten früheren Versionen durchzuführen.

npm install dompurify

Für JSDOM v10 oder neuer:

const createDOMPurify = require('dompurify');
const {JSDOM} = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

Für JSDOM-Versionen älter als v10:

const createDOMPurify = require('dompurify');
const jsdom = require('jsdom').jsdom;

const window = jsdom('').defaultView;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

Was wird von DOMpurify unterstützt

DOMpurify unterstützt standardmäßig benutzerdefinierte CSS- und HTML-Datenattribute. Es unterstützt zusätzlich das Shadow-DOM und bereinigt DOM-Vorlagen rekursiv.

Es bereinigt auch HTML für die Verwendung mit den JQuery-APIs $() und elm.html(), ohne Probleme zu verursachen.