Liquid, Shopify, Jekyll, Hugo gibi pop\u00fcler platformlarda ve bir\u00e7ok \u00f6zel uygulamada kullan\u0131lan, esnek ve a\u00e7\u0131k kaynakl\u0131 bir \u015fablon dilidir. Tasar\u0131mc\u0131lar\u0131n ve geli\u015ftiricilerin, sunum katman\u0131nda karma\u015f\u0131k mant\u0131k y\u00fcr\u00fctmelerine olanak tan\u0131rken, arka u\u00e7 kodundan ayr\u0131lmas\u0131n\u0131 sa\u011flar. De\u011fi\u015fkenleri g\u00f6stermek, d\u00f6ng\u00fcler olu\u015fturmak, ko\u015fullu ifadeler kullanmak ve filtreler uygulamak i\u00e7in \u00f6zel etiketler ve s\u00f6zdizimi kullan\u0131r. Ancak, bu etiketlerin kendisini bir i\u00e7erik olarak g\u00f6stermek istedi\u011fimizde veya kullan\u0131c\u0131 taraf\u0131ndan girilen verilerin yanl\u0131\u015fl\u0131kla Liquid kodu olarak yorumlanmas\u0131n\u0131 engellemek istedi\u011fimizde, “ka\u00e7\u0131\u015f” (escaping) mekanizmalar\u0131na ihtiya\u00e7 duyar\u0131z. Bu makale, Liquid \u015fablon etiketlerinden g\u00fcvenli ve etkili bir \u015fekilde nas\u0131l ka\u00e7\u0131laca\u011f\u0131n\u0131, kar\u015f\u0131la\u015f\u0131labilecek sorunlar\u0131 ve en iyi uygulamalar\u0131 derinlemesine inceleyecektir.<\/p>\n
Liquid, \u00f6zellikle web geli\u015ftirme d\u00fcnyas\u0131nda, dinamik i\u00e7erik olu\u015fturmak i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir. Peki, neden Liquid etiketlerinden ka\u00e7maya ihtiya\u00e7 duyar\u0131z? Bu sorunun birka\u00e7 temel cevab\u0131 vard\u0131r:<\/p>\n * Liquid Kodunu \u0130\u00e7erik Olarak G\u00f6sterme:<\/strong> Bir Liquid \u015fablon dilini \u00f6\u011freten bir e\u011fitim makalesi yazarken veya bir kod \u00f6rne\u011fi sunarken, Bu nedenlerle, Liquid etiketlerinden nas\u0131l g\u00fcvenli ve etkili bir \u015fekilde ka\u00e7\u0131laca\u011f\u0131n\u0131 anlamak, temiz, g\u00fcvenli ve beklenen \u00e7\u0131kt\u0131y\u0131 \u00fcreten \u015fablonlar olu\u015fturmak i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n Liquid, bu t\u00fcr senaryolar\u0131 ele almak i\u00e7in \u00e7e\u015fitli yerle\u015fik ka\u00e7\u0131\u015f mekanizmalar\u0131 sunar. Bunlar, belirli etiketler ve filtreler arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015ftirilir.<\/p>\n Kullan\u0131m Senaryolar\u0131:<\/strong><\/p>\n * Kod \u00d6rnekleri Sunma:<\/strong> Liquid veya di\u011fer dillerdeki kod \u00f6rneklerini bir blog yaz\u0131s\u0131nda veya dok\u00fcmantasyonda g\u00f6stermek i\u00e7in idealdir. Dikkat Edilmesi Gerekenler:<\/strong> Bu bir {{ Liquid }} denemesidir.<\/p>\" | escape }}\n{# \u00c7\u0131kt\u0131: <p>Bu bir {{ Liquid }} denemesidir.<\/p> #}<\/code><\/pre>\n Yukar\u0131daki \u00f6rnekte g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, etiket<\/p>\" | escape_once }}\n{# \u00c7\u0131kt\u0131: Bu bir <p>etiket<\/p> #}<\/code><\/pre>\n Kullan\u0131m Senaryolar\u0131:<\/strong><\/p>\n * Kullan\u0131c\u0131dan Gelen Metinleri G\u00fcvenli Hale Getirme:<\/strong> Blog yorumlar\u0131, \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131 gibi kullan\u0131c\u0131 taraf\u0131ndan girilen t\u00fcm metinler, \u015fablonda g\u00f6sterilmeden \u00f6nce Kullan\u0131m Senaryolar\u0131:<\/strong><\/p>\n * URL Parametreleri Olu\u015fturma:<\/strong> Dinamik olarak olu\u015fturulan URL'lerdeki sorgu parametrelerini veya yol bile\u015fenlerini g\u00fcvenli hale getirme. Liquid etiketlerinden ka\u00e7\u0131\u015f sadece temel etiketleri ve filtreleri kullanmaktan ibaret de\u011fildir; ayn\u0131 zamanda farkl\u0131 senaryolarda do\u011fru stratejiyi se\u00e7meyi de gerektirir.<\/p>\n Bir Liquid \u015fablonunda, Liquid kodunu bir \u00f6rnek olarak g\u00f6stermek istedi\u011finizde {{ item.title }}<\/p>\n {% endfor %}\n{% endraw %}<\/code><\/pre>\n <\/code><\/p>\n Bu \u00f6rnek, {{ variable }}<\/code> \u015feklinde de\u011fi\u015fkenleri g\u00f6stermek, {% if condition %} ... {% endif %}<\/code> ile ko\u015fullu mant\u0131k y\u00fcr\u00fctmek ve {% for item in collection %} ... {% endfor %}<\/code> ile koleksiyonlar \u00fczerinde d\u00f6ng\u00fc yapmak gibi temel i\u015flevleri vard\u0131r. Bu etiketler, \u015fablon motoru taraf\u0131ndan i\u015flendi\u011finde, ilgili mant\u0131\u011f\u0131 y\u00fcr\u00fcterek veya de\u011fi\u015fken de\u011ferlerini yerine koyarak nihai HTML \u00e7\u0131kt\u0131s\u0131n\u0131 olu\u015fturur.<\/p>\n{{ product.title }}<\/code> gibi bir etiketi ger\u00e7ekten bir etiket olarak de\u011fil, bir metin dizesi olarak g\u00f6stermek isteyebilirsiniz. E\u011fer ka\u00e7\u0131\u015f yapmazsan\u0131z, Liquid motoru bu etiketi i\u015fleyecek ve bir de\u011fi\u015fkenin de\u011ferini g\u00f6stermeye \u00e7al\u0131\u015facakt\u0131r ki bu da ya bo\u015f bir \u00e7\u0131kt\u0131ya ya da beklenmedik bir de\u011fere yol a\u00e7acakt\u0131r.
\n* Yanl\u0131\u015fl\u0131kla Yorumlanmay\u0131 Engelleme:<\/strong> Kullan\u0131c\u0131lar\u0131n yorum yapabildi\u011fi, \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131 girebildi\u011fi veya blog yaz\u0131lar\u0131 olu\u015fturabildi\u011fi sistemlerde, kullan\u0131c\u0131lar\u0131n girdileri aras\u0131nda Liquid etiketlerine benzer dizeler bulunabilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 “En sevdi\u011fim \u00fcr\u00fcn {{ item.name }}!” yazarsa ve bu metin do\u011frudan \u015fablona bas\u0131l\u0131rsa, {{ item.name }}<\/code> k\u0131sm\u0131 Liquid taraf\u0131ndan yorumlanmaya \u00e7al\u0131\u015f\u0131l\u0131r. Bu durum, ya bir hata mesaj\u0131na ya da istenmeyen bir davran\u0131\u015fa neden olabilir.
\n* G\u00fcvenlik Endi\u015feleri (XSS):<\/strong> Kullan\u0131c\u0131 taraf\u0131ndan sa\u011flanan i\u00e7erik, dikkatli bir \u015fekilde i\u015flenmedi\u011finde ciddi g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7abilir. \u00d6zellikle, kullan\u0131c\u0131lar\u0131n do\u011frudan Liquid kodu enjekte etme veya Liquid etiketlerine benzer yap\u0131lar kullanarak \u015fablon motorunu manip\u00fcle etme potansiyeli, \u00c7apraz Site Betikleme (XSS) sald\u0131r\u0131lar\u0131na zemin haz\u0131rlayabilir. Do\u011fru ka\u00e7\u0131\u015f stratejileri, bu t\u00fcr g\u00fcvenlik risklerini minimize etmeye yard\u0131mc\u0131 olur.
\n* \u015eablon \u0130\u00e7inde \u015eablon G\u00f6sterme:<\/strong> Bazen, bir \u015fablonun i\u00e7inde ba\u015fka bir \u015fablonun ham kodunu g\u00f6stermek isteyebilirsiniz. Bu durumda, i\u00e7teki \u015fablonun Liquid etiketlerinin d\u0131\u015ftaki \u015fablon motoru taraf\u0131ndan i\u015flenmesini engellemek kritik \u00f6neme sahiptir.<\/p>\nLiquid’de Temel Ka\u00e7\u0131\u015f Mekanizmalar\u0131<\/h3>\n
{% raw %}<\/code> ve {% endraw %}<\/code> Etiketleri<\/h4>\nraw<\/code> ve endraw<\/code> etiketleri, Liquid’deki en g\u00fc\u00e7l\u00fc ve do\u011frudan ka\u00e7\u0131\u015f mekanizmas\u0131d\u0131r. Bu etiketler aras\u0131na yerle\u015ftirilen t\u00fcm i\u00e7erik, Liquid motoru taraf\u0131ndan tamamen g\u00f6z ard\u0131 edilir ve ham metin olarak \u00e7\u0131kt\u0131ya bas\u0131l\u0131r. \u0130\u00e7erisinde Liquid de\u011fi\u015fkenleri, d\u00f6ng\u00fcler, ko\u015fullu ifadeler veya di\u011fer etiketler bulunsa bile, bunlar i\u015flenmez.<\/p>\n{% raw %}\n Bu bir Liquid de\u011fi\u015fkenidir: {{ my_variable }}\n Bu bir Liquid ko\u015fuludur: {% if true %} Do\u011fru {% endif %}\n Bu etiketler i\u015flenmeyecek, sadece metin olarak g\u00f6r\u00fcnecek.\n{% endraw %}<\/code><\/pre>\n
\n* \u015eablon \u0130\u00e7inde \u015eablon G\u00f6sterme:<\/strong> Bir Liquid \u015fablonunun ba\u015fka bir Liquid \u015fablonunu metin olarak i\u00e7ermesi gerekti\u011finde kullan\u0131l\u0131r.
\n* \u00d6zel S\u00f6zdizimini Korumak:<\/strong> Baz\u0131 durumlarda, Liquid etiketlerine benzeyen ancak Liquid taraf\u0131ndan i\u015flenmesini istemedi\u011finiz \u00f6zel s\u00f6zdizimleri olabilir (\u00f6rne\u011fin, JavaScript \u015fablon motorlar\u0131n\u0131n kendi etiketleri).<\/p>\n
\n{% raw %}<\/code> etiketi a\u00e7\u0131ld\u0131ktan sonra, {% endraw %}<\/code> etiketiyle kapat\u0131lmas\u0131 zorunludur. Aksi takdirde, \u015fablonun geri kalan k\u0131sm\u0131 da raw metin olarak yorumlanacak ve beklenmedik \u00e7\u0131kt\u0131lara neden olacakt\u0131r. Bu, \u015fablon ayr\u0131\u015ft\u0131rma hatalar\u0131na veya eksik sayfa i\u00e7eri\u011fine yol a\u00e7abilir.<\/p>\nescape<\/code> ve escape_once<\/code> Filtreleri<\/h4>\nescape<\/code> filtresi, bir dizenin i\u00e7indeki HTML \u00f6zel karakterlerini (\u00f6rne\u011fin, <<\/code>, ><\/code>, &<\/code>, \"<\/code> ve '<\/code>) HTML varl\u0131klar\u0131na d\u00f6n\u00fc\u015ft\u00fcrerek ka\u00e7ar. Bu, \u00f6zellikle kullan\u0131c\u0131 taraf\u0131ndan girilen verilerin HTML i\u00e7eri\u011fine dahil edildi\u011fi durumlarda XSS sald\u0131r\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in kritik \u00f6neme sahiptir. Liquid etiketlerinden do\u011frudan ka\u00e7\u0131\u015f sa\u011flamasa da, Liquid etetiketlerine benzeyen karakterleri i\u00e7eren metinlerin g\u00fcvenli bir \u015fekilde g\u00f6sterilmesine yard\u0131mc\u0131 olabilir.<\/p>\n{{ \"{{ Liquid }}<\/code> k\u0131sm\u0131 do\u011frudan Liquid etiketi olarak i\u015flenmez, \u00e7\u00fcnk\u00fc escape<\/code> filtresi sadece HTML karakterlerini d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Ancak, e\u011fer {{ Liquid }}<\/code> do\u011frudan bir de\u011fi\u015fken olarak yorumlanmaya \u00e7al\u0131\u015f\u0131lacak olsayd\u0131, escape<\/code> filtresi bu yorumlamay\u0131 engellemezdi. escape<\/code> filtresinin as\u0131l amac\u0131, HTML i\u00e7eri\u011fini g\u00fcvence alt\u0131na almakt\u0131r.<\/p>\nescape_once<\/code> filtresi, escape<\/code> filtresine benzer \u015fekilde \u00e7al\u0131\u015f\u0131r, ancak zaten ka\u00e7\u0131lm\u0131\u015f olan varl\u0131klar\u0131 tekrar ka\u00e7maz. Bu, bir dizenin birden fazla kez ka\u00e7\u0131lmas\u0131n\u0131 \u00f6nlemek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r, b\u00f6ylece &<\/code> gibi \u00e7ift ka\u00e7\u0131\u015flar\u0131 engeller.<\/p>\n{{ \"Bu zaten & ka\u00e7\u0131lm\u0131\u015f bir metin.\" | escape_once }}\n{# \u00c7\u0131kt\u0131: Bu zaten & ka\u00e7\u0131lm\u0131\u015f bir metin. #}\n\n{{ \"Bu bir escape<\/code> filtresi ile i\u015flenmelidir.
\n* HTML \u0130\u00e7eri\u011fi \u0130\u00e7inde G\u00fcvenli Metin G\u00f6r\u00fcnt\u00fcleme:<\/strong> Herhangi bir dinamik metnin HTML yap\u0131s\u0131n\u0131 bozmas\u0131n\u0131 veya k\u00f6t\u00fc niyetli kod \u00e7al\u0131\u015ft\u0131rmas\u0131n\u0131 engellemek.<\/p>\nurl_encode<\/code> Filtresi<\/h4>\nurl_encode<\/code> filtresi, bir dizeyi URL'lerde g\u00fcvenli bir \u015fekilde kullan\u0131labilmesi i\u00e7in kodlar. Bo\u015fluklar\u0131 %20<\/code> gibi varl\u0131klara d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve di\u011fer \u00f6zel karakterleri URL'de ge\u00e7erli varl\u0131klara \u00e7evirir. Liquid etiketlerinden do\u011frudan ka\u00e7\u0131\u015f sa\u011flamasa da, URL parametrelerinde Liquid benzeri dizelerin yanl\u0131\u015f yorumlanmas\u0131n\u0131 veya bozulmas\u0131n\u0131 \u00f6nlemek i\u00e7in \u00f6nemlidir.<\/p>\n{{ \"\u00dcr\u00fcn Ad\u0131: {{ deneme }}\" | url_encode }}\n{# \u00c7\u0131kt\u0131: %C3%9Cr%C3%BCn%20Ad%C4%B1%3A%20%7B%7B%20deneme%20%7D%7D #}<\/code><\/pre>\n
\n* Form Verilerini URL \u00dczerinden G\u00f6nderme:<\/strong> GET istekleriyle g\u00f6nderilen form verilerini kodlama.<\/p>\nGeli\u015fmi\u015f Senaryolar ve Stratejiler<\/h3>\n
Liquid Kod Bloklar\u0131n\u0131 G\u00f6r\u00fcnt\u00fcleme<\/h4>\n
{% raw %}<\/code> ve {% endraw %}<\/code> etiketleri vazge\u00e7ilmezdir.<\/p>\nBir Liquid D\u00f6ng\u00fc \u00d6rne\u011fi:<\/h3>\n
{% raw %}\n {% for item in collection %}\n for<\/code> d\u00f6ng\u00fcs\u00fcn\u00fcn ve item.title<\/code> de\u011fi\u015fkeninin ham kodunu, Liquid motoru taraf\u0131ndan i\u015flenmeden oldu\u011fu gibi g\u00f6sterir. <\/p>\n<\/code> ve
<\/code> etiketleri ise kod blo\u011funun bi\u00e7imlendirilmesine yard\u0131mc\u0131 olur.\n\nKullan\u0131c\u0131 Taraf\u0131ndan Olu\u015fturulan \u0130\u00e7erik (UGC)<\/h4>\n\nKullan\u0131c\u0131lar\u0131n metin girebildi\u011fi her yerde (yorumlar, blog g\u00f6nderileri, profil a\u00e7\u0131klamalar\u0131 vb.), g\u00fcvenlik en \u00f6nemli konulardan biridir. Kullan\u0131c\u0131lar\u0131n do\u011frudan Liquid kodu enjekte etmesini veya HTML\/JavaScript kullanarak XSS sald\u0131r\u0131lar\u0131 ger\u00e7ekle\u015ftirmesini engellemek i\u00e7in iki a\u015famal\u0131 bir yakla\u015f\u0131m genellikle en iyisidir:\n\n1. Sunucu Tarafl\u0131 Temizleme (Sanitizasyon):<\/strong> Kullan\u0131c\u0131 girdisi veritaban\u0131na kaydedilmeden \u00f6nce, \u015f\u00fcpheli HTML etiketleri (\u00f6rne\u011fin,