Bu sayfa, Cloud Translation API ile çevrilmiştir.

Korumalı alana alınmış IFrame'lerde güvenli şekilde oyun oynayın

Mike West

Günümüzün web ortamında zengin bir deneyim oluşturmak, neredeyse kaçınılmaz olarak hiçbir kontrol sahibi olmayan içerikleri ve bileşenleri yerleştirmek için kullanılır. Üçüncü taraf widget'ları etkileşimi artırabilir ve genel ve kullanıcı tarafından oluşturulan içerik bazen daha da önemli hale geliyor. daha fazla içerik sunabilir. Her ikisinden de kaçınmak bir seçenek olmasa da, Her ikisi de sitenizde bir şey BadTM oluşması riskini artırır. Her biri her reklam, her sosyal medya widget'ı, yerleştirdiğiniz her reklam ve saldırı vektörü:

İçerik Güvenliği Politikası (CSP) bu iki tür içerikle ilişkili riskleri azaltabilir: özel olarak güvenilen komut dosyası ve diğer kaynakları beyaz listeye içerik. Bu, doğru yönde atılan büyük bir adımdır ancak burada Çoğu İGP yönergesinin sunduğu koruma ikili özelliktedir: Kaynak izin verilmiyor veya izin verilmiyor. “Ben bu konuda değildim” demenin Eminim bu içerik kaynağına güveniyorum ancak gerçekten çok güzel! Yerleştirme lütfen, ama bunun sitemi bozmasına izin vermeyin."

En Az Ayrıcalık

Esasen, istediğimiz içeriği paylaşmamıza olanak tanıyacak yalnızca işini yapabilmek için gerekli olan minimum düzeyde beceri sunmalıdır. Widget Yeni bir pencere açılması gerekmez, window.open erişimi kaldırılamaz çok kırıldım. Flash gerektirmiyorsa eklenti desteğini kapatmak sorun. En küçük ilkesini izlersek olabildiğince güvende ayrıcalık ve engelleme doğrudan istediğimiz işlevlerle alakalı olmayan tüm özellikleri tıklayın. Sonuçta ortaya çıkan bazı parçaların kullanmaması gereken ayrıcalıklardan yararlanamaz. Google işleve daha o anda erişemezler.

iframe öğeleri, bu tür bir çözüm için iyi bir çerçeve oluşturma yolundaki ilk adımdır. iframe içinde güvenilmeyen bir bileşen yüklemek, ayırmanın bir ölçüsü sağlar ve yüklemek istediğiniz içerik arasında seçim yapın. Çerçeveli içerik sayfanızın DOM'sine veya yerel olarak depoladığınız verilere erişemez veya sayfada rastgele konumlara çizim yapabilmelidir; sınırlı olduğunu çerçevenin dış çizgisi. Yine de, bu ayırma gerçekten sağlam değildir. İçerilen sayfa Yine de rahatsız edici veya kötü amaçlı davranışlar için bazı seçenekler vardır: otomatik oynatma video, eklentiler ve pop-up'lar buz dağının görünen kısmıdır.

iframe öğesinin sandbox özelliği bize, çerçevelenmiş içeriklere yönelik kısıtlamaları sıkılaştırmak için ihtiyacımız olan her şeyi sunuyor. Google'da tarayıcıya belirli bir karenin içeriğini düşük ayrıcalıkla yükleme talimatı verir belirli işlemleri gerçekleştirmek için yalnızca belirli bir kısmın net bir şekilde tanımlamalısınız.

Değişiklik yap, ama doğrula

Twitter'ın "Tweet'i" düğmesi, daha iyi hizmet verebilmesi için güvenli bir şekilde sitenize yerleştirilmelidir. Twitter, her oturumda iFrame aracılığıyla düğme aşağıdaki kodla değiştirin:

<iframe src="https://platform.twitter.com/widgets/tweet_button.html"
        style="border: 0; width:130px; height:20px;"></iframe>

Neleri kilitleyebileceğimizi anlamak için, hangi özellikleri göstereceğim. Çerçeveye yüklenen HTML, Twitter'ın sunucularından JavaScript'i kullanır ve tweetlemek arayüzü. Bu arayüzün Twitter'ın tweet'i doğru hesaba bağlamak için çerezler ve göndermeniz gerekiyor. Hepsi bu kadar; çerçevenin veya herhangi bir eklenti yüklediğinizde üst düzey pencereye gitmesi veya başka pek çok işlevi vardır. Bu ayrıcalıklara ihtiyaç olmadığından karenin içeriğini korumalı alana alarak kaldıralım.

