Chrome uzantılarında değerlendirmeyi kullanma

Chrome'un uzantı sistemi oldukça katı bir varsayılan İçerik Güvenliği Politikası (İGP) uygular. Politika kısıtlamaları basittir: Komut dosyası, satır dışına taşınarak ayrı JavaScript dosyaları, satır içi etkinlik işleyiciler addEventListener kullanacak şekilde dönüştürülmelidir ve eval() devre dışı bırakıldı. Chrome Uygulamaları'nın daha da sıkı bir politikası vardır ve özellikleri hakkında daha fazla bilgi edinin.

Bununla birlikte, çeşitli kütüphanelerin eval() ve eval benzeri yapıları kullandığının farkındayız: Performans optimizasyonu ve ifade kolaylığı için new Function(). Şablon oluşturma kitaplıkları bu uygulama tarzına çok açıktır. Bazıları (Angular.js gibi) İGP'yi destekler. Çoğu popüler çerçeve, henüz deneme sürümüyle uyumlu olmayan bir mekanizmaya uzantıları eval daha az dünya. Bu nedenle, söz konusu işlev için desteğin kaldırılması daha fazla beklenenden fazla soruna neden olabilir.

Bu dokümanda, bu kitaplıkları projelerinize dahil etmek için güvenli bir mekanizma olarak korumalı alan kullanımı tanıtılmaktadır. hiçbir zaman ödün vermeden kullanabilirsiniz. Kısaca uzantılar terimini kullanacağız ancak ve bu kavram uygulamalar için de aynı şekilde geçerlidir.

Neden korumalı alan kullanmalı?

eval, yürüttüğü bir kod uzantıdaki her şeye erişebildiğinden bu uzantı içinde tehlikeli bir durum eklentisinin yüksek izinli ortamını yönetebilirsiniz. Şunları yapabilecek bir grup güçlü chrome.* API'si mevcuttur: Kullanıcının güvenliğini ve gizliliğini ciddi şekilde etkileme; endişelenmemizin en az olduğu şey basit veri hırsızlığı. Sunulan çözüm, eval ürününün genişletmenin verileri veya uzantının yüksek değerli API'leri. Veri yok, API yok, sorun değil.

Bu işlemi, uzantı paketinin içindeki belirli HTML dosyalarının korumalı alana alınmış olarak listeleyerek gerçekleştiririz. Korumalı alana alınmış bir sayfa yüklendiğinde benzersiz bir kaynağa taşınır ve reddedilir chrome.* API'lerine erişim. Korumalı alana alınmış bu sayfayı bir iframe aracılığıyla uzantımıza yüklersek veya bu iletiler üzerinde bir şekilde işlem yapmasına izin verebilir ve bunun bize geri bildirimlerinizi iletmesini bekleyebilir. yardımcı olur. Bu basit mesajlaşma mekanizması, eval odaklı bir yaklaşımı güvenli bir şekilde dahil etmemiz için ihtiyacımız olan her şeyi bize sağlıyor. kod eklememiz gerekiyor.

Korumalı alan oluşturma ve kullanma.

Doğrudan koda girmek istiyorsanız lütfen korumalı alan oluşturma örnek uzantısını alın ve kapalı'ya dokunun. Herkese açık kullanıcı adlarının üst kısmında oluşturulmuş küçük bir mesajlaşma API'sinin çalışan örneğidir. sadece şablon oluşturma kitaplığıdır ve başlamanız için gereken her şeyi sağlar. Belki tecrübeleri, örneğimize birlikte göz atalım.

Manifest'teki dosyaları listele

Korumalı alan içinde çalışması gereken her dosya, sandbox mülk. Bu önemli bir adımdır ve kolayca unutulabilir. Bu nedenle, korumalı alana alınan dosyanız manifestte listelenir. Bu örnekte, dosyayı akıllı bir şekilde korumalı alana alıyoruz. "sandbox.html" adını içerir. Manifest girişi aşağıdaki gibi görünür:

