OLD | NEW |
---|---|
1 <h1>Embed Content</h1> | 1 <h1>Embed Content</h1> |
2 | 2 |
3 | 3 |
4 <p> | 4 <p> |
5 The <a href="app_architecture.html#security">packaged apps security model</a> di sallows | 5 The <a href="app_architecture.html#security">packaged apps security model</a> di sallows |
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> |
(...skipping 16 matching lines...) Expand all Loading... | |
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="app_csp.html">Content Security Policy</a> used by apps disallows | 30 The <a href="app_csp.html">Content Security Policy</a> used by apps disallows |
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>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 |
41 for the remote URL's host: | 41 for the remote URL's host: |
42 </p> | 42 </p> |
43 | 43 |
44 <pre> | 44 <pre> |
45 "permissions": [ | 45 "permissions": [ |
46 "...", | 46 "...", |
47 "https://supersweetdomainbutnotcspfriendly.com/" | 47 "https://supersweetdomainbutnotcspfriendly.com/" |
48 ] | 48 ] |
49 </pre> | 49 </pre> |
50 | 50 |
51 <h3>Cross-origin XMLHttpRequest</h3> | 51 <h3 id="cross-origin">Cross-origin XMLHttpRequest</h3> |
52 | 52 |
53 <p> | 53 <p> |
54 Fetch the remote URL into the app and serve its contents as a <code>blob:</code> | 54 Fetch the remote URL into the app and serve its contents as a <code>blob:</code> |
55 URL: | 55 URL: |
56 </p> | 56 </p> |
57 | 57 |
58 <pre> | 58 <pre> |
59 var xhr = new XMLHttpRequest(); | 59 var xhr = new XMLHttpRequest(); |
60 xhr.open('GET', 'https://supersweetdomainbutnotcspfriendly.com/image.png', true) ; | 60 xhr.open('GET', 'https://supersweetdomainbutnotcspfriendly.com/image.png', true) ; |
61 xhr.responseType = 'blob'; | 61 xhr.responseType = 'blob'; |
(...skipping 21 matching lines...) Expand all Loading... | |
83 <p> | 83 <p> |
84 The <code>browser</code> tag allows you to embed external web content in your | 84 The <code>browser</code> tag allows you to embed external web content in your |
85 app, for example, a web page. It replaces iframes that point to remote URLs, | 85 app, for example, a web page. It replaces iframes that point to remote URLs, |
86 which are disabled inside packaged apps. Unlike iframes, the | 86 which are disabled inside packaged apps. Unlike iframes, the |
87 <code>browser</code> tag runs in a separate process. This means that an exploit | 87 <code>browser</code> tag runs in a separate process. This means that an exploit |
88 inside of it will still be isolated and won't be able to gain elevated | 88 inside of it will still be isolated and won't be able to gain elevated |
89 privileges. Further, since its storage (cookies, etc.) is isolated from the app, | 89 privileges. Further, since its storage (cookies, etc.) is isolated from the app, |
90 there is no way for the web content to access any of the app's data. | 90 there is no way for the web content to access any of the app's data. |
91 </p> | 91 </p> |
92 | 92 |
93 <h3>Add browser element</h3> | 93 <h3 id="add">Add browser element</h3> |
not at google - send to devlin
2012/09/26 01:57:17
browser_element
cduvall
2012/09/27 23:39:39
Done.
| |
94 | 94 |
95 <p> | 95 <p> |
96 Your <code>browser</code> element must include the URL to the source content | 96 Your <code>browser</code> element must include the URL to the source content |
97 and specify its dimensions. | 97 and specify its dimensions. |
98 </p> | 98 </p> |
99 | 99 |
100 <pre><browser src="http://news.google.com/" width="640" height="480"></bro wser></pre> | 100 <pre><browser src="http://news.google.com/" width="640" height="480"></bro wser></pre> |
101 | 101 |
102 <h3>Update properties</h3> | 102 <h3 id="update">Update properties</h3> |
not at google - send to devlin
2012/09/26 01:57:17
properties?
cduvall
2012/09/27 23:39:39
Done.
| |
103 | 103 |
104 <p> | 104 <p> |
105 To dynamically change the <code>src</code>, <code>width</code> and | 105 To dynamically change the <code>src</code>, <code>width</code> and |
106 <code>height</code> properties of a <code>browser</code> tag, you can either | 106 <code>height</code> properties of a <code>browser</code> tag, you can either |
107 set those properties directly on the JavaScript object, or use the | 107 set those properties directly on the JavaScript object, or use the |
108 <code>setAttribute</code> DOM function. | 108 <code>setAttribute</code> DOM function. |
109 </p> | 109 </p> |
110 | 110 |
111 <pre> | 111 <pre> |
112 document.querySelector('#mybrowser').src = | 112 document.querySelector('#mybrowser').src = |
(...skipping 16 matching lines...) Expand all Loading... | |
129 </p> | 129 </p> |
130 | 130 |
131 <p> | 131 <p> |
132 It's a trade-off though: | 132 It's a trade-off though: |
133 sandboxed pages can't use the chrome.* APIs. | 133 sandboxed pages can't use the chrome.* APIs. |
134 If you need to do things like <code>eval()</code>, | 134 If you need to do things like <code>eval()</code>, |
135 go this route to be exempt from CSP, | 135 go this route to be exempt from CSP, |
136 but you won't be able to use the cool new stuff. | 136 but you won't be able to use the cool new stuff. |
137 </p> | 137 </p> |
138 | 138 |
139 <h3>Use inline scripts in sandbox</h3> | 139 <h3 id="inline_scripts">Use inline scripts in sandbox</h3> |
140 | 140 |
141 <p> | 141 <p> |
142 Here's a sample sandboxed page | 142 Here's a sample sandboxed page |
143 which uses an inline script and <code>eval()</code>: | 143 which uses an inline script and <code>eval()</code>: |
144 </p> | 144 </p> |
145 | 145 |
146 <pre> | 146 <pre> |
147 <html> | 147 <html> |
148 <body> | 148 <body> |
149 <h1>Woot</h1> | 149 <h1>Woot</h1> |
150 <script> | 150 <script> |
151 document.write('I am an inline script.<br>'); | 151 document.write('I am an inline script.<br>'); |
152 eval('document.write(\'I am an eval-ed inline script.\');'); | 152 eval('document.write(\'I am an eval-ed inline script.\');'); |
153 </script> | 153 </script> |
154 </body> | 154 </body> |
155 </html> | 155 </html> |
156 </pre> | 156 </pre> |
157 | 157 |
158 <h3>Include sandbox in manifest</h3> | 158 <h3 id="include_sandbox">Include sandbox in manifest</h3> |
159 | 159 |
160 <p> | 160 <p> |
161 You need to include the <code>sandbox</code> field in the manifest | 161 You need to include the <code>sandbox</code> field in the manifest |
162 and list the app pages to be served in a sandbox: | 162 and list the app pages to be served in a sandbox: |
163 </p> | 163 </p> |
164 | 164 |
165 <pre> | 165 <pre> |
166 "sandbox": { | 166 "sandbox": { |
167 "pages": ["sandboxed.html"] | 167 "pages": ["sandboxed.html"] |
168 } | 168 } |
169 </pre> | 169 </pre> |
170 | 170 |
171 <h3>Opening a sandboxed page in a window</h3> | 171 <h3 id="opening">Opening a sandboxed page in a window</h3> |
172 | 172 |
173 <p> | 173 <p> |
174 Just like any other app pages, | 174 Just like any other app pages, |
175 you can create a window that the sandboxed page opens in. | 175 you can create a window that the sandboxed page opens in. |
176 Here's a sample that creates two windows, | 176 Here's a sample that creates two windows, |
177 one for the main app window that isn't sandboxed, | 177 one for the main app window that isn't sandboxed, |
178 and one for the sandboxed page: | 178 and one for the sandboxed page: |
179 </p> | 179 </p> |
180 | 180 |
181 <pre> | 181 <pre> |
182 chrome.app.runtime.onLaunched.addListener(function() { | 182 chrome.app.runtime.onLaunched.addListener(function() { |
183 chrome.app.window.create('window.html', { | 183 chrome.app.window.create('window.html', { |
184 'width': 400, | 184 'width': 400, |
185 'height': 400, | 185 'height': 400, |
186 'left': 0, | 186 'left': 0, |
187 'top': 0 | 187 'top': 0 |
188 }); | 188 }); |
189 | 189 |
190 chrome.app.window.create('sandboxed.html', { | 190 chrome.app.window.create('sandboxed.html', { |
191 'width': 400, | 191 'width': 400, |
192 'height': 400, | 192 'height': 400, |
193 'left': 400, | 193 'left': 400, |
194 'top': 0 | 194 'top': 0 |
195 }); | 195 }); |
196 }); | 196 }); |
197 </pre> | 197 </pre> |
198 | 198 |
199 <h3>Embedding a sandboxed page in an app page</h3> | 199 <h3 id="embedding">Embedding a sandboxed page in an app page</h3> |
200 | 200 |
201 <p>Sandboxed pages can also be embedded within another app page | 201 <p>Sandboxed pages can also be embedded within another app page |
202 using an <code>iframe</code>:</p> | 202 using an <code>iframe</code>:</p> |
203 | 203 |
204 <pre> | 204 <pre> |
205 <!DOCTYPE html> | 205 <!DOCTYPE html> |
206 <html> | 206 <html> |
207 <head> | 207 <head> |
208 </head> | 208 </head> |
209 <body> | 209 <body> |
210 <p>I am normal app window.</p> | 210 <p>I am normal app window.</p> |
211 | 211 |
212 <iframe src="sandboxed.html" width="300" height="200"></iframe> | 212 <iframe src="sandboxed.html" width="300" height="200"></iframe> |
213 </body> | 213 </body> |
214 </html> | 214 </html> |
215 </pre> | 215 </pre> |
216 | 216 |
217 | 217 |
218 <h2 id="postMessage">Sending messages to sandboxed pages</h2> | 218 <h2 id="postMessage">Sending messages to sandboxed pages</h2> |
219 | 219 |
220 <p> | 220 <p> |
221 There are two parts to sending a message: | 221 There are two parts to sending a message: |
222 you need to post a message from the sender page/window, | 222 you need to post a message from the sender page/window, |
223 and listen for messages on the receiving page/window. | 223 and listen for messages on the receiving page/window. |
224 </p> | 224 </p> |
225 | 225 |
226 <h3>Post message</h3> | 226 <h3 id="post">Post message</h3> |
227 | 227 |
228 <p> | 228 <p> |
229 You can use <code>postMessage</code> to communicate | 229 You can use <code>postMessage</code> to communicate |
230 between your app and sandboxed content. | 230 between your app and sandboxed content. |
231 Here's a sample background script | 231 Here's a sample background script |
232 that posts a message to the sandboxed page it | 232 that posts a message to the sandboxed page it |
233 opens: | 233 opens: |
234 </p> | 234 </p> |
235 | 235 |
236 <pre> | 236 <pre> |
(...skipping 19 matching lines...) Expand all Loading... | |
256 so you can only whitelist all origins | 256 so you can only whitelist all origins |
257 as acceptable origins ('*'). | 257 as acceptable origins ('*'). |
258 On the receiving end, | 258 On the receiving end, |
259 you generally want to check the origin; | 259 you generally want to check the origin; |
260 but since packaged apps content is contained, | 260 but since packaged apps content is contained, |
261 it isn't necessary. | 261 it isn't necessary. |
262 To find out more, | 262 To find out more, |
263 see <a href="https://developer.mozilla.org/en/DOM/window.postMessage">window.pos tMessage</a>. | 263 see <a href="https://developer.mozilla.org/en/DOM/window.postMessage">window.pos tMessage</a>. |
264 </p> | 264 </p> |
265 | 265 |
266 <h3>Listen for message</h3> | 266 <h3 id="listen">Listen for message</h3> |
267 | 267 |
268 <p> | 268 <p> |
269 Here's a sample message receiver | 269 Here's a sample message receiver |
270 that gets added to your sandboxed page: | 270 that gets added to your sandboxed page: |
271 </p> | 271 </p> |
272 | 272 |
273 <pre> | 273 <pre> |
274 var messageHandler = function(e) { | 274 var messageHandler = function(e) { |
275 console.log('Background script says hello.', e.data); | 275 console.log('Background script says hello.', e.data); |
276 }; | 276 }; |
277 | 277 |
278 window.addEventListener('message', messageHandler); | 278 window.addEventListener('message', messageHandler); |
279 </pre> | 279 </pre> |
280 | 280 |
281 <p class="backtotop"><a href="#top">Back to top</a></p> | 281 <p class="backtotop"><a href="#top">Back to top</a></p> |
OLD | NEW |