Link Shim - Facebook Kullanıcılarını Kötü Amaçlı Linklerden Korumak

Facebook site entegrasyon ekibinin üyesi olarak ilk amacım kullanıcıalrı spam veya kötü amaçlı yazılımlardan korumak. Site Entegrasyon Ekibi bu mücadelede bize yardımcı olamsı için bir çok güçlü araç üretti. En önemli araçlardan birise 2008'de yazılan "link shim" olarak adlandırılan sistem. Lİnk shim'in çalışma mantığı şu şekildedir: sitede her link tıklandığında link shim URL adresini kendi içinde bulunan kötü amaçlı url listesinde kontrol eder. Bu listenin içerisnde McAfee, Google, Web of Trust ve Websense'in de listeleri vardır. Eğer url adresinin zararlı olduğunu tespit edersek, hedef sitenin zararlı olabilieceğini gösteren bir ara sayfa gösteriyoruz. Bu ara sayfanın amaçlarından bazıları şunlardır:

İnsanları Korur

Emin olduğumuz (yada şüphelendiğimiz) websitesinin spam veya kötü amaçlı olup olmadığından emin olamlıyız. Tıklama olduğu andan itibaren, çok yönlü bir sınıflandırma yapıyor. Bize ait listenin yanında başka kaynakların kara listesini de geziyor.

Gizliliği ve Kimliği Korur

Bazen facebook'da bulunan URL ler kendi kendine özel içerik barındıryor olabilir. Örneğin, zaman tünelinizde bir çok url bulunabilir. link shim olamdan zaman tünelinizde bulunan bir linke tıkladığınızda tarayıcınız referrer'a 3. taraf site oalrak gönderebilir. linke kime tıkladğı belli olur.

Şuanda, 3üncü taraf gördüğünde bilgileri sızdırmayacak şekilde Url'lerimizi randomize etmek uygulanabilir değil. Bu yüzden link shim'in adres defterini referrer olarak kullanıyoruz.

Çalışma Mantığı Nasıldır?

Peki gerçek te link shim nasıl çalışır? Bu facebook.com/l.php veya facebook.com/l/ ile sonuçlanan son noktadır. İki parametre ile çalışır. (1) Url yönlendirme (2) user-specific hash (kullancıya özel hash). Bu hash olmadan herşey güzel çalışabilirdi. tabiki url in güvenli olduğunu varsayarak url yönlendirseydik. Yine de, user-specific hash'i dahil etemden "open redirector" oalrak adlandırılan bir güvenlik koridoru oluşturabiliyoruz. Rastgele seçilmiş URL'ler yönlendiren bitiş noktası kötü amaçlı linkler tarafından patlatılabilinir. Facebook.com url'ini görülürse, URL in kendi yönlendirmesi oladan sayfaya gğvenmeliler.

Open redirector'dan kaçınmak adına kullancıya özel olan her bir link shim url'i için hash üretiyoruz. Sonra, kullanıcı ara link shim sayfasını doldurunca, hash'in kullanıcı için uyumlu olup olmadığını kontrol eder. Eğer uyumlu ise, kullanıcıyı siteye göndeririz. Eğer değilse uyarı sayfası şu şekilde çıkar.

Good UX

Daha basit bir kullanıcı tecrübesi için, bu link shim linklerini doğrudan siteye ayzmak istemedik. Eğer yapsaydık, linkin üzerine gelindiğinde broser hedef bağlantıyı değil facebook bağlantısını gösterirdi. Bunun üstesindne gelmek için, Lİnki moıdifiye etmeye yarayan onmousedown handler yükledik. Eğer kullanıcı javascirpti kapatırsa bu url'i görebilir.

Read More

Facebook: “Sorry, there was a problem with this link” – should we worry?

Wordpress blog kullanıyor ve Jetpack'in sunduğu WP.com stats (istatistik)'e sahipsseniz Referres kısmında aşağıdaki yeni link gurplarının gürnğm görünmediği kontrol edin:

l.facebook.com – from desktop computers
lm.facebook.com – from mobile devices

Bu linkler Facebook'un normal bağlantılarının extra kaynaklarıdır ce facebook ikonu barındırır. Bu linkler bir şeyleri incelemekte ve bir sorun oluduğunu düşünmekte olduğunu gösterir.

