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 |