tarihinde Fatih Hayrioğlu

Yaklaşık 2-3 haftadır bir çok yerde karşılaştığımız bu sorunun kaynağının ne olduğu konusunda bir çok makale okudum. Çözümler okudum uygulamalar yaptım sonuç olarak konuyu şöyle özetleyebiliriz.

Çeşitli yollardan bize musallat olan virüs(aslında pek virüs mantığı ile hareket etmiyor.) Sistemimizdeki ftp bilgilerini alıp bu bilgiler üzerinden sitelere otomatik olarak bir iframe kodu ekliyor. Genellikle index.xxx ve default.xxx isimli dosyalara otomatik olarak eklenen bir iframe kodu bu. Eklenen bu iframe kodu bazen boş bir sayfayı açarken bazende malware olarak adlandırılan kullanıcının bilgisayarına sızan bir virüs yükletmeye çalışıyor. Eklenen bu iframe genelde gizli olarak kodlandığı için(visibility:hidden) göremiyoruz.

iframe_kodu

Belli bir süre sonra Google siteyi tararken bu kodlamayı görüyor ve linki takip edincede siteden virüs yayılmaya çalışıyor diye sitenizi Saldırgan Site sınıflandırmasını sokuyor. 

google-warning

Saldırgan Site sınıfına giren sitemiz Google Chrome ve Firefox ile sitemize açmayan kişilere yukarıdakine benzer bir ekran ile karşılık verecektir ve kullanıcılar sitenize erişemeyecektir. 

Peki biz bu işten nasıl kurtulacağız. İlk olarak siteden bu kodları arayıp(genelde body etiketi sonrasına eklendiği için bulmak kolay.) bulup kaldıracağız. Ayrıca bilgisayarımızı sağlam bir virüs taramasından geçirip, tüm ftp şifrelerimizi değiştirmeyi unutmayalım. 

Bir sonraki adım olarak google’un saldırgan site listesinden çıkmak için Google Webmaster Tools‘una gireceğiz.

Siteye girdikten sonra sırası ile(İngilizce seçili olarak girdiğiniz farz ederek devam edeceğim. İşlerin hızlı yürümesi için İngilizceyi tercih etmenizi öneririm)

  • Add Site deyip sitemizi ekleyeceğiz. http://www.orneksite.com/
  • **Continuebasıp ilerleyince karşımıza Site verification **sayfası çıkacak. Sitenin bize ait olup olmadığını kontrol için
  • Burada iki tür doğrulama isteniyor bizden Meta tag ve HTML file diye iki yolumuz var. Ben Meta tag’i seçip ilerliyorum. 
  • Site bize bir meta etiketi veriyor. Bu kodu alıp sitemize(<head>…</head> arasına) ekliyoruz. Sadece ana sayfaya eklemek yeterli. 

google-webmaster-tools

Sonra sitenin bize ait olduğunu anlayan goole bize sitemizin saldırgan site olarak listelendiğini söylüyor ve bundan kurtulmak için bir çare gösteriyor. 

badware

Request a review linkine tıklıyoruz. İşaret kutucuğunu işaretleyip metin girdi alanına bir cümlelik bir  durum beyan ediyoruz. 

Bu işlemlerden sonra google yaklaşık olarak 2-3 saat içinde sitemizi saldırgan site listesinden çıkarıyor.

Kaynaklar

tarihinde Fatih Hayrioğlu

Safari ve Google Chrome tarayıcıları her hangi bir metin girdi alanına(text input) odaklandığında bu elemanın etrafını bir şerit ile belirliyor.

Google Chrome Normal Hali

Google Chrome Odaklanmış Hali

Safari Normal Hali

Safari Odaklanmış Hali

Bu normalde güzel bir özellik, ancak biz eğer standart metin girdi alanı yerine kendi tasarladığımız bir metin girdi alanı koydu isek bu odaklanma çizgileri sorun çıkarıyor. Bir örnek yapalım.

En son projelerimden bonus.com.tr’de böyle bir sorun ile karşılaştığımda buna bir çözüm aradım. İlk kodum şöyle idi.

<!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>
<style type="text/css">
body{background-color:#52c520;}

.aramaMetinKutusu{
	background:url(images/arama_zemini.gif) 0 0 no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusuOdak{
	background:url(images/arama_zemini.gif) 0 -31px no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusu input{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
}

.aramaMetinKutusuOdak input:focus{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
	background-color:#F6FFD4
}

</style>
</head>

<body>
<div class="aramaMetinKutusu">
    <input type="text" name="arama" onfocus="this.parentNode.className='aramaMetinKutusuOdak'" onblur="this.parentNode.className='aramaMetinKutusu'" />
</div>
</body>
</html>

Bu kodlarım Firefox ve IE’de sorunsuz çalıştı. Daha sonra sayfayı Google Chrome’da test ettiğimde aşağıdaki gibi bir sorun ile karşılaştım.

chrome_odak

Sorunun çözümünü araştırdığımda dış kenar çizgisini sıfırlamam gerektiğini gördüm.  

input{
	outline:0
}

tanımı bizi çözüme ulaştırdı.

Örnek kodu görmnek için tıklayınız.

Peki dış hat çizgisini kaldrımayalım demiştik şimdi ise kaldırdık, ne olacak şimdi? Burada odaklanma durumu için bir sınıf atayıp ona ayrı bir tanım yaptığımız için klavye kullananlar için sorun olmayacaktır.

Kaynaklar

tarihinde Fatih Hayrioğlu

apple-iphone

Gelişen ve yaygınlaşan mobil cihazlar bizlere bir mecra daha açacağa benziyor. Gelecekte etkisini daha çok hissettirecek cep telefonu vb. ürünlerden internete girme isteği. Şimdilerde kendini gösteriyor. Benim size burada bahsedeceğim ipucu küçük ama kullanışlı bir ipucu olacaktır.

Bir kaç sitede gördükten sonra ve bende bir iphone projesine başlayacak olmamdan dolayı buraya eklemeyi uygun gördüm. Daha önce çıktı almak için(print) benzer bir yapıyı kullanmıştık.

Kodumuz çok basit

<!--[if !IE]>–> <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" /> <!–<![endif]–>

veyahut

@media only screen and (max-device-width:480px) {   
	body {
		color:#000;
	}
}

şeklinde bir tanımlamada yapabiliyoruz. İlk koddaki ie şartlı koşulu bazı eski ie sürümlerinde bu kodu algılama durumu içindir.

Yukarıdaki tanımlar sadece iPhone’da görünecektir. İşin püf noktasını max-device-width: 480px kısmı oluşturuyor.

Kaynaklar