Model zabezpieczeń Aplikacji Chrome nie zezwala na korzystanie z treści zewnętrznych w elementach iframe ani na używanie elementów w tekście.
i eval(). Możesz obejść te ograniczenia, ale Twoje treści zewnętrzne muszą być
izolowane od aplikacji.
Treść izolowana nie ma bezpośredniego dostępu do danych aplikacji ani żadnych interfejsów API. Używaj zasobów z innych domen XMLHttpRequests i post-komunikaty do komunikacji między stroną zdarzenia a zawartością w piaskownicy pośredniego dostępu do interfejsów API.
Odwoływanie się do zasobów zewnętrznych
Polityka Content Security Policy używana przez aplikacje zabrania używania wielu rodzajów zdalnych adresów URL, więc możesz
nie może odwoływać się bezpośrednio do zewnętrznych obrazów, arkuszy stylów ani czcionek ze strony aplikacji. Zamiast tego możesz:
użyj żądań XMLHttpRequest z innych domen do pobrania tych zasobów, a następnie serwuj je za pomocą adresów URL blob:.
Wymagania dotyczące pliku manifestu
Aby wysyłać żądania XMLHttpRequest z innych domen, musisz dodać uprawnienie dla zdalnych adresów URL host:
"permissions": [
"...",
"https://supersweetdomainbutnotcspfriendly.com/"
]
Żądanie XMLHttpRequest z innych domen
Pobierz zdalny adres URL do aplikacji i wyświetlaj jego zawartość jako adres 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();
Warto zapisać te zasoby lokalnie, aby były dostępne offline.
Umieszczanie zewnętrznych stron internetowych
Tag webview umożliwia umieszczanie w aplikacji zewnętrznych treści z internetu, np. stron internetowych.
stronę. Zastępuje ona elementy iframe wskazujące na zdalne adresy URL, które są wyłączone w aplikacjach Chrome. Nie podoba mi się
iframe, tag webview działa w osobnym procesie. Oznacza to, że znajdujący się w niej kod exploita zostanie
nadal będą odizolowane i nie będą mogli uzyskać podwyższonych uprawnień. Jako że jego miejsce na dane
(pliki cookie itp.) są odizolowane od aplikacji, nie ma więc możliwości uzyskania dostępu do
dane aplikacji.
Dodaj element WebView
Element webview musi zawierać adres URL treści źródłowej oraz określać jej wymiary.
<webview src="http://news.google.com/" width="640" height="480"></webview>
Zaktualizuj właściwości
Aby dynamicznie zmieniać właściwości src, width i height tagu webview, wykonaj jedną z tych czynności
ustaw te właściwości bezpośrednio w obiekcie JavaScriptu lub użyj funkcji setAttribute DOM.
document.querySelector('#mywebview').src =
'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
'src', 'http://blog.chromium.org/');
Treści lokalne z piaskownicy
Podział na piaskownice umożliwia wyświetlanie określonych stron w unikalnym źródle działającym w trybie piaskownicy. Te strony są następnie
są zwolnione z obowiązku Content Security Policy. Na stronach w trybie piaskownicy można używać elementów iframe, wbudowanych skryptów
eval() Zapoznaj się z opisem pola manifestu dla piaskownicy.
Jest to jednak kompromis: strony w piaskownicy nie mogą korzystać z Chrome*. API. Jeśli musisz na przykład:
eval(), wybierz tę trasę, aby być zwolniona z CSP, ale nie będziesz mieć możliwości korzystania z nowych, ciekawych funkcji.
Używanie wbudowanych skryptów w trybie piaskownicy
Oto przykładowa strona w trybie piaskownicy, która korzysta z wbudowanego skryptu i elementu eval():
<html>
<body>
<h1>Woot</h1>
<script>
eval('console.log(\'I am an eval-ed inline script.\')');
</script>
</body>
</html>
Uwzględnij piaskownicę w pliku manifestu
W pliku manifestu musisz umieścić pole sandbox i wymieniać strony aplikacji, które mają być wyświetlane w pliku manifestu
piaskownica:
"sandbox": {
"pages": ["sandboxed.html"]
}
Otwieranie w oknie strony w trybie piaskownicy
Tak jak w przypadku każdej innej strony aplikacji, możesz utworzyć okno, w którym otworzy się strona w trybie piaskownicy. Oto przykład, który tworzy 2 okna: jedno dla głównego okna aplikacji poza piaskownicą, a drugie dla strona w piaskownicy:
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
}
});
});
Umieszczanie strony piaskownicy na stronie aplikacji
Strony w trybie piaskownicy można też umieszczać na innych stronach aplikacji za pomocą tagu 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>
Wysyłanie wiadomości na strony w trybie piaskownicy
Wysyłanie wiadomości składa się z dwóch etapów: musisz opublikować wiadomość ze strony/okna nadawcy, i nasłuchuj wiadomości na stronie/oknie odbierania.
Opublikuj wiadomość
postMessage umożliwia komunikację między aplikacją a treściami w piaskownicy. Oto przykład
skrypt działający w tle, który publikuje wiadomość na otwartej stronie w trybie piaskownicy:
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.', '*');
});
});
W internecie najlepiej jest określić pochodzenie, z którego wiadomość jest wysyłana. Aplikacje Chrome nie mają dostępu do unikalnego źródła treści w trybie piaskownicy, więc możesz dodać tylko do listy dozwolonych jako akceptowalne źródła („*”). Po stronie odbierającej zwykle warto sprawdzić pochodzenie. ale ponieważ zawartość Aplikacji Chrome jest przechowywana, nie jest to konieczne. Więcej informacji: window.postMessage.
Wykryj wiadomość i odpowiedz
Oto przykładowy odbiornik wiadomości, który jest dodawany do strony w trybie piaskownicy:
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);
Więcej informacji znajdziesz w przykładzie dostępnym w narzędziu sandbox.