Sicherer Umgang mit SVG-Dateien

Beitrag vom Februar 2025 aus dem Bereich Security von Arthur Weder

Als Website-Betreiber oder Entwickler trägst du die Verantwortung, deine Nutzer und deine Anwendung vor potenziellen Sicherheitsrisiken zu schützen. SVG-Dateien sind ein weit verbreitetes Format für Vektorgrafiken und bieten viele Vorteile, wie Skalierbarkeit und Unterstützung für Interaktivität. Gleichzeitig bergen sie jedoch Gefahren, insbesondere durch Cross-Site-Scripting (XSS). Dies passiert, wenn Angreifer bösartige Skripte in SVG-Dateien einfügen, die dann auf deiner Website ausgeführt werden.

Hier sind die wichtigsten Maßnahmen aus der Sicht eines Website-Betreibers oder Programmierers, um SVG sicher in einer Webanwendung zu verwenden:

1. Vermeide Inline-JavaScript in SVG-Dateien

SVGs erlauben das Einfügen von JavaScript innerhalb der Datei, z. B. über <script>-Tags oder Event-Handler wie onload. Dies kann von Angreifern ausgenutzt werden, um schädlichen Code auszuführen.
Was du tun kannst:

• Keine Inline-Skripte: Vermeide SVGs mit eingebettetem JavaScript.
• Nutze externe JavaScript-Dateien für Interaktivität und Animationen, anstatt den Code direkt in das SVG zu schreiben.

Beispiel für unsicheren Code:

<svg>
  <circle cx="50" cy="50" r="40" onload="alert('XSS!')" />
</svg>

Lösung: Entferne alle Skripte oder eventbasierte Attribute aus SVG-Dateien.

2. SVG als img-Tag einbinden

<img src="example.svg" alt="Grafik">

Das <img>-Tag isoliert die SVG-Datei vom DOM der Webseite. Eingebettete Skripte oder Event-Handler können in diesem Fall nicht ausgeführt werden.
Diese Methode eignet sich besonders für statische SVG-Grafiken, bei denen keine Interaktivität benötigt wird.

3. Content Security Policy (CSP) einrichten

Eine Content Security Policy (CSP) schützt deine Website, indem sie kontrolliert, welche Skripte ausgeführt werden dürfen. Damit kannst du verhindern, dass bösartiges JavaScript aus SVG-Dateien ausgeführt wird.

Empfohlene CSP:

Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';

script-src 'self';: Erlaubt nur Skripte von der eigenen Domain.
object-src 'none';: Verhindert das Einbinden von Objekten wie Flash oder gefährlichen Ressourcen.

Wenn du SVG-Dateien als <svg>-Element einbindest, blockiert diese CSP jegliches Inline-JavaScript.

4. Setze den Header X-Content-Type-Options: nosniff

Dieser HTTP-Header verhindert, dass Browser versuchen, den MIME-Typ von Dateien zu "erraten". Ohne den Header könnte eine SVG-Datei mit schädlichem Code als HTML oder JavaScript interpretiert werden.

So richtest du den Header ein:

In NGINX - site.conf:

add_header X-Content-Type-Options "nosniff";

In Apache - .htaccess:

Header set X-Content-Type-Options "nosniff"

In IIS 7 - web.config:

<configuration>
   <system.webServer>
      <httpProtocol>
         <customHeaders>
            <add name="X-Content-Type-Options" value="nosniff" />
         </customHeaders>
      </httpProtocol>
   </system.webServer>
</configuration>

In PHP:

header('X-Content-Type-Options', 'nosniff');

In Python:

res.setHeader('X-Content-Type-Options', 'nosniff');

In Node.js (Express):

app.use((req, res, next) => {
  res.setHeader('X-Content-Type-Options', 'nosniff');
  next();
});

Dieser Header garantiert, dass SVG-Dateien nur als image/svg+xml behandelt werden.

5. SVG-Dateien bereinigen (Sanitizing)

Wenn deine Anwendung SVG-Dateien akzeptiert (z. B. durch Nutzer-Uploads), besteht ein hohes Risiko, dass ein Angreifer bösartigen Code einschleust. Daher ist es essenziell, die Dateien zu bereinigen.

Tools für das Sanitizing:

• SVG Sanitize: Entfernt potenziell gefährlichen Code serverseitig mit PHP.
• DOMPurify: Entfernt potenziell gefährlichen Code clientseitig. mit Javascript
• SVGO: Optimiert SVGs und entfernt unnötigen Code mit Node

Beispiel mit SVG Sanitize (Serverseitig):

use enshrined\svgSanitize\Sanitizer;
$sanitizer = new Sanitizer();
$dirtySVG = file_get_contents('file.svg');
$cleanSVG = $sanitizer->sanitize($dirtySVG);

Beispiel mit DOMPurify (Clientseitig):

import DOMPurify from 'dompurify';
const unsicheresSvg = `<svg><circle cx="50" cy="50" r="40" onload="alert('XSS!')"/></svg>`;
const sicheresSvg = DOMPurify.sanitize(unsicheresSvg);
document.getElementById('svgContainer').innerHTML = sicheresSvg;

Beispiel mit SVGO (Serverseitig):

const SVGO = require('svgo');
const svgo = new SVGO();
svgo.optimize('file.svg').then(result => {
  console.log(result.data); // Optimierte und sichere SVG-Datei
});

6. Verwende nur vertrauenswürdige Quellen

SVG-Dateien sollten nur aus sicheren und vertrauenswürdigen Quellen stammen. Falls deine Website SVG-Uploads von Nutzern erlaubt:

• Überprüfe die Dateien serverseitig.
• Entferne jeglichen potenziell gefährlichen Code.
• Verarbeite die Dateien mit einem Sanitizing-Tool, bevor sie gespeichert oder angezeigt werden.

Zusammenfassung der Schutzmaßnahmen

Als Website-Betreiber oder Entwickler kannst du SVG-Dateien sicher einbinden, indem du folgende Best Practices einhältst:

• Kein Inline-JavaScript verwenden:
• Entferne eventbasierten oder eingebetteten Code.
• SVGs als <img> laden: Isoliere SVGs vom DOM, um Skriptausführung zu verhindern.
• Content Security Policy (CSP): Blockiere Inline-Skripte und kontrolliere die Herkunft externer Skripte.
• Header X-Content-Type-Options: nosniff: Verhindere die Interpretation von SVG-Dateien als HTML oder JavaScript.
• Sanitizing: Bereinige hochgeladene SVG-Dateien mit Tools wie DOMPurify oder SVGO.
• Quellen überprüfen: Lade SVG-Dateien nur von vertrauenswürdigen Quellen.

Durch die Kombination dieser Maßnahmen kannst du SVGs sicher verwenden und deine Website vor XSS-Angriffen schützen. Sicherheit sollte immer oberste Priorität haben, besonders bei Dateien, die von Nutzern bereitgestellt werden oder potenziell dynamische Inhalte enthalten.