WordPress ile Vektör Görselleri Nasıl Güvenle Kullanılır?

Yayınlanan: 2019-06-12

Medyanız için kullanabileceğiniz düzinelerce görüntü dosyası türü vardır. WordPress kutudan çıktığı haliyle .jpeg , .png , .gif ve daha fazlası dahil olmak üzere daha popüler görüntü dosyası türlerinin çoğunu destekler. Ancak, vektör görüntüleri için herhangi bir destek içermez.

Geçmişte, Ölçeklenebilir Vektör Grafiklerinin (SVG'ler) nasıl oluşturulacağından ve avantajlarından bahsetmiştik. Bu makale için, SVG kavramını bir kez daha gözden geçireceğiz, onları yanlış şekilde kullanmanın neden güvenli olmayabilir ve web sitenizden ödün vermeden bunları gerçekten nasıl uygulayabilirsiniz.

Hadi çalışalım!

Youtube Kanalımıza Abone Olun

SVG'lere Giriş

SVG'ler, adından da tahmin edebileceğiniz gibi piksellere değil, vektörlere dayalı görüntülerdir. Bir metin düzenleyici kullanarak normal bir resim dosyasını açmaya çalışırsanız, göreceli anlamsızlık görürsünüz. Ancak, bunun yerine bir SVG açmayı denediyseniz, muhtemelen aşağıdaki gibi bir kod göreceksiniz (SVG'lerdeki ilk parçamızdan alınmıştır): 

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

Özetle bunlar, Adobe logosunun bir temsilini oluşturan bir dizi vektördür ve içine bir renk çizgisi atılmıştır:

Adobe logosu.

SVG'ler benzersizdir çünkü her boyutta (yani ölçeklenebilir) kalitelerini korurlar ve kullanılan boyutlardan bağımsız olarak yine de mükemmel görünürler. Bu, onu birkaç özel kullanım durumu için ideal bir dosya türü yapar:

  • Farklı platformlarda sıklıkla yeniden kullanmak isteyeceğiniz logolar.
  • Bağlama göre ölçeklendirmek isteyeceğiniz simgeler.
  • Basamaklı Stil Sayfalarını (CSS) kullanarak canlandırmak isteyeceğiniz görüntüler.

Teknik olarak, SVG oluşturmanın üç yolu vardır. Kodu kendiniz yazabilirsiniz, bu bir makine değilseniz pratik değildir. Diğer yollar, sıfırdan bir SVG çizmek veya mevcut bir görüntüyü alıp SVG olarak dışa aktarmak için Illustrator veya Sketch gibi yazılımları kullanmak olacaktır.

Olumlu yanlarına rağmen, SVG kullanmanın iki dezavantajı vardır. İlk olarak, karmaşık grafikler için pratik değiller. Örneğin, normal bir fotoğrafın oluşturulması milyonlarca vektörü alacak ve bu da devasa bir SVG dosyası oluşturacaktır. SVG'leri kullanmanın ikinci dezavantajı güvenlikle ilgilidir ve bunu bir sonraki bölümde tartışacağız.

SVG'leri Kullanmak Web Sitenizin Güvenliğini Neden Etkileyebilir?

SVG'lere genellikle resim dosyaları olarak atıfta bulunsak da, onlara 'belgeler' demek daha doğru olur. Sonuçta, normal bir belgeye benzer bir metin düzenleyici kullanarak bir SVG dosyasını kolayca açabilir, okuyabilir ve değiştirebilirsiniz.

Sorun, vektör bilgilerinin yanı sıra JavaScript ekleyebilme yeteneğindedir. Teorik olarak bu, web sitenizde SVG desteğinin uygulanmasının, birisi kötü amaçlı kod içeren bir dosya yüklemesi durumunda sizi saldırılara açabileceği anlamına gelir.

WordPress için SVG desteğinin altı yıldan fazla bir süredir tartışılıyor olması çok önemli bir endişe:

Altı yıl öncesinden bir Trac bileti.

Tüm bileti gözden geçirmeniz gerekmese de, ana fikir, WordPress'e yüklediğiniz SVG kodunun güvenli olduğundan emin olmanın bir yolu olana kadar, özelliği uygulamak faydadan çok soruna neden olabilir.

Şu anda, SVG'lerinizin güvenli olduğundan emin olmak için kullanabileceğiniz "dezenfektanlar" adı verilen birkaç araç zaten var. Ancak, şu anda işlevlerini WordPress'e uygulamanın iyi bir yolu yok gibi görünüyor.

Genel olarak, WordPress'e SVG desteği eklemek pratikte nispeten basittir. Asıl zorluk, bunu web sitenizi olası saldırılara karşı savunmasız bırakmayacak şekilde yapmaktır.

WordPress ile Vektör Görsellerini Güvenle Kullanmanın 2 Yolu

Bu bölümde, WordPress'te güvenli SVG kullanımına yönelik hem manuel hem de eklenti tabanlı bir yaklaşımı keşfedeceğiz. Daha sonra ihtiyaçlarınız için en iyi seçeneği seçebileceksiniz. Hadi hadi bakalım!

1. SVG Desteğini Manuel Olarak Ekleyin ve Kodunuzu Temizleyin

