Cum să utilizați în siguranță imaginile vectoriale cu WordPress

Publicat: 2019-06-12

Există zeci de tipuri de fișiere imagine pe care le puteți utiliza pentru mediul dvs. Din cutie, WordPress acceptă majoritatea tipurilor de fișiere de imagine mai populare, inclusiv .jpeg , .png , .gif și multe altele. Cu toate acestea, nu include suport pentru imagini vectoriale.

În trecut, am vorbit despre cum să creăm grafică vectorială scalabilă (SVG), precum și despre beneficiile acestora. Pentru acest articol, vom analiza încă o dată conceptul de SVG-uri, de ce utilizarea lor într-un mod greșit poate fi nesigur și cum să le implementăm fără a compromite site-ul dvs. web.

Sa trecem la treaba!

Abonați-vă la canalul nostru Youtube

O introducere în SVG-uri

SVG-urile sunt imagini bazate nu pe pixeli, ci pe vectori, așa cum ați fi putut ghici din nume. Dacă încercați să deschideți un fișier de imagine obișnuit folosind un editor de text, veți vedea o gâlgă relativă. Cu toate acestea, dacă ați încercat să deschideți un SVG în loc, veți vedea probabil codul cum ar fi următorul (preluat din prima piesă pe SVG): 

<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>

Aceștia, pe scurt, sunt o serie de vectori care alcătuiesc o reprezentare a logo-ului Adobe, cu o linie de culoare aruncată în:

Sigla Adobe.

SVG-urile sunt unice, deoarece își păstrează calitatea la orice dimensiune (adică scalabilă) și vor arăta perfect, indiferent de dimensiunile utilizate. Acest lucru îl face un tip de fișier ideal pentru câteva cazuri de utilizare specifice:

  • Sigle pe care veți dori adesea să le refolosiți pe diferite platforme.
  • Pictograme pe care doriți să le scalați în funcție de context.
  • Imagini pe care doriți să le animați folosind Foi de stil în cascadă (CSS).

Din punct de vedere tehnic, există trei moduri de a crea SVG-uri. Puteți scrie codul dvs., ceea ce nu este practic decât dacă sunteți o mașină. Celelalte rute ar fi să desenezi un SVG de la zero sau să iei o imagine existentă și să folosești software cum ar fi Illustrator sau Sketch pentru a-l exporta ca SVG.

În ciuda aspectelor pozitive, există două dezavantaje în utilizarea SVG-urilor. În primul rând, nu sunt practice pentru grafica complexă. De exemplu, o fotografie normală ar lua milioane de vectori pentru a compune, ceea ce ar face un fișier SVG gigantic. Al doilea dezavantaj al utilizării SVG-urilor este legat de siguranță - și vom discuta acest lucru în secțiunea următoare.

De ce utilizarea SVG-urilor poate afecta securitatea site-ului dvs.

Deși de obicei ne referim la SVG-uri ca fișiere imagine, ar fi mai corect să le numim „documente”. La urma urmei, puteți deschide, citi și modifica cu ușurință un fișier SVG folosind un editor de text, care este similar cu un document obișnuit.

Problemele sunt în capacitatea de a adăuga JavaScript alături de informații vectoriale. Teoretic, aceasta înseamnă că implementarea suportului SVG pe site-ul dvs. web vă poate deschide la atacuri dacă cineva încarcă un fișier care conține cod rău intenționat.

Este o îngrijorare atât de considerabilă încât suportul SVG pentru WordPress a fost în discuție de peste șase ani :

Un bilet Trac de acum șase ani.

Deși nu trebuie să parcurgeți întregul bilet, esența este până când nu există o modalitate de a vă asigura că codul SVG pe care îl încărcați pe WordPress este sigur, implementarea funcției ar putea provoca mai multe probleme decât beneficii.

În acest moment, există deja mai multe instrumente pe care le puteți utiliza pentru a vă asigura că SVG-urile sunt sigure, numite „igienizante”. Cu toate acestea, aparent nu există modalități bune de a implementa funcționalitatea lor în WordPress în prezent.

În general, adăugarea suportului SVG la WordPress este relativ simplă în practică. Adevărata dificultate constă în a face acest lucru într-un mod care nu lasă site-ul dvs. vulnerabil la potențiale atacuri.

2 moduri de a utiliza în siguranță imaginile vectoriale cu WordPress

Pentru această secțiune, vom explora atât o abordare manuală, cât și o abordare bazată pe plugin-uri pentru utilizarea sigură a SVG în WordPress. Apoi veți putea alege cea mai bună opțiune pentru nevoile dvs. Să ajungem la asta!

1. Adăugați asistență SVG manual și dezinfectați codul

Puteți adăuga suport SVG la WordPress în câteva minute cu un fragment de cod. Cu toate acestea, acest lucru vă va lăsa deschis la potențialele probleme de siguranță pe care le-am discutat anterior. Abordarea mai sigură a implementării SVG implică următorii pași:

  1. Activați suportul SVG modificând fișierul funcții.php .
  2. Restricționați rolurile de utilizator pe care le doriți să nu poată încărca fișiere .svg pe WordPress.
  3. Dezinfectați fiecare fișier SVG înainte de al încărca.