Korumalı alan, bir beyaz liste temel alınarak çalışır. İlk adımda tüm izin verebilir ve ardından tek tek ekleyerek özellikleri tek tek korumalı alan yapılandırmasına belirli işaretler. Twitter widget'ı için JavaScript, pop-up'lar, form gönderme ve twitter.com'un etkinleştirilmesine karar verildi. çerezler. Bunu,sandboxiframe şu değer:

<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
    src="https://platform.twitter.com/widgets/tweet_button.html"
    style="border: 0; width:130px; height:20px;"></iframe>

Bu kadar basit. Çerçevenin ihtiyacı olan tüm özellikleri sağladık ve eklemediğimiz ayrıcalıklardan herhangi birine erişimini sandbox özelliğinin değeri aracılığıyla açıkça izin verebilir.

Özellikler Üzerinden Ayrıntılı Kontrol

Yukarıdaki örnekte olası korumalı alan işaretlemelerinden birkaçını gördük. Şimdi ve özelliğin iç işleyişini biraz daha ayrıntılı bir şekilde inceleyelim.

Korumalı alan özelliği boş olan bir iframe göz önünde bulundurulduğunda, çerçeveli doküman tamamen korumalı alana alınır ve ilgili doküman, şu kısıtlamalara tabidir:

JavaScript, çerçeveli dokümanda yürütülmeyecek. Bu rapor, Komut dosyası etiketleri ve aynı zamanda satır içi etkinlik işleyiciler aracılığıyla açıkça yüklenen JavaScript ve JavaScript: URL'ler. Bu aynı zamanda, noscript etiketlerinde bulunan içeriğin kullanıcı komut dosyasını bizzat devre dışı bırakmış gibi görünür.
Çerçeveli doküman benzersiz bir kaynağa yüklenir. Yani, aynı kaynak kontrolleri başarısız olur. bir kaynak herhangi bir kaynakla hiçbir zaman . Diğer etkilerinin yanı sıra bu, belgede herhangi bir kaynağın çerezlerinde veya diğer depolama mekanizmalarında depolanan verilere erişim (DOM depolama alanı, Dizine eklenmiş veritabanı vb.).
Çerçeveli doküman yeni pencereler veya iletişim kutuları oluşturamaz (window.open veya target="_blank").
Formlar gönderilemiyor.
Eklentiler yüklenmiyor.
Çerçeveli doküman yalnızca kendi içinde gezinebilir, en üst düzey dokümanına erişemez. window.top.location ayarlandığında bir istisna uygulanır ve target="_top" geçerliliğini yitirmez.
Otomatik olarak tetiklenen özellikler (otomatik odaklı form öğeleri, otomatik oynatma videolar vb.) engellenir.
İşaretçi kilidi alınamıyor.
seamless özelliği, çerçeveli dokümanın içerdiği iframes öğesinde yoksayılıyor.

Bu oldukça acımasız ve tamamen korumalı iframe içinde yüklenmiş bir doküman gerçekten çok az risk teşkil ediyor. Elbette bunun değeri çok büyük değildir. bir miktar statik içerik için tam bir korumalı alan rahatlatmak isteyeceksiniz.

Eklentiler dışında bu kısıtlamaların her biri korumalı alan özelliğinin değerine bir işaret ekleyerek. Korumalı alana alınan dokümanlar eklentiler, korumalı alana alınmamış yerel kod olduğundan eklentileri çalıştırabilirsiniz, ancak geri kalan her şey normaldir. oyun:

allow-forms form göndermeye izin verir.
allow-popups, (şok!) pop-up'lara izin verir.
allow-pointer-lock işaretçinin kilitlenmesine (şaşırtıcı!) izin verir.
allow-same-origin, dokümanın kaynağını korumasına izin verir; sayfa yüklendi https://example.com/ adlı kaynak, söz konusu kaynağın verilerine erişmeye devam edecek.
allow-scripts, JavaScript'in yürütülmesine izin verir ve özelliklerin şunları yapmasına olanak tanır: otomatik olarak tetiklenir (JavaScript aracılığıyla uygulanması önemsiz olacağından).
allow-top-navigation, dokümanın kareden şu ölçüte göre ayrılmasına olanak tanır: üst düzey pencereye gidiliyor.

