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.