Etiket arşivi: javascript

XSS Nedir?

Web Programlama, , , ,

Cross Site Scripting kelimelerinin kısaltmasıyla oluşan ve önlem alınmadığında korkulu rüya olabilecek bir tehlike. Çapraz siteler arasında script çalıştırma, kullanıcı bilgilerini ele geçirme gibi bir çok riske sebep olan bir yöntem. Hackerlarınsa en sevdiği yöntemlerden bir tanesi. Peki işin temeli nedir, nasıl çalışır önce kısaca ona bakalım.

XSS Nasıl Çalışır?

Gün içerisinde bir çok siteyi ziyaret ediyoruz ve oturumlarımız hep açık. Google, Facebook, Twitter, Borsa Ekranları ve bazen banka ekranlarımız gün boyu ya da günün bazı zamanlarında açık ve online. Bu da demek oluyor ki Sekme açık olmasa bile oturumlarımız aslında açık. Bankaların oturum süre kısıtlaması birazdan mantıklı gelmeye başlayacak. Açık olan bu oturumlarımıza; kötü niyetli bir hacker ya da kullanıcı, ziyaret ettiğimiz farklı bir siteler aracılığıyla erişim sağlayabilir. Dilediği işlemi yapabilir. Örneğin Facebook üzerinden bir sayfayı haberiniz olmadan size beğendirebilir ya da banka hesabınızdan haberiniz olmadan işlem yapabilir. Bu bazen korsan siteler üzerinden olabilirken eğer önlem alınmamışsa çok sık ziyaret edilen bir site üzerinden de yapılabilir. Bugün bilinen ve güvendiğimiz bir çok web sitesi üzerinden kötü niyetli kullanıcıların benzer saldırıları gerçekleşti. Elbette siteler kullanıcılarının güvenliği için her geçen gün daha çok önlem almaya devam ediyor. Bu durum aslında hackerlarla geliştiriciler arasında bitmeyen bir savaşa benziyor.

XSS’e Nasıl Önlem Alınabilir?

Önlem almak için kullanıcıların verilerinin kaydedildiği ve özellikler tüm kullanıcılara sunulduğu noktalarda veriyi süzmek gerekir. Php‘de bunun için htmlspecialchars() fonksiyonu bulunmakta. Bu fonksiyon aracılığıyla html tagları, kullanıcı tarafında çalıştırılamayacak hale getirilir. Ancak bu kesin çözüm değildir. Kötü niyetli kullanıcılar farklı teknikler geliştirerek bu fonksiyonun etrafından dolanmayı başarabilmektedir. jsfuck.com’daki örnek gibi farklı karakterlerle javascript betikleri yazmak mümkün olabiliyor. Elbette güncel tarayıcılar bu tarz açıklar için önlem alıyor ancak her kullanıcı güncel olamayabiliyor. O nedenle template sistemi kullanmak önemli. Bir çok geliştirici tarafından geliştirilen ve topluluk tarafından farklı testlere tabi tutulan sistemlerle daha güvenli kalmam mümkün olabilir. Özellikle Frameworklerin sundukları template sistemleri tercih edilebilir. Laravel Blade vs gibi.

Kapanış

Yazıyı yazarken aklıma tarayıcıların sekme özelliğini sundukları dönemler aklıma geldi. Bu dönemler aslında XSS açıklarının ayyuka çıktığı dönemlerdi. Büyük siteler büyük açıklarla karşı karşıya kalmışlardı ve önlem almaları zor olmuştu. O karanlık dönemler geride kaldı ancak %100 güvenlik diye bir şey yok. Her zaman tetikte olmakta fayda var. Her zaman söylendiği gibi, %100 güvenlik istiyorsanız sunucuyu kapatıp uyuyabilirsiniz 🙂 Yorumlarınızı bekliyorum.

Css Çakışması Sorunu

Css, ,

Web tasarımla uğraşan bir çok kişi, css dosyalarının çakışması sorunuyla karşılaşılmıştır. Aynı tag’a stil atanmış css dosyalarından dolayı sorun yaşanır. Bu büyük sorunun çok basit bir çözümü var aslında. “Scoped” metodu. Stillerin farklı olmasını istediğiniz divin içerisinde “style type=”text/css” scoped” tagları arasına css kodlarını yazıyorsunuz ya da harici css dosyanızı çağırıyorsunuz. Burda dikkat edilmesi gereken nokta ise şu : bu method ile cağırdığınız stiller içerisinde olduğu tag’da geçerli oluyor. Bu divin dışarısında ise diğer methodlarla yazılan/çağırılan cssler geçerli olacaktır. Örnek kodu aşağıda ekliyorum. Bu örnek kod Html5‘i destekleyen tarayıcılar için. Ardından tüm tarayıcılar için olan örneği de ekleyeceğim. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css Çakışması Sorunu</title>
<style type="text/css">
  p { color:yellow; }