Bunları göz önünde bulundurarak, bu özel soruna neden tam olarak yukarıdaki Twitter örneğinde bulunan korumalı alan işaretleri grubu:

Çerçeveye yüklenen sayfa bir miktar çalıştırdığından allow-scripts gereklidir Kullanıcı etkileşimini ele alan JavaScript.
Düğme yeni bir tweet formu açtığı için allow-popups gereklidir. penceresini kapatın.
Tweet formunun gönderilebilir olması gerektiğinden allow-forms zorunludur.
Aksi takdirde twitter.com çerezlerinin kullanımı için allow-same-origin gereklidir erişilememiştir ve kullanıcı formu göndermek için giriş yapamamıştır.

Unutulmaması gereken önemli bir nokta, bir kareye uygulanan korumalı alan flag'lerinin de korumalı alanda oluşturulan tüm pencerelere veya çerçevelere uygulanır. Bu, daha önce (form yalnızca mevcut olsa bile) allow-forms öğesini karenin korumalı alanına ekleyin çerçevenin göründüğü pencerede görünmesini sağlar.

sandbox özelliği etkinken, widget yalnızca Eklentiler, üst gezinme ve işaretçi kilidi gibi özellikler{/0} engellendi. Widget'ı, olumsuz bir etki bırakmadan yerleştirme riskini azalttık. İlgili herkes için bu bir avantajdır.

Ayrıcalık Ayırma

Güvenilir olmayan kodlarını çalıştırmak üzere üçüncü taraf içeriklerini korumalı alana almak için bunun oldukça faydalı olduğu açıktır. Peki ya sahip olmalı mı? Kendinize güveniyorsunuz, değil mi? Peki, korumalı alan kullanımı neden önemli?

Bu soruyu ters döneceğim: Kodunuz eklentiye ihtiyaç duymuyorsa niye nasıl erişebilirim? En iyi ihtimalle hiçbir zaman kullanmadığınız bir ayrıcalıktır, saldırganların kapıya girmesine yol açacak bir potansiyel vektör oluşturmuştur. Herkesin kodları ve neredeyse her uygulama bir şekilde kötüye kullanıma karşı savunmasızdır veya başka bir tane oluşturun. Kendi kodunuzu korumalı alana almak, bir saldırgan başarılı olsa bile uygulamanızı bozduğunda, kendisine verilen uygulama için tam Uygulamanın kaynağı; uygulamanın yalnızca uygulama tarafından yapabildiği işlemleri öğreteceğim. Hâlâ kötü ama olabildiğince kötü değil.

Uygulamanızı farklı bölümlere ayırarak riski daha da azaltabilirsiniz. mümkün olan minimum ayrıcalıkla her parçayı korumalı alana almak istiyor. Bu teknik, yerel kodda çok yaygındır: Örneğin Chrome kendini bozar yerel sabit diske erişimi olan yüksek ayrıcalıklı bir tarayıcı işlemine ağ bağlantıları ve düşük ayrıcalıklı pek çok oluşturucu işlemini gerçekleştirebilir. güvenilir olmayan içeriği ayrıştırmanın ağır yükünü üstlenin. Oluşturucuların tarayıcı onlara gereken tüm bilgileri sağlayarak oluşturmak için kullanabilirsiniz. Akıllı bir bilgisayar korsanı oluşturucuyu bozmanın bir yolunu bulsa bile içerik oluşturucunun kendi başına pek fazla ilgi duymadığından emin olun: tüm yüksek ayrıcalıklı erişimler, tarayıcı işlemine göre yönlendirilmelidir. Saldırganların sistemin farklı parçalarında birkaç delik bulması gerekir ve bu da başarılı bir şekilde zarar verme riskini önemli ölçüde azaltır.

`eval()` uygulamasını güvenli bir şekilde korumalı alana alma

Korumalı alan kullanarak postMessage API, web'de uygulanması oldukça basittir. Parçaları uygulamanız, korumalı alana alınan iframe'lerde kalabilir ve üst doküman, bir aracı iletişim kurmak için kullanabilir. tıklayın. Bu tür bir yapı, firmanın herhangi bir parçasındaki suistimallerin uygulamasının mümkün olan en az zararı vermesine yardımcı olur. Ayrıca, daha önce bahsettiğimiz gibi, net entegrasyon noktaları oluşturun. Böylece, olmanız gereken noktaları tam olarak emin olun. Şimdi oyuncak örneğine bakalım. görmek için sabırsızlanıyorum.

