WordPress ile vektör görüntülerini kullanmanın güvenli yolu
Medyanız için kullanabileceğiniz bir düzine görüntü dosyası türü vardır. Kutunun dışında, WordPress .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 destek içermez. Daha önce, ölçeklenebilir vektör grafiklerinin (SVG) nasıl yapılacağı ve faydalarının nasıl yapılacağı hakkında konuşmuştuk. Bu makale için, SVG konseptini bir kez daha tartışacağız, neden yanlış şekilde kullanmanın güvenli olmayabileceğini ve web sitenizi feda etmeden nasıl uygulanacağını. Hadi çalışalım! YouTube kanalımıza abone olun
SVG SVG’ye giriş, piksele dayanmayan, ancak adından beklediğiniz gibi vektörde bir görüntüdür. Bir metin düzenleyicisi kullanarak sıradan bir görüntü dosyası açmaya çalışırsanız, saçmalık görürsünüz. Ancak, SVG’yi açmaya çalışırsanız, kodu aşağıdaki gibi görebilirsiniz (SVG’nin ilk bölümümüzden alındı):
Kısacası, bir tutam renkle Adobe logo temsilini oluşturan bir dizi vektördür:
SVG benzersizdir, çünkü kalitesini herhangi bir boyutta korur (yani ölçeklenebilirlik) ve kullanılan boyutlardan bağımsız olarak yine de mükemmel görünecektir. Bu, belirli kullanım durumları için ideal dosya türü yapar:Çeşitli platformlarda tekrar kullanmak istediğiniz logo.
Ölçeklendirmek istediğiniz simge bağlama bağlıdır.
Basamaklı stil sayfaları (CSS) kullanarak animasyon yapmak istediğiniz görüntü.
Teknik olarak, SVG yapmanın üç yolu vardır. Makine olmadığınız sürece pratik olmayan kendi kodunuzu yazabilirsiniz. Başka bir rota, SVG’yi başlangıçtan itibaren veya mevcut görüntüleri çekmek ve bunları SVG olarak dışa aktarmak için illüstratörler veya eskizler gibi yazılımları kullanmaktır. Olumlu olmasına rağmen, SVG kullanan iki zayıflık vardır. Birincisi, karmaşık grafikler için pratik değildirler. Örneğin, normal bir fotoğraf, dev bir SVG dosyası üretecek milyonlarca vektörün oluşturulmasını gerektirecektir. SVG kullanmanın ikinci dezavantajı güvenlik ile ilgilidir ve bunu bir sonraki bölümde tartışacağız. Neden SVG kullanmak web sitenizin güvenliğini etkileyebilir, genellikle SVG’yi görüntü dosyası olarak adlandırsak bile, buna ‘belge’ demek daha doğru olacaktır. Sonuçta, sıradan belgelere benzer metin editörlerini kullanarak SVG dosyalarını kolayca açabilir, okuyabilir ve değiştirebilirsiniz.
Sorun, vektör bilgilerine ek olarak JavaScript ekleme yeteneğidir. Teorik olarak, bu, birisi tehlikeli bir kod içeren bir dosya yüklerse, web sitesine SVG desteği uygulamak anlamına gelir. WordPress için SVG desteğinin altı yıldan fazla bir süredir tartışılması çok endişe vericidir:
Tüm biletlerden geçmek zorunda olmasanız da, WordPress’e yüklediğiniz SVG kodunun güvenli olduğundan emin olmanın bir yolu olması, bu özelliklerin uygulanması avantajlardan daha fazla soruna neden olabileceğini sağlamanın bir yoludur. Şu anda, SVG’nizin güvenli olduğundan emin olmak için kullanabileceğiniz bir dizi araç var, ‘Sanitizer’ olarak adlandırılıyor. Ancak, işlevselliğini mevcut WordPress’e uygulamanın iyi bir yolu yok gibi görünüyor. Genel olarak, WordPress’e SVG desteği eklemek pratikte nispeten basittir. Gerçek zorluk, web sitenizi potansiyel saldırılara karşı savunmasız hale getirmeyecek şekilde bunu yapmaktır. 2 Vektör görüntülerini WordPress ile kullanmanın güvenli yolu Bu bölüm için, WordPress’te güvenli SVG kullanımı için manuel ve eklenti tabanlı bir yaklaşımı keşfedeceğiz. Daha sonra ihtiyaçlarınız için en iyi seçenekleri seçebilirsiniz. Yapalım! 1. SVG desteği manuel olarak ekleyin ve Sanitasyon Kodunuz, kod indirimi ile birkaç dakika içinde WordPress’e SVG desteği ekleyebilirsiniz. Ancak, bu sizi daha önce tartıştığımız potansiyel güvenlik sorunlarına açık hale getirecektir. SVG’nin uygulanması için daha güvenli yaklaşım aşağıdaki adımları içerir:
Function.php dosyanızı değiştirerek SVG desteğini etkinleştirin.
.Svg dosyasını WordPress’e yüklememek için istediğiniz kullanıcının rolünü sınırlayın.
Yüklemeden önce her SVG dosyasını temizleyin.
Genel olarak, bir ve iki adım yapmak zor değildir. İlk görev, web sitenize Dosya Aktarım Protokolü (FTP) aracılığıyla erişmek ve kök WordPress klasörünüze gitmektir. İçeride, Fonksiyonlarınızı Bulun.
// svg’ye izin ver
add_filter (‘wp_check_filetype_and_ext’, işlev ($ data, $ dosya, $ dosya adı, $ mimes) {
Global $ wp_version;
if ($ wp_version! == ‘4.7.1’) {return $ data;
}
$ filetype = wp_check_filetype ($ dosya adı, $ mimes);
dönüş [
‘ext’ => $ filetype [‘ext’]
‘Type’ => $ filetype [‘type’],
‘Uygun_filename’ => $ veri [‘uygun_filename’]
];
}, 10, 4);
İşlev cc_mime_types ($ mimes) {
$ mimes [‘svg’] = ‘image/svg+xml’;
$ Mimes dön;
}
add_filter (‘upload_mimes’, ‘cc_mime_types’);
Fonksiyon fix_svg () {
echo ‘
.attachment-266×266, .Thumbnail img {
Genişlik:%100! Önemli;
Yükseklik: Otomatik! Önemli;
}
‘;
}
Add_action (‘admin_head’, ‘fix_svg’);
Bu iki işlevi karşılar – SVG dosyalarını WordPress’e yüklemenize ve bunları medya kitaplığınızda görselleştirmenize olanak tanır. Kodu ekledikten sonra, değişiklikleri Fonksiyon.php dosyanıza kaydedin ve kapatın.
İşler artık biraz daha karmaşık, çünkü hasarlı SVG yüklemeye güvenmediğimiz kullanıcıları önlememiz gerekiyor. Örneğin, editörünüze ve yazarınıza doğru dosyaları yüklemeye güvenebilirsiniz, ancak katılımcınızı değil. Bu konuda yapabileceğiniz iki yol var:
Sınırlı erişime sahip veya medya kütüphanesine erişmeden özel bir kullanıcı rolü oluşturun.
Her kullanıcının rolüne yüklenebilecek dosya türlerini sınırlamak için WP yükleme kısıtlamaları gibi eklentileri kullanın.
Bu yaklaşımların her ikisinin de manuel SVG’nin uygulanmasının nedenlerinden biri olan kendi eksiklikleri vardır. Ancak, kimsenin tehlikeli bir SVG yükleyemediğinden emin olma yöntemini belirledikten sonra, yanlışlıkla yapmadığınızdan emin olmanız gerekir.
İdeal olarak, web sitenize yüklediğiniz her SVG’yi bir temizlik aracı üzerinden çalıştıracaksınız. Bu, dosyanızı alacak, hiçbir şeyin istenmeyen olmadığından emin olun ve varsa silin. Sonunda, bu size WordPress’e yükleyebileceğiniz temiz bir SVG dosyası verir. 2. Yukarıdaki yaklaşımla güvenli bir SVG eklentisi kullanın, size güvenli bir SVG’nin uygulanmasını ne kadar karmaşık hale getirmek istiyoruz. Bu, SVG Safe eklentisinin ne yaptığını doğru bir şekilde takdir edebilirsiniz.
SVG’yi en baştan yüklemenize olanak tanır.
SVG’nizi medya kütüphanesinde görebildiğinizden emin olun.
Sanitasyon kodu Güvenlik sorunlarını önlemek için yüklediğiniz her SVG.
Hayvan SVG, CSS ile manuel olarak diğer unsurlarda yaptığınız gibi.
SVG üretmenize ve canlandırmanıza yardımcı olmak için svgators gibi araçlar kullanın.
Biraz denemek istiyorsanız, bazı animasyonlar burada ve sitenizi gerçekten geliştirebilir. Daha da önemlisi, bunu başarmak için SVG ve CSS kullanmak, özellikle mobil cihazlar için video veya GIF eklemekten çok daha iyidir. Sonuç SVG birçok durum için harika bir seçimdir. Örneğin, ölçeklenebilirliği nedeniyle web sitesi logosu için mükemmel bir seçimdir. Genel olarak, SVG kullanmak daha duyarlı bir web sitesi tasarlamanıza yardımcı olabilir, bu da kullanıcılarınız için her zaman iyi bir şeydir. Ancak, WordPress’e SVG desteği eklemeyi planlıyorsanız, sitenizin güvenliğini koruyan bir yaklaşım kullandığınızdan emin olmanız gerekir. Tavsiye için iki yöntem vardır: SVG desteği manuel olarak ekleyin ve kodunuzu temizleyin.
Güvenli bir SVG eklentisi kullanın.
WordPress’te SVG’yi güvenli bir şekilde nasıl kullanacağınızla ilgili sorularınız var mı? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım! Makale Küçük Resim: Microte / Shutterstock.com
