Contenu externe

Le modèle de sécurité des applications Chrome interdit la présence de contenu externe dans des cadres iFrame et l'utilisation d'éléments intégrés l'écriture de script et eval(). Vous pouvez contourner ces restrictions, mais votre contenu externe doit être isolés de l'application.

Le contenu isolé ne peut accéder directement aux données de l'application ni à aucune API. Utiliser plusieurs origines les requêtes XMLHttpRequest et les messages post-messages pour la communication entre la page de l'événement et le contenu en bac à sable et accéder indirectement aux API.

Référencer des ressources externes

Le Content Security Policy utilisé par les applications interdit l'utilisation de nombreux types d'URL distantes. Vous devez donc ne peuvent pas faire directement référence à des images, feuilles de style ou polices externes depuis la page d'une application. À la place, vous pouvez utiliser des requêtes XMLHttpRequest multi-origines pour récupérer ces ressources, puis les diffuser via des URL blob:.

Exigence du fichier manifeste

Pour exécuter des requêtes XMLHttpRequest multi-origines, vous devez ajouter une autorisation pour l'API distante hôte:

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

XMLHttpRequest multi-origine

Récupérez l'URL distante dans l'application et diffusez son contenu en tant qu'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();

Vous pouvez enregistrer ces ressources localement, afin qu'elles soient disponibles hors connexion.

Intégrer des pages Web externes

La balise webview vous permet d'intégrer du contenu Web externe à votre application (par exemple, une page . Il remplace les iFrames qui pointent vers des URL distantes, qui sont désactivés dans les applications Chrome. Retirer le "J’aime" iFrame, le tag webview s'exécute dans un processus distinct. Cela signifie qu’un exploit à l’intérieur de celui-ci seront toujours isolés et ne seront pas en mesure d’obtenir des privilèges élevés. De plus, comme son stockage (cookies, etc.) est isolé de l'application, le contenu Web ne peut accéder à aucune des les données de l'application.

Ajouter un élément WebView

L'élément webview doit inclure l'URL du contenu source et spécifier ses dimensions.

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

Mettre à jour les propriétés

Pour modifier de façon dynamique les propriétés src, width et height d'un tag webview, vous pouvez : définissez ces propriétés directement sur l'objet JavaScript ou utilisez la fonction DOM setAttribute.

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

Contenu local bac à sable

Le bac à sable permet de diffuser des pages spécifiées dans une origine unique en bac à sable. Ces pages sont ensuite être exempté de leur Content Security Policy. Les pages en bac à sable peuvent utiliser des cadres iFrame, des scripts intégrés eval() Consultez la description du champ du fichier manifeste pour sandbox.

Toutefois, il s'agit d'un compromis: les pages en bac à sable ne peuvent pas utiliser Chrome*. API Si vous avez besoin de faire des choses comme eval(), suivez cette procédure pour être exempté de CSP, mais vous ne pourrez pas utiliser les nouvelles fonctionnalités.

Utiliser des scripts intégrés dans le bac à sable

Voici un exemple de page en bac à sable utilisant un script intégré et eval():

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

Inclure le bac à sable dans le fichier manifeste

Vous devez inclure le champ sandbox dans le fichier manifeste et répertorier les pages de l'application à diffuser dans un Sandbox:

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

Ouvrir une page en bac à sable dans une fenêtre

Comme pour toute autre page d'application, vous pouvez créer une fenêtre dans laquelle la page en bac à sable s'ouvre. Voici un exemple qui crée deux fenêtres, une pour la fenêtre principale de l'application qui n'est pas en bac à sable et une pour page en bac à sable:

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
    }
  });
});

Intégrer une page en bac à sable à la page d'une application

Les pages en bac à sable peuvent également être intégrées à une autre page d'application à l'aide d'un 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>

Envoyer des messages vers des pages en bac à sable

L'envoi d'un message se fait en deux étapes: vous devez le publier depuis la page ou la fenêtre de l'expéditeur, et écouter les messages sur la page/fenêtre de réception.

Publier le message

Vous pouvez utiliser postMessage pour communiquer entre votre application et le contenu de bac à sable. Voici un exemple qui publie un message sur la page en bac à sable qu'il ouvre:

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.', '*');
     });
});

De manière générale, sur le Web, il s'agit de spécifier l'origine exacte à partir de laquelle le message est envoyé. Les applications Chrome n'ont pas accès à l'origine unique du contenu de bac à sable. Vous pouvez donc uniquement toutes les ajouter à la liste d'autorisation en tant qu'origines acceptables ("*"). Du côté de la réception, vous souhaitez généralement vérifier l'origine ; mais comme le contenu des applications Chrome est contenu, ce n'est pas nécessaire. Pour en savoir plus, consultez window.postMessage.

Écouter le message et y répondre

Voici un exemple de destinataire de message ajouté à votre page en bac à sable:

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);

Pour en savoir plus, consultez l'exemple sandbox.