SVG in WordPress laden

Für den Einsatz von SVG in WordPress muss der Media Upload überredet werden, SVG als zulässigen Mime-Type anzuerkennen. Inzwischen gibt es Plugins, die Sicherheit vor Cross Scripting-Einschlüssen bieten.

In Drupal 8 reicht das IMCE-Modul, um SVG in Seiten und Beiträge zu laden, und zwar allem Anschein nach ebenfalls bereinigt.

Ohne weitere Maßnahmen endet der Upload einer SVG-Datei in WordPress schon vor dem Hochladen – SVG-Dateien sind ausgegraut. Ältere Versionen haben es noch versucht, aber dann mit einer Fehlermeldung reagiert:

Fehler grafik.svg Tut mir leid, aber aus Sicherheitsgründen ist dieser Dateityp nicht erlaubt.

Theoretisch würde ein Eintrag in der Datei wp-config.php schlichtweg den Upload für alle Arten von Dateien freischalten

('ALLOW_UNFILTERED_UPLOADS', true);

Das würde ich nicht einmal einsetzen, wenn ich der einzige Autor und Administrator wäre.

Die verborgenen Sicherheitslücken von SVG

Was ist denn so gefährlich an SVG, dass die Content Management Systeme allesamt und auch Facebook, Pinterest und Twitter SVG nicht zulassen?

SVG ist eine XML-Datei und kann Javascript enthalten.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
height="120" width="280" viewBox="0 0 280 120">
<rect height="120" width="280" fill="#ff2a2a"/>
<script type="text/javascript">
<![CDATA[
   alert("Wer hat mich gerufen?");
]]>
</script>
</svg>

Das funktioniert nicht mehr in allen Browsern. Safari und Firefox, IE und Microsoft Edge werden das Script nicht ausführen, aber Chrome führt immer noch Javascript in externen SVG-Dateien aus.

Wer einen Blog mit mehreren Autoren führt, spart die ebenso wohlbekannte wie einfache Änderung in der functions.php des WordPress-Themes besser aus:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Anstelle des Eingriffs in die functions.php des Themes ist ein Plugin mit Sicherheitsvorsorge in WordPress die bessere Wahl.

SVG Hygiene und Reinigung

svg-sanitizer borgt bei DOMPurify und gibt entweder ein hygienisch reines SVG zurück oder false, wenn der XML-Parser nicht durchläuft. Die Ursache für Parser-Fehler liegt meist an schlecht formatierten SVG-Dateien.

Für WordPress gibt es svg-sanitizer als Plugin. Das Plugin schaltet auch gleich die Sichtbarkeit der SVG-Grafiken in der Mediathek ein. Die WP SVG PRO-Fassung kann das SVG gleich auch noch optimieren, bringt die Option, das SVG inline einzusetzen und Zugriffsrechte auf den SVG-Upload auf ausgewählte Autoren beschränken.

SVG in WordPress-Core?

Gerade in Hinsicht darauf, dass Autoren in Mehrbenutzersystemen nicht immer wählerisch bei ihren Bildquellen sind, ist ein sicherer Upload für SVG-Grafik in WordPress ein Muss. Um so weniger kann ich verstehen, warum sich die WordPress-Entwickler gegen die SVG-Integration im Core wehren, wenn es so einfach ist, den Gefahren und Nebenwirkungen von SVG-Grafiken entgegenzutreten.

DropBox gehört zu den wenigen Anwendungen, für die SVG bereits zur Normalität gehört. Und so wie es scheint, reinigt und neutralisiert Dropbox SVG-Dateien, denn bei der SVG-mit-Javascript-Datei zuckt Chrome nicht und zeigt keine Reaktion auf das Script.

SVG in Drupal 8

In Drupal 8 lässt das Feld für ein Bild SVG nicht als Bildtyp zu – selbst wenn SVG als zugelassene Dateiendung eingetragen wird. Auch hier werden die Sicherheitsbedenken in den Vordergrund gesetzt.

/**
 * Implements theme_preprocess_field().
 */
function your_theme_name_preprocess_field(&$vars, $hook) {
  if ($vars['field_name'] == 'field_your_field_name') {
    $img_path = $vars['items']['0']['content']['#file']->url();
    $alt_text = '';
    $alt_text = $vars['items']['0']['content']['#description'];
    $vars['img_path'] = $img_path;
    $vars['alt_text'] = $alt_text;
  }
}

und für das Template des Felds field–field-your-field-name.html.twig:

<img src="{{ img_path }}" alt="{{ alt_text }}" />

SVG Images in Drupal 8

Ohne eine Bereinigung der SVG-Datei bleiben die Sicherheitsbedenken allerdings auf der Strecke.

IMCE Image Bridge und SVG

Das Modul für die einfache Bildverwaltung, IMCE, hingegen setzt * als zugelassene Dateitypen. Allerdings kommt IMCE schon von Haus aus mit der Option auf reduzierte Berechtigungen für unterschiedliche Benutzerrollen.

CKEditor, der Standard-Editor in Drupal zeigt die Bilder allerdings nicht an, wenn die SVG-Datei keine absoluten Werte für Breite und Höhe setzt.

Also in den Quelltext und Breite und Höhe für das img-Tag per Hand eintragen:

<img alt="Wellenlängen Dichromate" 
  data-entity-type="" data-entity-uuid="" 
  height="100%" src="…dichromaten.svg" width="100%" />

Allem Anschein nach findet im IMCE bereits ein Sanitize, eine Bereinigung, statt, denn hier zeigt auch Chrome keinerlei Reaktion auf das Javascript in der SVG-Datei.

SVG Akzeptanz

Google akzeptiert SVG-Dateien als Bild und reiht sie in die Bildersuche. Neben Dropbox, die ebenfalls einen SVG-Upload und die Anzeige von SVG möglich gemacht haben, übernimmt jetzt auch Pinterest SVG: So langsam öffnen sich die Türen.