Model keamanan Aplikasi Chrome tidak mengizinkan konten eksternal dalam iframe dan penggunaan inline
pembuatan skrip dan eval(). Anda dapat mengganti batasan ini, tetapi konten eksternal Anda harus
diisolasi dari aplikasi.
Konten terisolasi tidak dapat langsung mengakses data aplikasi atau API apa pun. Gunakan lintas origin XMLHttpRequest dan pasca-pesan untuk berkomunikasi antara halaman peristiwa dan konten dalam sandbox serta mengakses API secara tidak langsung.
Mereferensikan resource eksternal
Kebijakan Keamanan Konten yang digunakan oleh aplikasi tidak mengizinkan penggunaan berbagai jenis URL jarak jauh, jadi Anda
tidak bisa secara langsung merujuk gambar eksternal, stylesheet, atau font dari laman aplikasi. Sebagai gantinya, Anda dapat
Gunakan XMLHttpRequests lintas origin untuk mengambil resource ini, lalu tayangkan melalui URL blob:.
Persyaratan manifes
Agar dapat melakukan XMLHttpRequests lintas origin, Anda perlu menambahkan izin untuk URL jarak jauh host:
"permissions": [
"...",
"https://supersweetdomainbutnotcspfriendly.com/"
]
XMLHttpRequest lintas origin
Ambil URL jarak jauh ke dalam aplikasi dan tayangkan kontennya sebagai URL blob::
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();
Anda mungkin ingin menyimpan referensi ini secara lokal agar tersedia secara offline.
Menyematkan halaman web eksternal
Tag webview memungkinkan Anda menyematkan konten web eksternal di aplikasi, misalnya, web
kami. Alat ini menggantikan iframe yang mengarah ke URL jarak jauh, yang dinonaktifkan di dalam Aplikasi Chrome. Tidak suka
iframe, tag webview berjalan dalam proses terpisah. Ini berarti bahwa eksploit
di dalamnya akan
tetap diisolasi dan tidak akan bisa
mendapatkan hak istimewa yang ditingkatkan. Selain itu, karena penyimpanannya
(cookie, dll.) diisolasi dari aplikasi, sehingga konten web tidak dapat mengakses
data aplikasi Anda.
Menambahkan elemen webview
Elemen webview Anda harus menyertakan URL ke konten sumber dan menentukan dimensinya.
<webview src="http://news.google.com/" width="640" height="480"></webview>
Memperbarui properti
Untuk mengubah properti src, width, dan height dari tag webview secara dinamis, Anda dapat
tetapkan properti tersebut langsung pada objek JavaScript, atau gunakan fungsi DOM setAttribute.
document.querySelector('#mywebview').src =
'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
'src', 'http://blog.chromium.org/');
Konten lokal sandbox
Sandbox memungkinkan halaman tertentu ditayangkan dalam origin yang unik dan dalam sandbox. Halaman-halaman ini kemudian
dikecualikan dari Kebijakan Keamanan Konten mereka. Halaman dengan sandbox dapat menggunakan iframe, skrip inline, dan
eval(). Lihat deskripsi kolom manifes untuk sandbox.
Namun, ini adalah konsekuensi: halaman dalam sandbox tidak dapat menggunakan Chrome.* atau salah satu dari JSON atau XML API. Jika Anda perlu melakukan
hal-hal seperti
eval(), buka rute ini untuk dikecualikan dari CSP, tetapi Anda tidak akan dapat menggunakan fitur baru yang menarik.
Gunakan skrip inline di sandbox
Berikut adalah contoh halaman dalam sandbox yang menggunakan skrip inline dan eval():
<html>
<body>
<h1>Woot</h1>
<script>
eval('console.log(\'I am an eval-ed inline script.\')');
</script>
</body>
</html>
Sertakan sandbox dalam manifes
Anda harus menyertakan kolom sandbox dalam manifes dan mencantumkan halaman aplikasi yang akan disajikan di
{i>sandbox<i}:
"sandbox": {
"pages": ["sandboxed.html"]
}
Membuka halaman dalam sandbox di jendela
Sama seperti halaman aplikasi lainnya, Anda dapat membuat jendela tempat halaman dengan sandbox dibuka. Berikut adalah contoh yang membuat dua jendela, satu untuk jendela aplikasi utama yang tidak di-sandbox, dan satu untuk jendela aplikasi halaman dengan sandbox:
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
}
});
});
Menyematkan halaman dalam sandbox di halaman aplikasi
Halaman dengan sandbox juga dapat disematkan ke dalam halaman aplikasi lain menggunakan iframe:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I am normal app window.</p>
<iframe src="sandboxed.html" width="300" height="200"></iframe>
</body>
</html>
Mengirim pesan ke halaman dalam sandbox
Ada dua bagian dalam pengiriman pesan: Anda perlu memposting pesan dari halaman/jendela pengirim, dan memproses pesan di halaman/jendela penerima.
Posting pesan
Anda dapat menggunakan postMessage untuk berkomunikasi antara aplikasi dan konten yang di-sandbox. Berikut contohnya
skrip latar belakang yang memposting pesan ke halaman dalam sandbox yang akan dibuka:
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.', '*');
});
});
Secara umum di web, Anda ingin menentukan lokasi asal pengiriman pesan. Aplikasi Chrome tidak memiliki akses ke asal unik konten yang di-sandbox, sehingga Anda hanya dapat mengizinkan semua origin sebagai origin yang dapat diterima ('*'). Dari pihak penerima, Anda biasanya ingin memeriksa asal; tetapi karena konten Aplikasi Chrome telah dimuat, fitur ini tidak diperlukan. Untuk mengetahui informasi selengkapnya, lihat window.postMessage.
Dengarkan pesan dan balasan
Berikut contoh penerima pesan yang ditambahkan ke halaman dalam sandbox:
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);
Untuk mengetahui detail selengkapnya, lihat contoh sandbox.