title: In-line javascript: understanding what counts as in-line and what doesn't for a better CSP
body: <p>At the very basic level, I understand that in-line javascript is the following:</p>
  
  <pre><code>&lt;script&gt;prompt()&lt;/script&gt;
  </code></pre>
  
  <p>And this does not count as in-line javascript:</p>
  
  <pre><code>&lt;script src="foo.com/bar.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>However, there's also other places where javascript can live, such as:</p>
  
  <pre><code>&lt;button onclick="prompt()"&gt;
  &lt;form onsubmit="prompt()"&gt;
  &lt;img onerror="prompt()"&gt;
  &lt;style&gt;{something "property":"javascript:prompt()"}&lt;/style&gt;
  </code></pre>
  
  <p>Do all the other places that javascript live also count as in-line javascript?</p>
  
  <p>What is the work-around for this? <a href="https://stackoverflow.com/questions/11737873/why-is-inline-event-handler-attributes-a-bad-idea-in-modern-semantic-html?noredirect=1&amp;lq=1">Inline Event handlers are also a bad practice</a></p>
  
  <p>According to <a href="https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991">this reference</a>, I would have to register event handlers before the closing body. Eg. I would assign each element on the page a specific ID, and AddEventListener on each element.</p>
  
  <p>To make sure that I understand the idea, suppose I have a form - before the end of the body, I would include a javascript file that adds an event listener, so that my HTML would look like this:</p>
  
  <pre><code>&lt;body&gt;
  &lt;form id="theForm" name="theForm" method="POST"&gt;&lt;/form&gt;
  &lt;script src="eventlisteners.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And eventlisteners.js would like this:</p>
  
  <pre><code>var frm = document.getElementById("theForm");
  frm.addEventListener('submit', console.log('foo'))
  </code></pre>
  
  <p>Is this correct? Is it also correct to say that <strong>every HTML inline event listener has a corresponding addEventListener argument?</strong></p>