{
  ...,
  "sandbox": {
     "pages": ["sandbox.html"]
  },
  ...
}

Korumalı alana alınan dosyayı yükle

Korumalı alanlı dosyada ilginç bir şey yapmak için dosyayı uzantının kodu ile düzeltilebilir. Burada, sandbox.html uzantının Etkinlik Sayfası (eventpage.html) üzerinden iframe. eventpage.js kod içerir iframe ve contentWindow üzerinde postMessage yöntemini yürütüyoruz. Mesaj bir nesnedir Şu iki özellik içeren: context ve command. Birazdan her ikisine de değineceğiz.

chrome.browserAction.onClicked.addListener(function() {
 var iframe = document.getElementById('theFrame');
 var message = {
   command: 'render',
   context: {thing: 'world'}
 };
 iframe.contentWindow.postMessage(message, '*');
});

Tehlikeli bir şey yap

sandbox.html yüklendiğinde Gider çubuğu kitaplığını yükler ve bir satır içi oluşturup derler Gidiş Çubuklarının önerdiği şekilde bir şablon oluşturun:

<script src="handlebars-1.0.0.beta.6.js"></script>
<script id="hello-world-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>Hello, !</h1>
  </div>
</script>
<script>
  var templates = [];
  var source = document.getElementById('hello-world-template').innerHTML;
  templates['hello'] = Handlebars.compile(source);
</script>

Bu işlem başarısız olmaz! Handlebars.compile, new Function işlevini kullansa da çalışır. tam olarak beklendiği gibi olduğunda templates['hello'] içinde derlenmiş bir şablon elde ederiz.

Sonucu geri verme

Komutları kabul eden bir mesaj dinleyici oluşturarak bu şablonu kullanıma sunacağız "etkinlik sayfasından". Yapılması gerekenleri belirlemek için iletilen command belgesini kullanırız ( yalnızca görüntüleme değil, şablonlar hazırlıyor mu? Belki bunları belirli bir şekilde?) ve context, oluşturma için doğrudan şablona aktarılır. Oluşturulan HTML etkinlik sayfasına geri gönderilir. Böylece, uzantı daha sonra faydalı bir işlem yapabilir:

<script>
  window.addEventListener('message', function(event) {
    var command = event.data.command;
    var name = event.data.name || 'hello';
    switch(command) {
      case 'render':
        event.source.postMessage({
          name: name,
          html: templates[name](event.data.context)
        }, event.origin);
        break;

      // case 'somethingElse':
      //   ...
    }
  });
</script>

Etkinlik sayfasına dönersek bu mesajı alıp html ile ilgi çekici bir şey yapacağız. iletilmiş olabilir. Bu durumda, Masaüstü Bildirimi üzerinden bunu tekrarlayacağız, ancak bu HTML, uzantının kullanıcı arayüzünün bir parçası olarak güvenli bir şekilde kullanılabilir. Ekleme yöntemi: innerHTML, korumalı alanın tamamen güvenliği ihlal edilse bile önemli bir güvenlik riski oluşturmaz bir kod, zararlı komut dosyası veya eklenti içeriği yerleştiremez ve daha ayrıntılı şekilde ele alacağız.

Bu mekanizma şablon oluşturmayı kolaylaştırır ancak elbette şablon oluşturma ile sınırlı değildir. Herhangi biri katı bir İçerik Güvenliği Politikası altında anında çalışmayan bir kod korumalı alana alınabilir; inç Aslında uzantılarınızın sırayla çalışacak bileşenlerini korumalı alana almak genellikle yararlıdır. ve programınızın her bir parçasını mümkün olan en küçük ayrıcalıklarla ve düzgün şekilde yürütülmesini sağlar. Google'dan Güvenli Web Uygulamaları ve Chrome Uzantıları Yazma sunumu I/O 2012, bu tekniklerin nasıl kullanıldığına dair iyi örnekler veriyor. 2012'de bu teknikle ilgili gerekir.