OLD | NEW |
1 <h1 id="lab_8_web_resources">Access Web Resources</h1> | 1 <h1 id="lab_8_web_resources">Access Web Resources</h1> |
2 | 2 |
3 <p>Chrome Apps have a strict | 3 <p>Chrome Apps have a strict |
4 <a href="contentSecurityPolicy.html">Content Security Policy</a> | 4 <a href="contentSecurityPolicy">Content Security Policy</a> |
5 which will not let the user execute code or load resources that are hosted remot
ely.</p> | 5 which will not let the user execute code or load resources that are hosted remot
ely.</p> |
6 | 6 |
7 <p>Many applications, however, need to be able to load and display content from
a remote location. A News Reader, for example, needs to display remote content i
nline or load and show images from a remote URL.</p> | 7 <p>Many applications, however, need to be able to load and display content from
a remote location. A News Reader, for example, needs to display remote content i
nline or load and show images from a remote URL.</p> |
8 | 8 |
9 <h2 id="loading_external_web_content_into_an_element">Load external web content<
/h2> | 9 <h2 id="loading_external_web_content_into_an_element">Load external web content<
/h2> |
10 | 10 |
11 <p>Sites on the internet are inherently a security risk and rendering arbitrary
web pages directly into your application with elevated privileges would be a pot
ential source of exploits.</p> | 11 <p>Sites on the internet are inherently a security risk and rendering arbitrary
web pages directly into your application with elevated privileges would be a pot
ential source of exploits.</p> |
12 | 12 |
13 <p>Chrome Apps offer developers the ability | 13 <p>Chrome Apps offer developers the ability |
14 to securely render third-party content in the <code><webview></code> tag. | 14 to securely render third-party content in the <code><webview></code> tag. |
15 A <a href="webview_tag.html">webview</a> | 15 A <a href="webview_tag">webview</a> |
16 is like an iframe that you can control with greater flexibility and added securi
ty. | 16 is like an iframe that you can control with greater flexibility and added securi
ty. |
17 It runs in a separate sandboxed process and can't communicate directly with
the application.</p> | 17 It runs in a separate sandboxed process and can't communicate directly with
the application.</p> |
18 | 18 |
19 <p>The <code>webview</code> has a very simple API. | 19 <p>The <code>webview</code> has a very simple API. |
20 From your app you can:</p> | 20 From your app you can:</p> |
21 | 21 |
22 <ul> | 22 <ul> |
23 <li> Change the URL of the <code>webview</code>.</li> | 23 <li> Change the URL of the <code>webview</code>.</li> |
24 <li> Navigate forwards and backward, stop loading and reload.</li> | 24 <li> Navigate forwards and backward, stop loading and reload.</li> |
25 <li> Check if the <code>webview</code> has finished loading and if it is possibl
e, go back and forward in the history stack.</li> | 25 <li> Check if the <code>webview</code> has finished loading and if it is possibl
e, go back and forward in the history stack.</li> |
(...skipping 112 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
138 <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab8_web
resources/angularjs/1_webview">AngularJS 1_webview</a> or | 138 <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab8_web
resources/angularjs/1_webview">AngularJS 1_webview</a> or |
139 <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab8_web
resources/javascript/1_webview">JavaScript 1_webview</a>, | 139 <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab8_web
resources/javascript/1_webview">JavaScript 1_webview</a>, |
140 and launch the app from a new tab.</p> | 140 and launch the app from a new tab.</p> |
141 | 141 |
142 <h2 id="loading_external_images">Load external images</h2> | 142 <h2 id="loading_external_images">Load external images</h2> |
143 | 143 |
144 <p>If you try to add an <code><img></code> tag to your <code>index.html</c
ode>, and point its <code>src</code> attribute to any site on the web, the follo
wing exception is thrown in the console and the image isn't loaded:</p> | 144 <p>If you try to add an <code><img></code> tag to your <code>index.html</c
ode>, and point its <code>src</code> attribute to any site on the web, the follo
wing exception is thrown in the console and the image isn't loaded:</p> |
145 | 145 |
146 <p class="note"><b></b> Refused to load the image 'http://angularjs.org/img/
AngularJS-large.png' because it violates the following Content Security Poli
cy directive: "img-src 'self' data: chrome-extension-resource:"
;.</p> | 146 <p class="note"><b></b> Refused to load the image 'http://angularjs.org/img/
AngularJS-large.png' because it violates the following Content Security Poli
cy directive: "img-src 'self' data: chrome-extension-resource:"
;.</p> |
147 | 147 |
148 <p>Chrome Apps cannot load any external resource directly in the DOM, because of
the <a href="contentSecurityPolicy.html">CSP restrictions</a>.</p> | 148 <p>Chrome Apps cannot load any external resource directly in the DOM, because of
the <a href="contentSecurityPolicy">CSP restrictions</a>.</p> |
149 | 149 |
150 <p>To avoid this restriction, you can use XHR requests, grab the blob correspond
ing to the remote file and use it appropriately. | 150 <p>To avoid this restriction, you can use XHR requests, grab the blob correspond
ing to the remote file and use it appropriately. |
151 For example, <code><img></code> tags can use a blob URL. | 151 For example, <code><img></code> tags can use a blob URL. |
152 Let's change our application to show a small icon in the Todo list if the dr
opped URL represents an image.</p> | 152 Let's change our application to show a small icon in the Todo list if the dr
opped URL represents an image.</p> |
153 | 153 |
154 <h3 id="manifest2">Update manifest</h3> | 154 <h3 id="manifest2">Update manifest</h3> |
155 | 155 |
156 <p>Before you start firing XHR requests, you must request permissions. | 156 <p>Before you start firing XHR requests, you must request permissions. |
157 Since we want to allow users to drag and drop images from any server, | 157 Since we want to allow users to drag and drop images from any server, |
158 we need to request permission to XHR to any URL. | 158 we need to request permission to XHR to any URL. |
(...skipping 281 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
440 <p>The <code>loadImage()</code> method above is not the best solution for this p
roblem, because it doesn't handle errors correctly and it could cache images
in a local filesystem. | 440 <p>The <code>loadImage()</code> method above is not the best solution for this p
roblem, because it doesn't handle errors correctly and it could cache images
in a local filesystem. |
441 We've created the | 441 We've created the |
442 <a href="https://github.com/GoogleChrome/apps-resource-loader">apps-resource-loa
der library</a> | 442 <a href="https://github.com/GoogleChrome/apps-resource-loader">apps-resource-loa
der library</a> |
443 that's much more robust.</p> | 443 that's much more robust.</p> |
444 | 444 |
445 <h2 id="takeaways_">Takeaways</h2> | 445 <h2 id="takeaways_">Takeaways</h2> |
446 | 446 |
447 <ul> | 447 <ul> |
448 <li><p>The <code><webview></code> tag allows you to have a controlled brow
ser inside your app. | 448 <li><p>The <code><webview></code> tag allows you to have a controlled brow
ser inside your app. |
449 You can use it if you have part of your application that is not CSP compatible a
nd you don't have resources to migrate it immediately, for example. | 449 You can use it if you have part of your application that is not CSP compatible a
nd you don't have resources to migrate it immediately, for example. |
450 One feature we didn't mention here is that webviews can communicate with you
r app and vice-versa using asynchronous <a href="app_external.html#postMessage">
postMessages</a>.</p></li> | 450 One feature we didn't mention here is that webviews can communicate with you
r app and vice-versa using asynchronous <a href="app_external#postMessage">postM
essages</a>.</p></li> |
451 <li><p>Loading resources like images from the web is not straightforward compare
d to a standard web page. | 451 <li><p>Loading resources like images from the web is not straightforward compare
d to a standard web page. |
452 But it's not too different from traditional native platforms, where you need
to handle the resource download and, only when it is correctly downloaded, you
can render it in the UI. We have also developed <a href="https://github.com/Goog
leChrome/apps-resource-loader">a sample library</a> to asynchronously handle res
ource loading from XHR calls. Feel free to use it in your projects.</p></li> | 452 But it's not too different from traditional native platforms, where you need
to handle the resource download and, only when it is correctly downloaded, you
can render it in the UI. We have also developed <a href="https://github.com/Goog
leChrome/apps-resource-loader">a sample library</a> to asynchronously handle res
ource loading from XHR calls. Feel free to use it in your projects.</p></li> |
453 </ul> | 453 </ul> |
454 | 454 |
455 <h2 id="you_should_also_read">You should also read</h2> | 455 <h2 id="you_should_also_read">You should also read</h2> |
456 | 456 |
457 <ul> | 457 <ul> |
458 <li><a href="webview_tag.html">Webview Tag API</a> reference</li> | 458 <li><a href="webview_tag">Webview Tag API</a> reference</li> |
459 <li><a href="app_external.html">Embed Content</a> tutorial</li> | 459 <li><a href="app_external">Embed Content</a> tutorial</li> |
460 </ul> | 460 </ul> |
461 | 461 |
462 <h2 id="what_39_s_next_">What's next?</h2> | 462 <h2 id="what_39_s_next_">What's next?</h2> |
463 | 463 |
464 <p>In <a href="app_codelab_10_publishing.html">8 - Publish App</a>, | 464 <p>In <a href="app_codelab_10_publishing">8 - Publish App</a>, |
465 we finish off with instructions on how to publish your app in the Chrome Web Sto
re.</p> | 465 we finish off with instructions on how to publish your app in the Chrome Web Sto
re.</p> |
OLD | NEW |