SVG in WordPress / Drupal laden

SVG in Wordpress / Drupal

Für das Hochladen 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.

18-12-15 SITEMAP

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.

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

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.

<script xmlns="http://www.w3.org/2000/svg">
 <![CDATA[
 const elements = document.querySelectorAll("circle");
 … 
 ]]>
 </script>
 </svg>

SVG mit Javascript in einem img-Tag geladen.

Hexenkessel: CSS organisieren, CSS Reset

SVG inline mit Javascript

Doch Scripte funktionieren nicht mehr in allen Browsern. Die modernen Browser führen schon seit geraumer Zeit Scripte in externen SVG-Dateien nicht mehr 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');

Das würde ein großes Vertrauen in die Mitautoren voraussetzen. Anstelle des Eingriffs in die functions.php des Themes ist ein Plugin mit Sicherheitsvorsorge und Hygieneeinrichtung 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.

Die angegebene Datei callme.svg konnte nicht hochgeladen werden. • Nur Dateien mit folgenden Erweiterungen sind zulässig: png gif jpg jpeg. • The image file is invalid or the image type is not allowed. Allowed types: png, jpeg, jpg, jpe, gif
/**
 * 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, zieren sich alle Anwendungen – von Adobe Lightroom über Darktable bis hin zu Pinterest & Co.

Mehr zu SVG

2019-11-16 SITEMAP BLOG