Konten Eksternal

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.