În general, pașii unu și doi nu sunt greu de realizat. Prima sarcină este să vă accesați site-ul web prin Protocolul de transfer de fișiere (FTP) și să navigați la folderul dvs. rădăcină WordPress. În interior, căutați fișierul funcții.php , deschideți-l și adăugați următorul cod (prin amabilitatea lui Chris Coyier de la CodePen și 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' );

Acest lucru îndeplinește două funcții - vă permite să încărcați fișiere SVG pe WordPress și să le vizualizați în biblioteca dvs. media. După ce adăugați codul, salvați modificările în fișierul funcții.php și închideți-l.

Acum lucrurile devin puțin mai complicate, deoarece trebuie să împiedicăm utilizatorii în care nu avem încredere să încarce SVG-uri corupte. De exemplu, s-ar putea să aveți încredere în editorii și autorii dvs. pentru a încărca fișierele corecte, dar nu în colaboratorii dvs. Există două moduri în care puteți face acest lucru:

  1. Creați roluri de utilizator personalizate cu acces limitat sau lipsit de acces la Biblioteca media.
  2. Utilizați un plugin, cum ar fi restricția de încărcare WP, pentru a limita ce tipuri de fișiere poate încărca fiecare rol de utilizator.

Ambele abordări au defectele lor, care este unul dintre motivele pentru punerea în aplicare manuală SVG poate obține dificil. Cu toate acestea, odată ce vă stabiliți o metodă pentru a vă asigura că nimeni nu poate încărca SVG rău intenționat, trebuie să vă asigurați și că nu o faceți din greșeală.

În mod ideal, veți rula fiecare SVG pe care îl încărcați pe site-ul dvs. web printr-un instrument de dezinfectare înainte de a face acest lucru. Acest lucru vă va prelua fișierul, asigurați-vă că nu include nimic nepotrivit și îl eliminați dacă este inclus. În cele din urmă, acest lucru vă lasă un fișier SVG curat pe care îl puteți încărca în cele din urmă pe WordPress.

2. Folosiți Safe SVG Plugin

Cu abordarea de mai sus, am vrut să vă arătăm cât de complexă poate fi implementarea SVG sigură. Asta pentru a putea aprecia corect ceea ce face pluginul Safe SVG.

Pluginul Safe SVG.

Pe scurt, acest plugin are grijă de toate problemele enumerate anterior, inclusiv:

  • Vă permite să încărcați SVG-uri în primul rând.
  • Asigurându-vă că vă puteți vedea SVG-urile în biblioteca media.
  • Igienizarea codului fiecărui SVG pe care îl încărcați pentru a preveni probleme de securitate.

Acesta este aproape un plug-and-play și este cu siguranță cea mai simplă abordare a implementării sigure SVG în WordPress. Dacă doriți să utilizați SVG-uri, vă recomandăm să încercați.

Cum să animați SVG-urile folosind CSS și pluginuri

Dacă treceți prin toate problemele (în funcție de} metoda pe care o utilizați) de a implementa SVG-uri în WordPress, probabil că veți dori să obțineți cel mai mult bang pentru dolarul dvs. Aceasta înseamnă să utilizați CSS pentru a vă anima SVG-urile dacă situația necesită acest lucru. Există două moduri în care puteți parcurge procesul, pe care le-am abordat în trecut:

  1. Animați manual SVG-urile cu CSS așa cum ați face cu orice alt element.
  2. Utilizați instrumente precum SVGator pentru a vă ajuta să generați și să animați SVG-uri.

Dacă sunteți pregătit pentru un pic de experimentare, unele animații de aici și de colo pot face cu adevărat experiența utilizatorului site-ului dvs. cu o notă. Mai important, utilizarea SVG-urilor și CSS pentru a realiza acest lucru este mult mai bine decât să spunem, adăugând videoclipuri sau GIF-uri, în special pentru dispozitive mobile.

Concluzie

SVG-urile sunt o alegere fantastică pentru multe situații. Pentru a da un exemplu, acestea sunt opțiunea perfectă pentru siglele site-ului web datorită scalabilității lor. În general, utilizarea SVG-urilor vă poate ajuta să proiectați un site web mai receptiv, ceea ce este întotdeauna un lucru bun în ceea ce privește utilizatorii dvs.

Cu toate acestea, dacă intenționați să adăugați suport SVG la WordPress, trebuie să vă asigurați că utilizați o abordare care vă păstrează site-ul în siguranță. Există două metode de recomandat:

  1. Adăugați suport SVG manual și dezinfectați codul.
  2. Utilizați pluginul Safe SVG.

Aveți întrebări despre cum să utilizați SVG-urile în siguranță în WordPress? Să vorbim despre ele în secțiunea de comentarii de mai jos!

Imagine în miniatură a articolului: microtic / shutterstock.com