Evalbox, heyecan verici bir uygulama. JavaScript olarak değerlendiren bir dizeyi alır ve bu dizeyi JavaScript olarak değerlendirir. Vay canına, değil mi? Sadece ne siz bu kadar yıldır bekliyorsunuz. Oldukça tehlikeli rastgele JavaScript çalıştırmasına izin vermek, elbette Kaynakların sunduğu tüm veriler toplanabilir. Aynı zamanda, Bad ThingsTM, kodun bir korumalı alan içinde yürütülmesini sağlayarak Bu da onu oldukça güvenli hale getiriyor. Şuradaki kodu işleyeceğiz: çerçevenin içeriğinden başlayarak içeri doğru:

<!-- frame.html -->
<!DOCTYPE html>
<html>
    <head>
    <title>Evalbox's Frame</title>
    <script>
        window.addEventListener('message', function (e) {
        var mainWindow = e.source;
        var result = '';
        try {
            result = eval(e.data);
        } catch (e) {
            result = 'eval() threw an exception.';
        }
        mainWindow.postMessage(result, event.origin);
        });
    </script>
    </head>
</html>

Çerçevenin içinde yalnızca iletileri dinleyen minimal bir belgemiz var. window nesnesinin message etkinliğine bağlayarak üst öğesinden. Üst öğe iframe'in içeriğinde postMessage yürüttüğünde, bu etkinlik ve üstümüzün erişmemizi istediği dizeye erişim sağlayarak tetiklenir yardımcı olur.

İşleyicide, etkinliğin üst öğe olan source özelliğini alırız. penceresini kapatın. Kararı aldığımızda bu yoğun çalışmalarımızın sonucunu tekrar tamamlandı. Ardından, bize verilen verileri ileterek işin zor kısmını biz hallederiz. eval() Bu görüşme, yasaklanan işlemler olarak bir deneme bloğunda sonlandırıldı içinde yer alan bir iframe, sıklıkla DOM istisnaları oluşturur; görüşürüz ve arkadaşça bir hata mesajı gönderin. Son olarak da sonuçları üst pencereye geri dönelim. Bu oldukça basit bir iş.

Üst öğe de benzer şekilde karmaşık değildir. textarea ile küçük bir kullanıcı arayüzü oluşturacağız ve yürütme için button kullanılacak. frame.html öğesini bir korumalı alana alınan iframe, yalnızca komut dosyasının yürütülmesine izin veriyor:

<textarea id='code'></textarea>
<button id='safe'>eval() in a sandboxed frame.</button>
<iframe sandbox='allow-scripts'
        id='sandboxed'
        src='frame.html'></iframe>

Şimdi yürütme planı hazırlayacağız. Önce bu soruların yanıtlarını iframe ve alert() olarak kullanıcılarımıza sunuyor. Muhtemelen gerçek bir uygulama daha az rahatsız edici bir şey yapar:

window.addEventListener('message',
    function (e) {
        // Sandboxed iframes which lack the 'allow-same-origin'
        // header have "null" rather than a valid origin. This means you still
        // have to be careful about accepting data via the messaging API you
        // create. Check that source, and validate those inputs!
        var frame = document.getElementById('sandboxed');
        if (e.origin === "null" &amp;&amp; e.source === frame.contentWindow)
        alert('Result: ' + e.data);
    });

Daha sonra, button üzerindeki tıklamalara bir etkinlik işleyici bağlayacağız. Kullanıcı tıkladığınızda textarea öğesinin mevcut içeriğini alır ve yürütme çerçevesi:

function evaluate() {
    var frame = document.getElementById('sandboxed');
    var code = document.getElementById('code').value;
    // Note that we're sending the message to "*", rather than some specific
    // origin. Sandboxed iframes which lack the 'allow-same-origin' header
    // don't have an origin which you can target: you'll have to send to any
    // origin, which might alow some esoteric attacks. Validate your output!
    frame.contentWindow.postMessage(code, '*');
}

document.getElementById('safe').addEventListener('click', evaluate);

Kolay, değil mi? Çok basit bir değerlendirme API'si oluşturduk ve bundan emin olabiliriz. değerlendirilen kodun çerezler gibi hassas bilgilere erişimi olmaması veya DOM depolama alanı. Benzer şekilde, değerlendirilen kod eklentileri yükleyemez, yeni pencereler açamaz, rahatsız edici veya kötü amaçlı bir etkinlikten kaçının.

