OLD | NEW |
1 <h1>External Content</h1> | 1 <h1>External Content</h1> |
2 | 2 |
3 | 3 |
4 <p> | 4 <p> |
5 The <a href="app_architecture.html#security">Chrome Apps security model</a> disa
llows | 5 The <a href="app_architecture#security">Chrome Apps security model</a> disallows |
6 external content in iframes and | 6 external content in iframes and |
7 the use of inline scripting and <code>eval()</code>. | 7 the use of inline scripting and <code>eval()</code>. |
8 You can override these restrictions, | 8 You can override these restrictions, |
9 but your external content must be isolated from the app. | 9 but your external content must be isolated from the app. |
10 </p> | 10 </p> |
11 | 11 |
12 <p> | 12 <p> |
13 Isolated content cannot directly | 13 Isolated content cannot directly |
14 access the app's data or any of the APIs. | 14 access the app's data or any of the APIs. |
15 Use cross-origin XMLHttpRequests | 15 Use cross-origin XMLHttpRequests |
16 and post-messaging to communicate between the event page and sandboxed content | 16 and post-messaging to communicate between the event page and sandboxed content |
17 and indirectly access the APIs. | 17 and indirectly access the APIs. |
18 </p> | 18 </p> |
19 | 19 |
20 <p class="note"> | 20 <p class="note"> |
21 <b>API Sample: </b> | 21 <b>API Sample: </b> |
22 Want to play with the code? | 22 Want to play with the code? |
23 Check out the | 23 Check out the |
24 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/sandbox"
>sandbox</a> sample. | 24 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/sandbox"
>sandbox</a> sample. |
25 </p> | 25 </p> |
26 | 26 |
27 <h2 id="external">Referencing external resources</h2> | 27 <h2 id="external">Referencing external resources</h2> |
28 | 28 |
29 <p> | 29 <p> |
30 The <a href="contentSecurityPolicy.html">Content Security Policy</a> used by app
s disallows | 30 The <a href="contentSecurityPolicy">Content Security Policy</a> used by apps dis
allows |
31 the use of many kinds of remote URLs, so you can't directly reference external | 31 the use of many kinds of remote URLs, so you can't directly reference external |
32 images, stylesheets, or fonts from an app page. Instead, you can use use | 32 images, stylesheets, or fonts from an app page. Instead, you can use use |
33 cross-origin XMLHttpRequests to fetch these resources, | 33 cross-origin XMLHttpRequests to fetch these resources, |
34 and then serve them via <code>blob:</code> URLs. | 34 and then serve them via <code>blob:</code> URLs. |
35 </p> | 35 </p> |
36 | 36 |
37 <h3 id="manifest">Manifest requirement</h3> | 37 <h3 id="manifest">Manifest requirement</h3> |
38 | 38 |
39 <p> | 39 <p> |
40 To be able to do cross-origin XMLHttpRequests, you'll need to add a permission | 40 To be able to do cross-origin XMLHttpRequests, you'll need to add a permission |
(...skipping 20 matching lines...) Expand all Loading... |
61 xhr.responseType = 'blob'; | 61 xhr.responseType = 'blob'; |
62 xhr.onload = function(e) { | 62 xhr.onload = function(e) { |
63 var img = document.createElement('img'); | 63 var img = document.createElement('img'); |
64 img.src = window.URL.createObjectURL(this.response); | 64 img.src = window.URL.createObjectURL(this.response); |
65 document.body.appendChild(img); | 65 document.body.appendChild(img); |
66 }; | 66 }; |
67 | 67 |
68 xhr.send(); | 68 xhr.send(); |
69 </pre> | 69 </pre> |
70 | 70 |
71 <p>You may want to <a href="offline_apps.html#saving-locally">save</a> | 71 <p>You may want to <a href="offline_apps#saving-locally">save</a> |
72 these resources locally, so that they are available offline.</p> | 72 these resources locally, so that they are available offline.</p> |
73 | 73 |
74 <h2 id="webview">Embed external web pages</h2> | 74 <h2 id="webview">Embed external web pages</h2> |
75 | 75 |
76 <p class="note"> | 76 <p class="note"> |
77 <b>API Sample: </b> | 77 <b>API Sample: </b> |
78 Want to play with the code? Check out the | 78 Want to play with the code? Check out the |
79 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/browser"
>browser</a> | 79 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/browser"
>browser</a> |
80 sample. | 80 sample. |
81 </p> | 81 </p> |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
120 | 120 |
121 <h2 id="sandboxing">Sandbox local content</h2> | 121 <h2 id="sandboxing">Sandbox local content</h2> |
122 | 122 |
123 <p> | 123 <p> |
124 Sandboxing allows specified pages | 124 Sandboxing allows specified pages |
125 to be served in a sandboxed, unique origin. | 125 to be served in a sandboxed, unique origin. |
126 These pages are then exempt from their Content Security Policy. | 126 These pages are then exempt from their Content Security Policy. |
127 Sandboxed pages can use iframes, inline scripting, | 127 Sandboxed pages can use iframes, inline scripting, |
128 and <code>eval()</code>. | 128 and <code>eval()</code>. |
129 Check out the manifest field description for | 129 Check out the manifest field description for |
130 <a href="manifest/sandbox.html">sandbox</a>. | 130 <a href="manifest/sandbox">sandbox</a>. |
131 </p> | 131 </p> |
132 | 132 |
133 <p> | 133 <p> |
134 It's a trade-off though: | 134 It's a trade-off though: |
135 sandboxed pages can't use the chrome.* APIs. | 135 sandboxed pages can't use the chrome.* APIs. |
136 If you need to do things like <code>eval()</code>, | 136 If you need to do things like <code>eval()</code>, |
137 go this route to be exempt from CSP, | 137 go this route to be exempt from CSP, |
138 but you won't be able to use the cool new stuff. | 138 but you won't be able to use the cool new stuff. |
139 </p> | 139 </p> |
140 | 140 |
(...skipping 147 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
288 | 288 |
289 <pre data-filename="sandboxed.html"> | 289 <pre data-filename="sandboxed.html"> |
290 var messageHandler = function(e) { | 290 var messageHandler = function(e) { |
291 console.log('Background script says hello.', e.data); | 291 console.log('Background script says hello.', e.data); |
292 }; | 292 }; |
293 | 293 |
294 window.addEventListener('message', messageHandler); | 294 window.addEventListener('message', messageHandler); |
295 </pre> | 295 </pre> |
296 | 296 |
297 <p class="backtotop"><a href="#top">Back to top</a></p> | 297 <p class="backtotop"><a href="#top">Back to top</a></p> |
OLD | NEW |