Das Sicherheitsmodell für Chrome-Apps verbietet externe Inhalte in iFrames sowie die Verwendung von Inline-Inhalten.
Scripting und eval(). Sie können diese Einschränkungen überschreiben, aber Ihre externen Inhalte müssen
von der App isoliert.
Isolierte Inhalte können nicht direkt auf die Daten der App oder eine der APIs zugreifen. Ursprungsübergreifend verwenden XMLHttpRequests und Post-Nachrichten zur Kommunikation zwischen der Veranstaltungsseite und den in der Sandbox durchgeführten Inhalten. indirekt auf die APIs zugreifen.
Auf externe Ressourcen verweisen
Laut der Content Security Policy von Apps sind viele Arten von Remote-URLs nicht zulässig.
Auf externe Bilder, Stylesheets oder Schriftarten einer App-Seite kann nicht direkt verwiesen werden. Stattdessen können Sie
Verwenden Sie ursprungsübergreifende XMLHttpRequests, um diese Ressourcen abzurufen und stellen Sie sie dann über blob:-URLs bereit.
Manifestanforderung
Um ursprungsübergreifende XMLHttpRequests ausführen zu können, musst du eine Berechtigung für die Host:
"permissions": [
"...",
"https://supersweetdomainbutnotcspfriendly.com/"
]
Ursprungsübergreifende XMLHttpRequest
Rufen Sie die Remote-URL in der Anwendung ab und stellen Sie deren Inhalt als blob:-URL bereit:
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();
Es empfiehlt sich, diese Ressourcen lokal zu speichern, damit sie offline verfügbar sind.
Externe Webseiten einbetten
Mit dem Tag webview können Sie externe Webinhalte in Ihre App einbetten, etwa eine Website
Seite. Sie ersetzt iFrames, die auf Remote-URLs verweisen, die in Chrome-Apps deaktiviert sind. „Mag ich“-Bewertung entfernen
iFrames verwenden, wird das webview-Tag in einem separaten Prozess ausgeführt. Das bedeutet, dass ein Exploit
immer noch isoliert sein
und können keine erhöhten Berechtigungen erlangen. Da die Speicherkapazität
(Cookies usw.) von der App isoliert ist, gibt es keine Möglichkeit für den Webinhalt, auf die
App-Daten.
WebView-Element hinzufügen
Das webview-Element muss die URL zum Quellinhalt enthalten und seine Größe angeben.
<webview src="http://news.google.com/" width="640" height="480"></webview>
Attribute aktualisieren
Wenn du die Eigenschaften src, width und height eines webview-Tags dynamisch ändern möchtest, hast du folgende Möglichkeiten:
Legen Sie diese Eigenschaften direkt im JavaScript-Objekt fest oder verwenden Sie die DOM-Funktion setAttribute.
document.querySelector('#mywebview').src =
'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
'src', 'http://blog.chromium.org/');
Lokale Sandbox-Inhalte
Durch Sandboxing können bestimmte Seiten an einem eindeutigen Sandbox-Ursprung bereitgestellt werden. Diese Seiten werden dann
von ihrer Content Security Policy ausgenommen ist. In einer Sandbox ausgeführte Seiten können iFrames, Inline-Scripting und
eval() Sehen Sie sich die Beschreibung des Manifestfelds für sandbox an.
Dies ist jedoch ein Kompromiss: In einer Sandbox ausgeführte Seiten können den Chrome-Browser nicht verwenden.* APIs Um beispielsweise
eval(), geh wie hier beschrieben von der CSP aus, aber du kannst dann keine coolen neuen Funktionen nutzen.
Inline-Skripts in Sandbox verwenden
Hier ist ein Beispiel für eine Seite in einer Sandbox mit einem Inline-Skript und eval():
<html>
<body>
<h1>Woot</h1>
<script>
eval('console.log(\'I am an eval-ed inline script.\')');
</script>
</body>
</html>
Sandbox in Manifest einschließen
Du musst das Feld sandbox in das Manifest aufnehmen und die App-Seiten angeben, die in einem
Sandbox:
"sandbox": {
"pages": ["sandboxed.html"]
}
In einer Sandbox ausgeführte Seite in einem Fenster öffnen
Wie bei allen anderen App-Seiten können Sie ein Fenster erstellen, in dem die in einer Sandbox ausgeführte Seite geöffnet wird. Hier ist ein Beispiel, das zwei Fenster erstellt, eines für das nicht in einer Sandbox ausgeführte Hauptfenster der App und eines für das in einer Sandbox ausgeführte Seite:
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
}
});
});
In einer Sandbox ausgeführte Seite in eine App-Seite einbetten
In einer Sandbox ausgeführte Seiten können auch mithilfe eines iframe in eine andere App-Seite eingebettet werden:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I am normal app window.</p>
<iframe src="sandboxed.html" width="300" height="200"></iframe>
</body>
</html>
Nachrichten an Seiten senden, die in einer Sandbox ausgeführt werden
Das Senden einer Nachricht besteht aus zwei Teilen: Sie müssen eine Nachricht über die Seite bzw. das Fenster des Absenders posten, und auf Nachrichten auf der Empfängerseite bzw. im empfangenden Fenster warten.
Nachricht posten
Mithilfe von postMessage können Sie zwischen Ihrer App und Inhalten kommunizieren, die in einer Sandbox ausgeführt werden. Hier ein Beispiel
Hintergrundskript, das eine Nachricht an die darin geöffnete Seite in einer Sandbox sendet:
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.', '*');
});
});
Im Web möchten Sie in der Regel den genauen Ursprung angeben, von dem aus die Nachricht gesendet wird. Chrome-Apps haben keinen Zugriff auf den eindeutigen Ursprung von Inhalten in der Sandbox, sodass Sie nur alle auf die Zulassungsliste setzen können Ursprünge als akzeptable Ursprünge ('*'). Auf der Empfängerseite sollten Sie in der Regel den Ursprung überprüfen. Da Chrome-Apps-Inhalte enthalten sind, sind sie jedoch nicht erforderlich. Weitere Informationen finden Sie unter window.postMessage.
Nachrichten abhören und antworten
Hier sehen Sie einen Beispiel-Nachrichtenempfänger, der Ihrer in einer Sandbox ausgeführten Seite hinzugefügt wird:
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);
Weitere Informationen finden Sie im Sandbox-Beispiel.