Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(456)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/app_external.html

Issue 10993029: Extensions Docs Server: Fix headings with no IDs (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 8 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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
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
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>&lt;browser src="http://news.google.com/" width="640" height="480">&lt;/bro wser></pre> 100 <pre>&lt;browser src="http://news.google.com/" width="640" height="480">&lt;/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
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 &lt;html> 147 &lt;html>
148 &lt;body> 148 &lt;body>
149 &lt;h1>Woot&lt;/h1> 149 &lt;h1>Woot&lt;/h1>
150 &lt;script> 150 &lt;script>
151 document.write('I am an inline script.&lt;br>'); 151 document.write('I am an inline script.&lt;br>');
152 eval('document.write(\'I am an eval-ed inline script.\');'); 152 eval('document.write(\'I am an eval-ed inline script.\');');
153 &lt;/script> 153 &lt;/script>
154 &lt;/body> 154 &lt;/body>
155 &lt;/html> 155 &lt;/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 &lt;!DOCTYPE html> 205 &lt;!DOCTYPE html>
206 &lt;html> 206 &lt;html>
207 &lt;head> 207 &lt;head>
208 &lt;/head> 208 &lt;/head>
209 &lt;body> 209 &lt;body>
210 &lt;p>I am normal app window.&lt;/p> 210 &lt;p>I am normal app window.&lt;/p>
211 211
212 &lt;iframe src="sandboxed.html" width="300" height="200">&lt;/iframe> 212 &lt;iframe src="sandboxed.html" width="300" height="200">&lt;/iframe>
213 &lt;/body> 213 &lt;/body>
214 &lt;/html> 214 &lt;/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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698