Aslında bunlar sitenizin güvenli olamayabileceğini gösteren facebook'un uyarı sayfalarıdır. Bu mesaj şu şekilde:

Bir hata var

Üzgünüz fakat bu linkle ilgili bir sorun vardı: http://yourdomain.com/post/.

Bu linke devam edebilir veya sayfanıza geri döenbilirsiniz. Unutmayın sadece güvendiğiniz linklere tıklayın

Bu uyarı işleyişi ortalama her 5 linkten 1ine denk geldi. Facebook linlerw .facebook.com veya lm.facebook.com üzerinden yönlendirme yapıyor. Fakat bazen direk yönlendirme yapmak yerine uyarı sayfasını çıkartıyor.

peki neden bu durumu ciddiye almalıyız. Uyarı sadece facebook kullanıcısını linke tıklamasını engellemiyor. click kaybetmek diğer etkilerinin yanında hiçbirşey. uzun dönemde imajınızı zedeleyibilir.

Bu sorunu facebook debugger'da sorgulattım. herşey iyiydi. response code 200. html validation bile kullandım fakat herhangi bir hata çıkmadı.

Spam lerle savaşması için geçenlerde oluşturulan Facebook News Feed ile ilgisi de yoktu. Blogumdan l.facebook.com üzerinden gönderilern postun trafiği yayınlanır yanıynlanmaz Buffer üzerinden dağıtılıyor.

asıl ilginç olan şey ise daha önce söylediğim gibi her 5 clickten biri uyarı sayfasına düşüyor

Olası sebeplerdeb biri (öyle olamsını umut ediyorum) hedef sayfayı doldurmak biraz fazla vakit alıyor. fakat uyarı aslında gözükmez.

“Sorry, there was a problem with this link” sorunu ile ilgili fazla bir bilgi internette yok.

komik olan şey ise google'da cevap aradığınızda Facebook'a ait sayfanın facebook'un güvenmediğini analtan sonuçlar. Uyarı instagram'ın yardım kısmında gösteriliyor. aşşağıda ekran görüntüü mevcut

23.04.2014 tarihinde güncellendi

Jetpack referral kısmın'dan gelen l.facebook.com linkleri uyarı sayfalrını açıyor. postları detaylı bir şekilde kontrol ettim. Farklı fikirler edinmek amacıyla Hem facebook dan direkt tıklayar hemde arkadaşlırımın açmaısını isteyerek.

- farklı kullanıcılar (sadxece facebook sayfa sahipleri ve yönetişcileri değil)
- farklı ip adresleri
- facebook sayfamı beğenmeyen kullanıcılar
- log in olmayan kullanıcılar

Sonuç: Facebook'da uyarı sayfası ile sonuçlanan hiç bir linkle karşılaşmadım.

l.facebook.com parametreleri istatistiklerde 5 Nisan 2014 gibi çıkmaya başladı. Bu Jetpack ve google analtytic'e uygulandı.

içinde çok kod bulunduran Wordpress blogları facebook tartafından potensiyel tehlike olarak algınıyor olabilir. Fark ettiğim bir başka konu ise Google analtic'İn yüklü olduğu Tumbler fotoğraf bloğumda uyarı linklerinin gözükmesi oldu.

Digging more about the issue let find out that since 2008 Facebook is using a set of tools called “link shim”.

2008'den beri uğraşarak facebook'un link shim olarak adlandırılan araçlar kullandığı

genel olarak link shim facebook kullanıcılarını kötü amaçlı url lerden korumak için tasarlandı.

Nasıl çalışır. facebook'a her tıklandığında link shim URL adresini kötü amaçlı linklerin buludnuğu liste de varmı diye kontrol eder (facebook'un kendi içindeki liste). diğer partnerleri ise McAfee, Google, Web of Trust, ve Websense dir.

Eğer kötü amaçlı bir URL ise başka bir sayfa gösteriyoruz.

Eğer kötü amaçlı bir URL ise başka bir sayfa gösteriyoruz.

Yine de, link shim'in asıl yaptığı daha güvenilir dış bağlantılar hazırlamak.