Bir kod parçacığıyla birkaç dakika içinde WordPress'e SVG desteği ekleyebilirsiniz. Ancak bu, sizi daha önce tartıştığımız olası güvenlik sorunlarına açık bırakacaktır. SVG uygulamasına yönelik daha güvenli yaklaşım aşağıdaki adımları içerir:

  1. Functions.php dosyanızı değiştirerek SVG desteğini etkinleştirin.
  2. .svg dosyalarını WordPress'e yükleyebilmesini istediğiniz kullanıcı rollerini kısıtlayın.
  3. Yüklemeden önce her SVG dosyasını sterilize edin.

Genel olarak, birinci ve ikinci adımların gerçekleştirilmesi zor değildir. İlk görev, web sitenize Dosya Aktarım Protokolü (FTP) aracılığıyla erişmek ve WordPress kök klasörünüze gitmek. İçeride, function.php dosyanızı arayın, açın ve aşağıdaki kodu ekleyin (CodePen ve CSS Tricks'ten Chris Coyier'in izniyle): 

// 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' );

Bu, iki işlevi yerine getirir - SVG dosyalarını WordPress'e yüklemenizi ve bunları medya kitaplığınızda görselleştirmenizi sağlar. Kodu ekledikten sonra, değişiklikleri functions.php dosyanıza kaydedin ve kapatın.

Güvenmediğimiz kullanıcıların bozuk SVG'leri yüklemesini engellememiz gerektiğinden, işler artık biraz daha zorlaşıyor. Örneğin, editörlerinize ve yazarlarınıza doğru dosyaları yükleyeceğine güvenebilirsiniz, ancak katkıda bulunanlarınıza güvenemezsiniz. Bu konuda gidebileceğiniz iki yol vardır:

  1. Medya Kitaplığına sınırlı veya erişimsiz özel kullanıcı rolleri oluşturun.
  2. Her kullanıcı rolünün yükleyebileceği dosya türlerini sınırlamak için WP Yükleme Kısıtlaması gibi bir eklenti kullanın.

Her iki yaklaşım da manuel SVG Uygulamanın dikkat alabilirsiniz nedenlerinden biridir onların kusurları, var. Ancak, kimsenin kötü niyetli SVG yükleyememesini sağlayacak bir yönteme karar verdiğinizde, bunu yanlışlıkla yapmadığınızdan da emin olmanız gerekir.

İdeal olarak, web sitenize yüklediğiniz her SVG'yi bunu yapmadan önce bir dezenfektan aracıyla çalıştırırsınız. Bu, dosyanızı alacak, istenmeyen bir şey içermediğinden emin olacak ve içeriyorsa kaldıracaktır. Sonuç olarak, bu size sonunda WordPress'e yükleyebileceğiniz temiz bir SVG dosyası bırakır.

2. Güvenli SVG Eklentisini Kullanın

Yukarıdaki yaklaşımla, size SVG uygulamasının ne kadar karmaşık ve güvenli olabileceğini göstermek istedik. Bu, Safe SVG eklentisinin ne yaptığını doğru bir şekilde takdir edebilmeniz içindir.

Güvenli SVG eklentisi.

Özetle, bu eklenti daha önce listelediğimiz tüm sorunlarla ilgilenir:

  • İlk etapta SVG'leri yüklemenizi sağlar.
  • SVG'lerinizi Medya Kitaplığı içinde görebildiğinizden emin olun.
  • Güvenlik sorunlarını önlemek için yüklediğiniz her SVG'nin kodunu temizleme.

Bu hemen hemen bir tak ve çalıştır eklentisidir ve kesinlikle WordPress'te güvenli SVG uygulamasına yönelik en basit yaklaşımdır. SVG kullanmayı düşünüyorsanız, denemenizi öneririz.

CSS ve Eklentileri Kullanarak SVG'leri Canlandırma

WordPress'te SVG'leri uygulamanın tüm zahmetini (kullandığınız yönteme bağlı olarak) yaşarsanız, muhtemelen paranızın karşılığını en iyi şekilde almak isteyeceksiniz. Bu, durum gerektiriyorsa SVG'lerinizi canlandırmak için CSS kullanmak anlamına gelir. Geçmişte ele aldığımız süreç hakkında gidebileceğiniz iki yol vardır:

  1. Diğer öğelerde olduğu gibi SVG'leri CSS ile manuel olarak canlandırın.
  2. SVG'leri oluşturmanıza ve canlandırmanıza yardımcı olması için SVGator gibi araçları kullanın.

Biraz deneme yapmaya hazırsanız, burada ve oradaki bazı animasyonlar sitenizin kullanıcı deneyimini gerçekten bir üst seviyeye çıkarabilir. Daha da önemlisi, bunu başarmak için SVG'leri ve CSS'yi kullanmak, özellikle mobil cihazlar için video veya GIF eklemekten çok daha iyidir.

Çözüm

SVG'ler birçok durum için harika bir seçimdir. Bir örnek vermek gerekirse, ölçeklenebilirlikleri nedeniyle web sitesi logoları için mükemmel bir seçenektir. Genel olarak, SVG'leri kullanmak, daha duyarlı bir web sitesi tasarlamanıza yardımcı olabilir; bu, kullanıcılarınız açısından her zaman iyi bir şeydir.

Ancak, WordPress'e SVG desteği eklemeyi planlıyorsanız, sitenizi güvende tutan bir yaklaşım kullandığınızdan emin olmanız gerekir. Önerilecek iki yöntem vardır:

  1. SVG desteğini manuel olarak ekleyin ve kodunuzu dezenfekte edin.
  2. Güvenli SVG eklentisini kullanın.

WordPress'te SVG'leri nasıl güvenle kullanacağınız hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!

Makale küçük resmi: microtic / Shutterstock.com