Wordpress & WooCommerce Know-how

Von Haus ist es nicht möglich, im CMS WordPress SVG in die Mediathek hochzuladen. Bei dem Versuch, eine SVG-Datei hochzuladen, um sie in einen Beitrag (Post) oder auf einer Seite (Page) einzufügen, erhältst du die Meldung, dass du nicht die Erlaubnis zum Upload einer SVG-Datei besitzt. Wenn du Vektorgrafiken in deinen Beiträgen und auf deinen Seiten verwenden willst, musst die explizit die Unterstützung für das Dateiformat SVG aktivieren.

SVG sind XML-basiert. Bestehende XML-Schwachstellen sind somit eine Gefahr bei der Verwendung von SVG. Es könnte zum Beispiel JavaScript in ein SVG eingebettet werden. Bei der unachtsamen Verwendung von SVG, beispielsweise wenn die Datei geöffnet, über die Tag-Elemente <object> oder <embed> eingebettet oder inline implementiert wird, öffnest du unter Umständen eine Tür für XSS-Angriffe (Cross-Site-Scripting).

Grundsätzlich ist der Upload von SVG relativ sicher, sofern der Code des SVG (XML) beim Hochladen oder bereits vor dem Upload bereinigt wurde. Um Probleme, Codeinjektion, Fehler und Konflikte beim Upload und dem Einsatz von SVG zu vermeiden, solltest du SVG-Dateien, die aus fremden Quellen stammen, immer vor der Verwendung und vor einem Upload desinfizieren bzw. bereinigen (Data Sanitization).

Bei der sogenannten Data Sanitization werden Eingabedaten bereinigt oder gefiltert. Unabhängig davon, ob die Daten von einem Benutzer, einer API oder einem Webdienst stammen. Im WordPress Core sind für viele Anwendungsfälle entsprechende Funktionen bereits integriert, für den Upload von SVG allerdings nicht.

Wenn du das unten stehende Code Snippet zur Aktivierung des SVG Supports in WordPress verwendest, solltest du SVG, die aus fremden Quellen immer bereinigen und desinfizieren. Der SVG Sanitizer Test ist ein nützliches und hilfreiches Online-Tool zur Bereinigung von SVG.

Kopiere das nachfolgende PHP Code Snippet und füge es am Ende der functions.php in deinem WordPress Theme oder in einem Child Theme ein.

/**
 * devslife // Enable SVG Support in WordPress
 * Tested up to WP v5.9
 * @link https://devslife.de/svg-support-und-uploads-in-wordpress-aktivieren
 */
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 );

// Register mime file type SVG only if the user can edit theme options
function devslife_add_svg_mime( $mimes ) {
  
	if ( !current_user_can( 'edit_theme_options' ) ) {
		return $mimes;
	}
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
  
}
add_filter( 'upload_mimes', 'devslife_add_svg_mime' );

Nachdem du das Snippet eingefügt und in der functions.php gespeichert hast, kannst du problemlos SVG in die Mediathek hochladen und sie in deinen Beiträgen und auf deinen Seiten verwenden.

Wenn du Fragen, Anmerkungen oder Anregungen zu diesem Beitrag oder generelle Fragen zu den Themen WordPress oder WooCommerce hast, freue ich mich auf einen Kommentar von dir : )