So verwenden Sie Vektorgrafiken sicher mit WordPress

Veröffentlicht: 2019-06-12

Es gibt Dutzende von Bilddateitypen, die Sie für Ihre Medien verwenden können. Standardmäßig unterstützt WordPress die meisten der beliebtesten Bilddateitypen, einschließlich .jpeg , .png , .gif und mehr. Es enthält jedoch keine Unterstützung für Vektorbilder.

In der Vergangenheit haben wir darüber gesprochen, wie man skalierbare Vektorgrafiken (SVGs) erstellt und welche Vorteile sie haben. In diesem Artikel gehen wir noch einmal auf das Konzept von SVGs ein, warum die falsche Verwendung unsicher sein kann und wie man sie tatsächlich implementiert, ohne Ihre Website zu beeinträchtigen.

Lass uns zur Arbeit gehen!

Abonnieren Sie unseren Youtube-Kanal

Eine Einführung in SVGs

SVGs sind Bilder, die nicht auf Pixeln basieren, sondern auf Vektoren, wie der Name vielleicht schon vermuten lässt. Wenn Sie versuchen, eine normale Bilddatei mit einem Texteditor zu öffnen, sehen Sie relatives Kauderwelsch. Wenn Sie jedoch stattdessen versucht haben, ein SVG zu öffnen, sehen Sie wahrscheinlich Code wie den folgenden (aus unserem ersten Artikel zu SVGs): 

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

Dies sind, kurz gesagt, eine Reihe von Vektoren, die eine Darstellung des Adobe-Logos mit einem Farbtupfer bilden:

Das Adobe-Logo.

SVGs sind einzigartig, weil sie ihre Qualität in jeder Größe behalten (dh skalierbar) und unabhängig von den verwendeten Abmessungen immer noch perfekt aussehen. Dies macht es zu einem idealen Dateityp für einige spezifische Anwendungsfälle:

  • Logos, die Sie häufig auf verschiedenen Plattformen wiederverwenden möchten.
  • Symbole, die Sie je nach Kontext skalieren möchten.
  • Bilder, die Sie mit Cascading Style Sheets (CSS) animieren möchten.

Technisch gesehen gibt es drei Möglichkeiten, SVGs zu erstellen. Sie könnten den Code selbst schreiben, was unpraktisch ist, es sei denn, Sie sind eine Maschine. Die anderen Wege wären, ein SVG von Grund auf neu zu zeichnen oder ein vorhandenes Bild zu verwenden und Software wie Illustrator oder Sketch zu verwenden, um es als SVG zu exportieren.

Trotz der positiven Aspekte gibt es zwei Nachteile bei der Verwendung von SVGs. Erstens sind sie für komplexe Grafiken nicht praktikabel. Zum Beispiel würde ein normales Foto Millionen von Vektoren benötigen, um es zu erstellen, was eine riesige SVG-Datei ergeben würde. Der zweite Nachteil bei der Verwendung von SVGs ist sicherheitsrelevant – und wir werden dies im nächsten Abschnitt besprechen.

Warum die Verwendung von SVGs die Sicherheit Ihrer Website beeinträchtigen kann

Obwohl wir SVGs normalerweise als Bilddateien bezeichnen, wäre es genauer, sie "Dokumente" zu nennen. Schließlich können Sie eine SVG-Datei einfach mit einem Texteditor öffnen, lesen und ändern, der einem normalen Dokument ähnelt.

Das Problem liegt in der Möglichkeit, JavaScript neben Vektorinformationen hinzuzufügen. Theoretisch bedeutet dies, dass die Implementierung von SVG-Unterstützung auf Ihrer Website Sie Angriffen aussetzen könnte, wenn jemand eine Datei mit schädlichem Code hochlädt.

Es ist eine so große Sorge, dass die SVG-Unterstützung für WordPress seit über sechs Jahren diskutiert wird:

Ein Trac-Ticket von vor sechs Jahren.

Sie müssen zwar nicht das gesamte Ticket durchgehen, aber das Wesentliche ist, bis es eine Möglichkeit gibt, sicherzustellen, dass der SVG-Code, den Sie in WordPress hochladen, sicher ist. Die Implementierung der Funktion kann jedoch mehr Probleme als Vorteile verursachen.

Im Moment gibt es bereits mehrere Tools, die Sie verwenden können, um sicherzustellen, dass Ihre SVGs sicher sind, sogenannte "Desinfektionsmittel". Derzeit gibt es jedoch anscheinend keine guten Möglichkeiten, ihre Funktionalität in WordPress zu implementieren.

Insgesamt ist das Hinzufügen von SVG-Unterstützung zu WordPress in der Praxis relativ einfach. Die eigentliche Schwierigkeit liegt darin, dies so zu tun, dass Ihre Website nicht anfällig für potenzielle Angriffe wird.

2 Möglichkeiten, Vektorbilder sicher mit WordPress zu verwenden

In diesem Abschnitt werden wir sowohl einen manuellen als auch einen Plugin-basierten Ansatz zur sicheren Verwendung von SVG in WordPress untersuchen. Sie können dann die beste Option für Ihre Bedürfnisse auswählen. Lasst uns anfangen!

1. SVG-Unterstützung manuell hinzufügen und Code bereinigen

Sie können WordPress in wenigen Minuten mit einem Code-Snippet um SVG-Unterstützung erweitern. Dies würde Sie jedoch für die potenziellen Sicherheitsprobleme öffnen, die wir zuvor besprochen haben. Der sicherere Ansatz für die SVG-Implementierung umfasst die folgenden Schritte:

  1. Aktivieren Sie die SVG-Unterstützung, indem Sie Ihre Datei functions.php ändern.
  2. Beschränken Sie die Benutzerrollen, die Sie möchten, um .svg- Dateien in WordPress hochzuladen.
  3. Desinfizieren Sie jede SVG-Datei, bevor Sie sie hochladen.