Monolitik uygulamaları bölümlere ayırarak aynısını kendi kodunuz için de yapabilirsiniz. tek amaca yönelik bileşenlerdir. Her biri basit bir mesajlaşma API'sinde tam olarak bunu yapabilirsiniz. Yüksek ayrıcalıklı üst pencere ve bu görevlerin her birinin, sahip olduğu belirli modüllere mesaj göndererek işini yapmak, sonuçları dinlemek ve en iyi şekilde her modülün yalnızca gereken bilgiyle iyi beslenmesini sağlar.

Bununla birlikte, çerçeveli içeriklerle çalışırken çok dikkatli olmanız gerektiğini unutmayın. gelen bir öğedir. Bir sayfa https://example.com/, aynı kaynaktaki başka bir sayfayı korumalı alan ile çerçeveler hem allow-same-origin hem de allow-scripts işaretlerini içeren bir değere sahipse çerçeveli sayfa üst öğeye erişebilir ve korumalı alan özelliğini kaldırabilir kullanabiliyoruz.

Korumalı alanda oynayın

Korumalı alan artık çeşitli tarayıcılarda kullanılabilir: Firefox 17+, ve Chrome'un yazıldığı sırada (elbette IE10+ ve Chrome'un güncel destek tablosuna bakın). sandbox uygulanıyor özelliği, eklediğiniz iframes özelliğine belirli ayrıcalıklar vermenize olanak tanır. içerik sunmalı ve yalnızca bu ayrıcalıktan yararlanması için gereken ayrıcalıkları düzgün şekilde çalışmasını sağlamalısınız. Bu size riski azaltma fırsatı sunar. üçüncü taraf içeriğin dahil edilmesiyle ilişkili olan, ancak birinci taraf verileri, İçerik Güvenliği ile zaten mümkün Politika.

Ayrıca, korumalı alan kullanımı, zekice oluşturulmuş bir algoritmanın riski azaltan güçlü bir tekniktir. saldırgan, kendi kodunuzdaki deliklerden yararlanabilir. Bir korumalı alana alınmış bir grup hizmete monolitik uygulamanın her biri bağımsız işlevlerden oluşan küçük bir yığın hâlindeyken, saldırganlar yalnızca belirli karelerin güvenliğini ihlal etmek" aynı zamanda denetleyicileridir. Bu, özellikle de kumanda büyük ölçüde azaltılabileceğinden, daha zor bir iş kapsam dışı görülür. Söz konusu kodu denetlemeniz için gerekli koşulları diğer konularda tarayıcıdan yardım isteyin.

Bu, korumalı alanın internet güvenliği. Derinlemesine bir savunma sağlıyor ve üzerinde kontrol sahibi olan kullanıyorsanız, tüm uygulamalar için tarayıcı desteğine (kullanıcılarınızın istemcilerini, kurumsal bir ortam, (yaşasın!) irdeleyelim. Bir gün... Ancak şimdilik, korumalı alana almak için güçlü bir koruma sağlayamamasına rağmen, sizi korumak için siz de güvenebilirsiniz. Yine de katmanlar mükemmel. Bunu bir.

Diğer Okumalar

"HTML5 Uygulamalarında Ayrıcalık Ayırma" küçük bir çerçeve tasarımı üzerinde çalışan ilginç bir makaledir. ve mevcut üç HTML5 uygulamasına uygulanmasını sağlar.
Korumalı alan oluşturma, diğer iki yeni iframe ile birleştirildiğinde daha da esnek olabilir özellikler: srcdoc, ve seamless. Birincisi, bir kareyi Google Cloud'un kendisinde bir HTTP isteğidir; ikincisi ise stilin çerçeveli içeriğe akmasına olanak tanır. Her ikisinin de şu an için oldukça kötü bir tarayıcı desteği var (Chrome ve WebKit gecelik). ancak gelecekte ilginç bir kombinasyon olacak. Her şeyi, Örneğin, aşağıdaki kod aracılığıyla bir makaleye korumalı alan yorumları denir:
```
    <iframe sandbox seamless
            srcdoc="<p>This is a user's comment!
                       It can't execute script!
                       Hooray for safety!</p>"></iframe>
```