Örneğin kullanıcı HTTP protokolü kullanıyorsa Facebook'tan gelen trafiği tespit eder. HTTTP linkine tıkladığında browser bilinmeyen kaynaktan gelen trafik oalrak tanımlar. Ayrıca link shim doğru referrer kullanmak için kullanılır.

Özetle: Muhtemelen facebook kendi link shim şemasına l.facebook.com olarak istatistikte görünemsini sağlayan yeni bir parametre ekledi ve bu yüzden kullanıcılar uyarı sayfasını göremiyorlar.

Sorun hakkında endişelenmeniz gerektiğini anlamak için 5 Nisan'dan sonra facebook'tan gelen trafiği kontrol edin. eğer azaldıysa, facebook'un yeni link shim parametresinden etkilenmişsiniz demektir.

Read More

Gizliliği Referrers ile Korumak

Geçen hafta Wall street muhabirlerinden biriyle yaptığımız görüşme sonucu reklamlcılarımızın bir takım istenmeyen sorunla karşılaştığımı farkettik. Bu hata reklama tıklandığında gözükmekte.

Ufak bir hatırlatma: bazı durumlarda referrer ziyaret ettiğiniz profilin kullanıcı id'sini ve sizinkini alır. fakat reklama tıklandığı zaman referrer da user IDyi tespit etmenin bir yolu olduğunu fark etmedik. User id'yi referrerdan komple kaldırmak için farklı testler yaptık.

Fakat nadiren oluşan durumlarda Facebook Urlinin yapısı hakkında reklamcı bilinirliği reklama tıklayan kişinin kendi profiline bakıp bakmadığını tespit etmek için referrer kullanılır. bu şeklilde, potensiyel olarak o kişinin user id'sini çıkartmak mümkün. hiç bir reklamcının bunu yaptığına ihtimal vermiyoruz ve bunuı yapmak bizim kurallarımıza aykırıdır.

Ayrıca kişisel bilgileri reklamcılarla paylaşmadğımızı söylemekte fayda var. ve satmıyoruzda. sadece reklamcılar ne tarz kullanıcalara ulaşmak istediklerini seçebiliyorlar.

sektünde ilerisnde bir şeyler yapmak istiyoruz. Artık web tarayıcılar linkleri dış bağlantılı websitelerine (reklamcılar dahil) göndermeden önce referrer linklerden user Id leri komle kaldırdık. son bir kaç ayır bu değişiklikle uğraşıyoruz. Firefox, Chrome, Safari ve Opera'da çalışıyor. İnternet explorer içinse halen bir çözüm arıyoruz.

Aşağıda yapıtğımız değişiklilklerin teknik detaylarını açıkladık ki diğer websiterleri diğer websiteleri eğer isterlerse user id'yi referrer linklerden kaldırsınlar.

Teknik Uygulama

Facebookta insanların sitemizle ve internetin geri kalan kısmıyla nasıl bir etkileşim içinde olduklarını anlıyortuz. Trajik yazım hatasına rağmen, HTTP standard'ının browser tarafından gönderilen "referrrer" header'ı wensitesine kullanıcının onları nasıl bulmak istediklerini saklayan bilgiyi verir.

Referrers: her zaman iyi karşılamazlar

fakat bazen referrerlar doğru yerde olmaz. belkide URL'de kiritk bir veri olduğu için yada site kullanıcının verileri görmesini istemez. Bir çok browser kullanıcıya bu özelliğ kapatmak için seçenekte verirken, kimse de yapmaz ve bir websitesinin browser'a referrer göderme demesininde yolu yoktur.

Kullanıcılarımız bilgilerini korumak adına dış bağlantıalrdan da korumaya çalışıyoruz. Bunun için aşağıdaki öselliklerle çalışan bir redirector yaptık. redirector'un yapması gerekenler:

- her türlü durumda redirect edebilmeli
- kullanıcın tıkladığı sayfanın referrer'ını kaldırmalı
- Facebook.com'da tıklamayı iletmek
- açık bir redirector olmamalı

Bunları güvenli bir şekilde oluşturmak için cross-browser yöntemi tek yöntem değildir. Bu yyüzden bunu açacağız.