Insgesamt sind die Schritte eins und zwei nicht schwer zu bewerkstelligen. Die erste Aufgabe besteht darin, über das File Transfer Protocol (FTP) auf Ihre Website zuzugreifen und zu Ihrem WordPress-Stammordner zu navigieren. Suchen Sie darin nach Ihrer Datei functions.php , öffnen Sie sie und fügen Sie den folgenden Code hinzu (mit freundlicher Genehmigung von Chris Coyier von CodePen and CSS Tricks): 

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

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

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Dies erfüllt zwei Funktionen – es ermöglicht Ihnen, SVG-Dateien in WordPress hochzuladen und in Ihrer Medienbibliothek zu visualisieren. Nachdem Sie den Code hinzugefügt haben, speichern Sie die Änderungen in Ihrer Datei functions.php und schließen Sie sie.

Die Dinge werden jetzt etwas kniffliger, da wir verhindern müssen, dass Benutzer, denen wir nicht vertrauen, beschädigte SVGs hochladen. Sie können beispielsweise Ihren Redakteuren und Autoren vertrauen, die richtigen Dateien hochzuladen, aber nicht Ihren Mitwirkenden. Dazu gibt es zwei Möglichkeiten:

  1. Erstellen Sie benutzerdefinierte Benutzerrollen mit eingeschränktem oder keinem Zugriff auf die Medienbibliothek.
  2. Verwenden Sie ein Plugin wie WP Upload Restriction, um einzuschränken, welche Dateitypen jede Benutzerrolle hochladen kann.

Beide Ansätze haben ihre Fehler haben, die einer der Gründe , Handbuch SVG - Implementierung ist kann schwierig zu bekommen. Sobald Sie sich jedoch für eine Methode entschieden haben, um sicherzustellen, dass niemand bösartige SVG hochladen kann, müssen Sie auch sicherstellen, dass Sie dies nicht aus Versehen tun.

Im Idealfall führen Sie jede SVG, die Sie auf Ihre Website hochladen, vorher mit einem Desinfektionstool aus. Dies nimmt Ihre Datei, stellt sicher, dass sie nichts Ungewöhnliches enthält, und entfernt sie, falls dies der Fall ist. Letztendlich haben Sie so eine saubere SVG-Datei, die Sie endlich in WordPress hochladen können.

2. Verwenden Sie das sichere SVG-Plugin

Mit dem obigen Ansatz wollten wir Ihnen zeigen, wie komplex eine sichere SVG-Implementierung werden kann. Auf diese Weise können Sie richtig einschätzen, was das Safe SVG-Plugin tut.

Das Safe SVG-Plugin.

Kurz gesagt, dieses Plugin kümmert sich um alle Probleme, die wir zuvor aufgelistet haben, einschließlich:

  • Damit können Sie überhaupt SVGs hochladen.
  • Stellen Sie sicher, dass Sie Ihre SVGs in der Medienbibliothek sehen können.
  • Bereinigen Sie den Code jeder SVG-Datei, die Sie hochladen, um Sicherheitsprobleme zu vermeiden.

Dies ist so ziemlich ein Plug-and-Play-Plugin und definitiv der einfachste Ansatz für eine sichere SVG-Implementierung in WordPress. Wenn Sie SVGs verwenden möchten, empfehlen wir Ihnen, es auszuprobieren.

Wie man SVGs mit CSS und Plugins animiert

Wenn Sie sich die ganze Mühe (je nach verwendeter }-Methode) bei der Implementierung von SVGs in WordPress machen, möchten Sie wahrscheinlich das Beste für Ihr Geld herausholen. Dies bedeutet, dass Sie CSS verwenden, um Ihre SVGs zu animieren, wenn die Situation dies erfordert. Es gibt zwei Möglichkeiten für den Prozess, die wir in der Vergangenheit behandelt haben:

  1. Animieren Sie SVGs manuell mit CSS wie jedes andere Element.
  2. Verwenden Sie Tools wie SVGator, um SVGs zu generieren und zu animieren.

Wenn Sie ein wenig experimentieren möchten, können einige Animationen hier und da die Benutzererfahrung Ihrer Website wirklich verbessern. Noch wichtiger ist, dass die Verwendung von SVGs und CSS viel besser ist, als beispielsweise Videos oder GIFs hinzuzufügen, insbesondere für mobile Geräte.

Abschluss

SVGs sind eine fantastische Wahl für viele Situationen. Sie sind beispielsweise aufgrund ihrer Skalierbarkeit die perfekte Option für Website-Logos. Im Allgemeinen kann Ihnen die Verwendung von SVGs helfen, eine reaktionsschnellere Website zu erstellen, was für Ihre Benutzer immer eine gute Sache ist.

Wenn Sie jedoch vorhaben, WordPress SVG-Unterstützung hinzuzufügen, müssen Sie sicherstellen, dass Sie einen Ansatz verwenden, der Ihre Website sicher hält. Es gibt zwei zu empfehlende Methoden:

  1. Fügen Sie SVG-Unterstützung manuell hinzu und bereinigen Sie Ihren Code.
  2. Verwenden Sie das Safe SVG-Plugin.

Haben Sie Fragen zur sicheren Verwendung von SVGs in WordPress? Lassen Sie uns im Kommentarbereich unten darüber sprechen!

Miniaturansicht des Artikels: microtic / shutterstock.com