</style>
</head>

<body>
<div>
<p>Sarı</p>
</div>
<div>
<style type="text/css" scoped>
  p { color:blue; }
</style>
<p>Mavi</p>
</div>
</body>
</html>

Html5 tarayıcılarda sorunumuzu çözdük ama ya desteklemeyenler için. Geliştiriciler bunun için de bir çözüm bulmuşlar. “jQuery Scoped CSS”; jquery üzerine geliştirilmiş javascript kütüphanesi bu sorunu çözüyor. Kütüphaneyi bu adresten indirebilirsiniz. İndirdiğiniz dosyalarda bir örnek mevcut ancak ben yine de örnek kodu aşağıda paylaşıyorum.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css Çakışması Sorunu</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
  p { color:yellow; }
</style>
</head>

<body>
<div>
<p>Sarı</p>
</div>
<div>
<style type="text/css" scoped>
  p { color:blue; }
</style>
<p>Mavi</p>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.scoped.js"></script>
</body>
</html>

jQuery UI Nedir?

JavaScript, , ,

jQuery UI(User Interface-Kullanıcı Arayüzü) jQuery üzerine kurulmuş bir javascript kütüphanesidir. İsminden de anlaşılacağı gibi tasarım ağırlıklı bir kütüphanedir. Html elemanlarına efekt ve işlesellik katmak için kullanılır. En çok kullanılan fonksiyonları : sürükle-bırak, yeniden ölçülendirme, takvim, progressbar, slider, menü, açılan pencereler ve daha fazlasıdır. Statik ve durgun html tasarımlarından sıyrılıp, sayfalara hareket getirmek ve canlandırmak için birebir kütüphanedir. jQuery’de olduğu gibi jquery-ui’de de az kod – çok iş mantığı vardır.

jQuery UI kütüphanesine ve ilgili dökümanlara bu adresten ulaşabilirsiniz.

jQuery Nedir?

JavaScript,

Yazımın hemen başında şunu belirtmeliyim. jQuery bir değil, bir javascript kütüphanesidir. Bir çok insana jQuery dediğiniz de size hemen bunu söylerler. Ben bu tarz şeylere pek takılmam ancak insanlar haklı. Ama bu tarz insanlara ben de biraz sinir oluyorum açıkcası.

jQuery 2006 yılında John Resig tarafından geliştirilmiş ve geliştiricilerin kullanımına sunulmuştur. Günümüzde (2013) en çok kullanılan javascript kütüphanesi ünvanına sahiptir. En büyük avantajlarından bir tanesi, hatta bana göre en önemlisi de budur. Çünkü bir dili/kütüphaneyi ne kadar çok kişi kullanıyorsa, onunla ilgili o kadar çok döküman vardır ve karşılan sorunlarla ilgli de o kadar çok döküman/çözüm vardır.

jQeury kütüphanesini resmi sitesinden indirerek kullanabilirsiniz. Yeni aynı sitedeki dökümantasyona da ulaşabilirsiniz. jQuery gerçekten muhteşem bir teknoloji. Ajax teknolojisinde insanlar gerçekten hayrete düşmüşlerdi ancak jQueryden sonra bizi hayrete düşürecek şey ne olacak çok merak ediyorum. Bu kütüphane sayesinde, farklı animasyonlar ve efektler kullanılabiliyor. Sliderlar genellikle jQuery kullanmakta. Animate özelliği sayesinde, elementleri hareket ettirebilir, tonlarıyla oynayabilirsiniz.

Ağırlıklı olarak tasarım odaklı olduğu söylenir. Ancak seçicileri,post,attributes gibi bir çok kütüphanesi ile web yazılım tarafıyla olan işlemlerinizde de büyük kolaylık sağlıyorsunuz. Örneğin post işleminde, ajax büyük bir kolaylık ve yalınlık getirmişti, ama jQuery bu işlemi bir adım öteye taşımış.

Daha burada yazamadığım bir çok özelliği ile jQuery gerçekten fark yaratmış bir kütüphane. Basit bir örnek vermek gerekirse, daha düne kadar javascript kütüphaneleri yazılırken, artık günümüzde jQuery kütüphanesi için kütüphaneler yazılmakta. Jquery UI buna en büyük örnektir.

Geleneği bozmuyorum ve aşağıda bir jQuery kodunun nasıl olması gerektiği ile ilgili örnek kod paylaşıyorum. Burada dikkat edilecek iki nokta bulunuyor. Birincisi jQuery kütüphanesini çağırmış olmanız, ikincisi ise kodları ‘//jquery kodları burada’ yazan kısma yazmanız. Diğer kalan js kodlarını, jQuery açılış ve kapanış tagları olarak görebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
	//jquery kodları burada
});
</script>
</head>

<body>
</body>
</html>