Arkladaşlarımız, Web Sayfaları

Bu tartışma amacıyla alttaki 3 web sitesini refer edeceğiz.

A.com/source
A.com/redirect
B.com

Varsayalım ki kullanıcı A.com/source içeriğğine bakıyor ve B.com'a gideceğini belirten bir linke tıklıyor. A.com kullanıcıyı B.com'a öyle bir şeki,lde göndermeyi planlıyoruki B.com kullanıcın A.com'dan geldiğini bilsin. Fakat kullanıcın direkt A.com/source'dan gelidğini gizlemeli. Bu yüzden kullanıcıyı direk B.com'a göndermek yerine kullanıcıyı önce A.com/redirect sayfasına gönderiyor. Bu ekstra adımın bazı yararları var. B.com'un kötğ amaçlı bir yazılım olup olmadığını kontrol edebiliyor. fakat biz buna şimdi değinmicez.

So how can we make this happen? There are number of approaches, each with its own advantages and disadvantages. You can see each approach outlined in the following table, and discussed in detail below it.

Peki bunu nasıl yapıcaz. Bununla ilgili bazı yaklaşımlar mevcut her biri kendi avantajına sahip. alttaki tabloda yaklaşımın taslağını görebilirsiniz.

The 302

En basit yöntem HTTP 3012 Foun response dur ki bir çok browser kullanıcın A.com/source dan geldiğini gösterir.

PHP code:

