| OLD | NEW |
| 1 <h1 id="import-existing-app"> | 1 <h1 id="import-existing-app"> |
| 2 <span class="h1-step">Step 2:</span> | 2 <span class="h1-step">Step 2:</span> |
| 3 Import an Existing Web App | 3 Import an Existing Web App |
| 4 </h1> | 4 </h1> |
| 5 | 5 |
| 6 <p class="note"> | 6 <p class="note"> |
| 7 <strong>Want to start fresh from here?</strong> | 7 <strong>Want to start fresh from here?</strong> |
| 8 Find the previous step's code in the <a href="https://github.com/mangini/io13-
codelab/archive/master.zip">reference code zip</a> under <strong><em>cheat_code
> solution_for_step1</strong></em>. | 8 Find the previous step's code in the <a href="https://github.com/mangini/io13-
codelab/archive/master.zip">reference code zip</a> under <strong><em>cheat_code
> solution_for_step1</strong></em>. |
| 9 </p> | 9 </p> |
| 10 | 10 |
| (...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 64 | 64 |
| 65 <h2 id="csp-compliance">Make scripts Content Security Policy (CSP) compliant</h2
> | 65 <h2 id="csp-compliance">Make scripts Content Security Policy (CSP) compliant</h2
> |
| 66 | 66 |
| 67 <p>Open the DevTools Console (<strong>right-click > Inspect Element</strong>, th
en select the <strong>Console</strong> tab). You will see an error about refusin
g to execute an inline script:</p> | 67 <p>Open the DevTools Console (<strong>right-click > Inspect Element</strong>, th
en select the <strong>Console</strong> tab). You will see an error about refusin
g to execute an inline script:</p> |
| 68 | 68 |
| 69 <figure> | 69 <figure> |
| 70 <img src="{{static}}/images/app_codelab/csp-console-error.png" alt="Todo app w
ith CSP console log error"> | 70 <img src="{{static}}/images/app_codelab/csp-console-error.png" alt="Todo app w
ith CSP console log error"> |
| 71 <!-- | 71 <!-- |
| 72 <blockquote> | 72 <blockquote> |
| 73 > Refused to execute inline script because it violates the following Content
<br> | 73 > Refused to execute inline script because it violates the following Content
<br> |
| 74 > Security Policy directive: "default-src 'self' chrome-extension-resource:"
. <br> | 74 > Security Policy directive: "default-src 'self'". <br> |
| 75 > Note that 'script-src' was not explicitly set, so 'default-src' is used as
a <br> | 75 > Note that 'script-src' was not explicitly set, so 'default-src' is used as
a <br> |
| 76 > fallback. <br> | 76 > fallback. <br> |
| 77 > index.html:42 | 77 > index.html:42 |
| 78 </blockquote> | 78 </blockquote> |
| 79 --> | 79 --> |
| 80 </figure> | 80 </figure> |
| 81 | 81 |
| 82 <p>Let's fix this error by making the app <a href="/apps/contentSecurityPolicy">
Content Security Policy</a> compliant. | 82 <p>Let's fix this error by making the app <a href="/apps/contentSecurityPolicy">
Content Security Policy</a> compliant. |
| 83 One of the most common CSP non-compliances is caused by inline JavaScript. Examp
les of inline JavaScript include event | 83 One of the most common CSP non-compliances is caused by inline JavaScript. Examp
les of inline JavaScript include event |
| 84 handlers as DOM attributes (e.g. <code><button onclick=''></code>) and <co
de><script></code> tags with | 84 handlers as DOM attributes (e.g. <code><button onclick=''></code>) and <co
de><script></code> tags with |
| (...skipping 654 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 739 <a href="/apps/storage#method-StorageArea-remove" title="Read 'chrome.storag
e.local.remove()' in the Chrome developer docs">chrome.storage.local.remove()</a
> | 739 <a href="/apps/storage#method-StorageArea-remove" title="Read 'chrome.storag
e.local.remove()' in the Chrome developer docs">chrome.storage.local.remove()</a
> |
| 740 <a href="#remove-items" class="anchor-link-icon" title="This feature mention
ed in 'Remove todos items'">↑</a> | 740 <a href="#remove-items" class="anchor-link-icon" title="This feature mention
ed in 'Remove todos items'">↑</a> |
| 741 </li> | 741 </li> |
| 742 <li> | 742 <li> |
| 743 <a href="/apps/storage#method-StorageArea-remove" title="Read 'chrome.storag
e.local.clear()' in the Chrome developer docs">chrome.storage.local.clear()</a> | 743 <a href="/apps/storage#method-StorageArea-remove" title="Read 'chrome.storag
e.local.clear()' in the Chrome developer docs">chrome.storage.local.clear()</a> |
| 744 <a href="#remove-items" class="anchor-link-icon" title="This feature mention
ed in 'Drop all todo items'">↑</a> | 744 <a href="#remove-items" class="anchor-link-icon" title="This feature mention
ed in 'Drop all todo items'">↑</a> |
| 745 </li> | 745 </li> |
| 746 </ul> | 746 </ul> |
| 747 | 747 |
| 748 <p>Ready to continue onto the next step? Go to <a href="app_codelab_alarms.html"
>Step 3 - Add alarms and notifications »</a></p> | 748 <p>Ready to continue onto the next step? Go to <a href="app_codelab_alarms.html"
>Step 3 - Add alarms and notifications »</a></p> |
| OLD | NEW |