Harici İçerik

Chrome Uygulamaları güvenlik modeli, iframe'lerdeki harici içeriğe ve satır içi komut dosyası çalıştırma ve eval(). Bu kısıtlamaları geçersiz kılabilirsiniz ancak harici içeriklerinizin uygulamadan izole edilir.

Yalıtılmış içerik, uygulamanın verilerine veya API'lerin hiçbirine doğrudan erişemez. Kaynaklar arası kullan XMLHttpRequests ve mesajlaşma sonrası ileti dizisi, etkinlik sayfası ile korumalı alana alınmış içerik ve dolaylı yoldan erişebilecekler.

Harici kaynaklara başvurma

Uygulamalar tarafından kullanılan İçerik Güvenliği Politikası, pek çok uzak URL türünün kullanılmasına izin vermez. Dolayısıyla, Uygulama sayfasındaki harici resimlere, stil sayfalarına veya yazı tiplerine doğrudan referans veremez. Bunun yerine bu kaynakları getirmek ve ardından blob: URL'leri aracılığıyla sunmak için kaynaklar arası XMLHttpRequests kullanın.

Manifest şartı

Kaynaklar arası XMLHttpRequest istekleri yapabilmek amacıyla uzak URL'lerin barındırıcı:

"permissions": [
    "...",
    "https://supersweetdomainbutnotcspfriendly.com/"
  ]

Kaynaklar arası XMLHttpRequest

Uzak URL'yi uygulamaya getirin ve içeriğini blob: URL'si olarak sunun:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://supersweetdomainbutnotcspfriendly.com/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  var img = document.createElement('img');
  img.src = window.URL.createObjectURL(this.response);
  document.body.appendChild(img);
};

xhr.send();

Bu kaynakları yerel olarak kaydederek çevrimdışıyken kullanabilirsiniz.

Harici web sayfaları yerleştirme

webview etiketi, uygulamanıza harici web içeriği (ör. web) yerleştirmenize olanak tanır. sayfasını ziyaret edin. Chrome Uygulamaları içinde devre dışı bırakılan uzak URL'lere yönlendiren iframe'lerin yerini alır. Beğenmeyi kaldır iframe'lerde, webview etiketi ayrı bir işlemde çalışır. Bu, içindeki bir açıklardan yararlanmanın halen izole edilir ve üst düzey ayrıcalıklar elde edemez. Ayrıca, depolama alanında (çerezler vb.) uygulamadan izole edildiğinden, web içeriğinin uygulama verileri.

Web görünümü öğesi ekle

webview öğeniz, kaynak içeriğin URL'sini içermeli ve boyutlarını belirtmelidir.

<webview src="http://news.google.com/" width="640" height="480"></webview>

Mülkleri güncelle

Bir webview etiketinin src, width ve height özelliklerini dinamik olarak değiştirmek için aşağıdakilerden birini yapabilirsiniz: veya setAttribute DOM işlevini kullanın.

document.querySelector('#mywebview').src =
    'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
    'src', 'http://blog.chromium.org/');

Korumalı alan yerel içeriği

Korumalı alan, belirtilen sayfaların korumalı alana alınmış benzersiz bir kaynakta sunulmasına olanak tanır. Bu sayfalar daha sonra kendi İçerik Güvenliği Politikası'ndan muaf olabilir. Korumalı alanlı sayfalar iframe'ler, satır içi komut dosyaları ve eval() Korumalı alan'ın manifest alanı açıklamasına göz atın.

Yine de bir ödün vermek gerekir: Korumalı alanlı sayfalar Chrome'u kullanamaz.* API'ler. Kafa karışıklığı yaratacak eval(), CSP'den muaf olmak için bu rotaya gidin ancak etkileyici yeni özellikleri kullanamazsınız.

Korumalı alanda satır içi komut dosyaları kullan

Satır içi komut dosyası ve eval() kullanan, korumalı alana alınmış bir sayfa örneği aşağıda verilmiştir:

<html>
  <body>
    <h1>Woot</h1>
    <script>
      eval('console.log(\'I am an eval-ed inline script.\')');
    </script>
  </body>
</html>

Korumalı alanı manifeste dahil et

Manifest'e sandbox alanını dahil etmeniz ve korumalı alan:

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

Korumalı alana alınmış bir sayfayı pencerede açma

Diğer uygulama sayfalarında olduğu gibi, korumalı alana alınan sayfanın içinde açılacağı bir pencere oluşturabilirsiniz. Buradan biri korumalı alana alınmamış ana uygulama penceresi, diğeri de korumalı alana alınmış sayfa:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 400,
      'left': 0,
      'top': 0
    }
  });

  chrome.app.window.create('sandboxed.html', {
    'bounds': {
      'width': 400,
      'height': 400,
      'left': 400,
      'top': 0
    }
  });
});

Korumalı alana alınmış bir sayfayı bir uygulama sayfasına yerleştirme

Korumalı alanlı sayfalar, iframe kullanılarak başka bir uygulama sayfasına da yerleştirilebilir:

<!DOCTYPE html>
<html>
<head>
</head>
  <body>
    <p>I am normal app window.</p>

    <iframe src="sandboxed.html" width="300" height="200"></iframe>
  </body>
</html>

Korumalı alana alınmış sayfalara ileti gönderme

İleti gönderme işlemi iki bölümden oluşur: iletiyi gönderen sayfasından/penceresinden yayınlamanız gerekir, ve alma sayfasındaki/penceresindeki mesajları dinleyin.

Mesajı yayınla

Uygulamanız ile korumalı alandaki içerik arasında iletişim kurmak için postMessage kullanabilirsiniz. İşte bir örnek korumalı alana alınmış sayfaya bir ileti yayınlayan arka plan komut dosyası:

var myWin = null;

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('sandboxed.html', {
    'bounds': {
      'width': 400,
      'height': 400
    }
  }, function(win) {
       myWin = win;
       myWin.contentWindow.postMessage('Just wanted to say hey.', '*');
     });
});

Genel olarak web'de, iletinin gönderildiği tam kaynağı belirtmeniz gerekir. Chrome Uygulamaları, korumalı alana alınan içeriğin benzersiz kaynağına erişim sahibi olmadığından yalnızca tümünü izin verilenler listesine ekleyebilirsiniz kabul edilebilir kaynaklar ("*") olarak belirtin. Alıcı tarafta, genellikle kaynağı kontrol etmeniz gerekir. ancak Chrome Uygulamaları içeriği bulunduğundan buna gerek yoktur. Daha fazla bilgi edinmek için bkz. window.postMessage.

Mesajı dinle ve yanıtla

Korumalı alana alınmış sayfanıza eklenen örnek bir ileti alıcısını aşağıda görebilirsiniz:

var messageHandler = function(event) {
  console.log('Background script says hello.', event.data);

  // Send a reply
  event.source.postMessage(
      {'reply': 'Sandbox received: ' + event.data}, event.origin);
};

window.addEventListener('message', messageHandler);

Daha ayrıntılı bilgi için korumalı alan örneğine göz atın.