header('Location:http://B.com’);

Yenilemek

Yönlendirmenin en basit yolalrında biride HTTP 200 response'dur. HTTP Refresh header ise "Refresh:0;URL=http://B.com" şeklindedir. Bu tip yönlendirmenin sonuçöları her browserda farklılık gösterir.

- Firefox, ve Internet Explorer (IE)'de bu tip yönlendirmeler B.com'a gönderilen referr'In blank olmasına neden oalcaktır. Gizlilik için iyidir fakat B.com'un trafiğin nereden geldiğini anlaması adına kötü.

- Opera ve webkit browserlarının (Safari, Chrome, iPhone, ve Android) bu gibi yönlendirmeleri ise mükemmel sonuçlanır. "a.com/redirect" being sent as the referrer to B.com - perfect!

PHP code:
header(‘Refresh:0;URL=http://B.com’);

Meta Yenileme

HTML code:

< meta http-equiv="refresh" content="0;URL=http://B.com" />

Document.location.replace()

Biraz daha trick yapalım. varsayalım ki kullanıcın browser'ı Javascript'i desteklesin, biz HTTP 200 response gönderebilelim ve bir javascirpt kodu 'document.location.replace('http://B.com');' oalrak yanıt versin. bu tip bir yönlendirme bile farklı sonuçlar verir.

***kaynağını hatırlayamadığım bir haber sitesinden çeviridir***

Read More

Javascript Nesne ( OBJE ) Hakkında Herşey

İleri düzey javascript kodlamada en çok ihtiyaç duyulan Objeler yani nesneler bir kaç farklı yapıya ayrılır. Genel türleri Number, String, Boolean, Undefined ve Null iken diğer adları complex data type (karmaşık veri tipi), the Object data type (nesnel veri tipi) dir.
Peki OBJE (Nesne) Tam Olarak Nedir?
Obje konusunda pek kafa karıştırmaya gerek yok. HTML de bulunan unordered list gibi düşünürseniz nesne konusunu kafanızda daha iyi yerleşmiş olur. Bu listede bulunan her bir element property olarak adlandırılır. Dikkat edilmesi gereken husus propery isimleri unique olması gerektiğidir.

var myFirstObject = {isim: "Barış", soysim: "Manço"};

Yukarıda ki örnekte göründüğü gibi isim ve değer ilişkisi söz konusudur. Burada property name 'isim:' ve 'soyisim' dir. Değerleri ise 'Barış' ve 'Manço' dur.
Property değeri string veya number olabilir. Fakat string ve number property name'lerin çağrılma şekli farklıdır.

var kilo = {60: "Zayif", 150:"Obez"};
console.log(kilo.60) // Hata verecektir
// Number gibi bir değere şu şekilde ulaşabilirsiniz
console.log(kilo["60"]); // Zayif değerini verecektir

Reference Data Tipleri ve Primitive Veri Tipleri Referans veri tipleri ve primitive veri tipleri arasındaki fark referans veri tipleri bir referans olarak kayıt edilir. Yani primitive veri tipleri gibi bir değişkene bir değer olarak kayıt edilmez.

// primitive veri tipi string olarak kayediyoruz
var kim = 'Barış';
var digerKim = kim; // digerKim değişkenin değeri kim olarak ayarlandı
kim = 'Manço'; //kim değişkeni değerini değiştirdik
console.log(digerKim); // Barış
console.log(kim); // Manço

'kim' değişkeninin sonradan değiştirilmesine rağmen 'digerKim' değişkeni değeri 'kim' değişkeninin değerini almaya devam etti.

var kim = {isim: "Barış"};
var digerKim = kim;
kim.isim = "Manço";
console.log(digerKim.isim); // Manço
console.log(kim.isim); // Manço

Bu örnekte ise kim objesini digerKim'in içine gönderdik. Fakat değer obje içine depolandığı için sonradan person objesini değiştirince digerKim değişkenide değişti.
Nesne Veri Property'lerinin Sahip Oluduğu Nitelikler Veriyi depolayan her bir veri property'si (data property) sadece name-value (isim-değer) ilişkisine sahip değildir. Default olarak true ayarlanmış üç niteliği (attribute) vardır
Configurable Attribute (Düzenlenebilir Nitelik):
property'nin silinebilir yada değiştirilebilir olup olmadığını belirler.
Enumerable (Sıralanabilir):
property'nin for/in loop döngüsü içine alınıp alınamdığını belirler.
Writable (Yazılabilir):
property'nin değiştirilip değiştirlemeyeceğini belirler.
Obje (Nesne) Oluşturmak
Obje hakkında bu kadar yazdıktan sonra nasıl oluşturulması gerektiğinden bahsetmemek olmaz. Obje oluşturmanın iki yolu vardır.
1 - Literal Object

// Boş Obje Oluştrumak. Sonradan veri çağırmak için iyi yöntem
var ornek1 = {};
// İçinde öğesi bulunan
var ornek2 = {
hayvan: "kopek",
tur: "gold",
yas: 3,
}

2 - Constructor Object Yeni objeleri çağırmak için kullanıldığından dolayı constructor (yapıcı) adını alan nesne oluşturma yöntemidir.

var kopek = new Object ();
kopek.tur = "gold";
kopek.yas= "2";

Objeler diğer veri türleri olan array, number gibi diğer nesneleride kapsar.

Read More

Düzgün CSS Yapısı

RESET

Html elementlerine reset kodu ekleyerek elementlerin arasındaki boşluğu sıfırlayabilirsiniz. Reset kodunu Eric Meyer'in düzenlediği reset kodlarını kullanabilirsiniz. Yada alttaki kodu kullanarak ksıa bi yol izleeyebilirsiniz

* {
    margin: 0px;
    padding: 0px;
}

Fakat bu kodu kullnaırsanız input elementlerini resetleyemezsiniz

ALFABETİK SIRALAMA

Css kodlarını alfabetik sıralamada yaparsanız hem okuması rahat olur hem de daha sonra geri dönüp bakmak istediğinizde aradığınızı kolayca bulabilirsiniz.

#sample1 {
    margin: 0px;
    color: #000;
    background: #fff;
}

#sample2 {
    background: #fff;
    color: #000;
    margin: 0px;
}

Yukarı daki kodları okuduğunuzda eminim ikinci örnek daha anlaşılır gelmiştir.

İSKELET OLUŞTURMA

CSS kodlarınızı yazmadan önce hangi kodun nerede kullanılacağına dair yorumlar yapın. Mesela header elementleri için ayrı bir yer footer için ayrı side bar için ayrı bir yer olsun.

/*****Header*****/

Define all elements in the header

/*****Content*****/

Define all elements in the content area

/*****Footer*****/

Define all elements in the footer

/*****Etc*****/

Continue to define the other sections one by one

Daha detaylı bilgi için

Read More