Chrome Uygulamaları güvenlik modeli, iframe'lerde harici içeriğe ve satır içi komut dosyası kullanımına ve eval() kullanımına izin vermez. Bu kısıtlamaları geçersiz kılabilirsiniz, ancak harici içeriğiniz uygulamadan izole edilmelidir.
Yalıtılmış içerik, uygulamanın verilerine veya API'lerin herhangi birine doğrudan erişemez. Etkinlik sayfası ile korumalı alana alınmış içerik arasında iletişim kurmak ve API'lere dolaylı olarak erişmek için çapraz kaynak XMLHttpRequests ve sonrası mesajlaşmayı kullanın.
Harici kaynaklara referans verme
Uygulamalar tarafından kullanılan İçerik Güvenliği Politikası, çok sayıda uzak URL türünün kullanılmasına izin vermediğinden, bir uygulama sayfasından harici resimlere, stil sayfalarına veya yazı tiplerine doğrudan referans veremezsiniz. Bunun yerine, bu kaynakları getirmek ve ardından blob: URL'leri ile sunmak için çapraz kaynak XMLHttpRequests aracını kullanabilirsiniz.
Manifest gerekliliği
Kaynaklar arası XMLHttpRequests işlemi yapabilmek için uzak URL'nin ana makinesine bir izin eklemeniz gerekir:
"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ı, çevrimdışıyken kullanabilmek için yerel olarak kaydetmek isteyebilirsiniz.
Harici web sayfası yerleştirme
webview etiketi, uygulamanıza harici web içeriği (ör. bir web sayfası) yerleştirmenize olanak tanır. Chrome Uygulamaları içinde devre dışı bırakılmış olan uzak URL'lere işaret eden iframe'lerin yerini alır. iFrame'lerden farklı olarak webview etiketi ayrı bir işlemde çalışır. Bu, içindeki bir kötüye kullanımın hâlâ izole olacağı ve üst düzey ayrıcalıklar elde edemeyeceği anlamına gelir. Ayrıca, depolama alanı (çerezler vb.) uygulamadan izole edildiğinden, web içeriğinin hiçbir uygulama verisine erişmesi mümkün değildir.
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>
Özellikleri güncelleme
Bir webview etiketinin src, width ve height özelliklerini dinamik olarak değiştirmek için bu özellikleri doğrudan JavaScript nesnesinde ayarlayabilir veya setAttribute DOM işlevini kullanabilirsiniz.
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ını sağlar. Daha sonra bu sayfalar İçerik Güvenliği Politikası'ndan muaf olur. Korumalı alana sahip sayfalarda iframe'ler, satır içi komut dosyası ve eval() kullanılabilir. sandbox ile ilgili manifest alanı açıklamasına göz atın.
Ancak bu bir denge kurmaktır: Korumalı alan kapsamındaki sayfalar Chrome'u kullanamaz.* API'ler hakkında daha fazla bilgi edinin. eval() gibi işlemler yapmanız gerekiyorsa CSP'den muaf olmak için bu yolu izleyin ancak yeni özellikleri kullanamazsınız.
Korumalı alanda satır içi komut dosyalarını kullanma
Satır içi komut dosyası ve eval() kullanan, korumalı alana alınmış örnek bir sayfayı burada bulabilirsiniz:
<html>
<body>
<h1>Woot</h1>
<script>
eval('console.log(\'I am an eval-ed inline script.\')');
</script>
</body>
</html>
Manifest'e korumalı alanı dahil et
sandbox alanını manifest dosyasına eklemeniz ve korumalı alanda sunulacak uygulama sayfalarını listelemeniz gerekir:
"sandbox": {
"pages": ["sandboxed.html"]
}
Korumalı alana alınmış bir sayfayı pencerede açma
Diğer uygulama sayfalarında olduğu gibi, korumalı alana alınmış sayfanın açılacağı bir pencere oluşturabilirsiniz. Biri korumalı alana alınmayan ana uygulama penceresi, diğeri de korumalı alana alınmış sayfa için olmak üzere iki pencere oluşturan bir örneği burada görebilirsiniz:
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
}
});
});
Bir uygulama sayfasına korumalı alanlı sayfa 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
Bir ileti göndermenin iki bölümü vardır: Gönderen sayfasından/penceresinden bir ileti yayınlamanız ve iletiyi alıcı sayfada/pencerede dinlemeniz gerekir.
Mesajı yayınla
Uygulamanız ile korumalı alana alınmış içerik arasında iletişim kurmak için postMessage kullanabilirsiniz. Aşağıda, açtığı korumalı alana alınmış sayfaya bir mesaj yayınlayan örnek bir arka plan komut dosyası verilmiştir:
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 kaynağı tam olarak belirtmek istersiniz. Chrome Uygulamaları, korumalı alana alınmış içeriğin benzersiz kaynağına erişemez. Bu nedenle tüm kaynakları yalnızca kabul edilebilir kaynaklar ("*") olarak izin verilenler listesine ekleyebilirsiniz. Alıcı tarafta, genellikle kaynağı kontrol etmek istersiniz; ancak Chrome Uygulamaları içeriği barındırdığı için bu gerekli değildir. Daha fazla bilgi için window.postMessage bölümüne bakın.
Mesajı dinleyip yanıtla
Korumalı alana alınan sayfanıza eklenen örnek bir ileti alıcısı şunlardır:
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 fazla bilgi için sandbox örneğine göz atın.