title: XSS prevention and .innerHTML
body: <p>When I allow users to insert data as an argument to the JS <code>innerHTML</code> function like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>element.innerHTML = “User provided variable”;
  </code></pre>
  
  <p>I understood that in order to prevent XSS, I have to HTML encode, and then JS encode the user input because the user could insert something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src=a onerror='alert();'&gt;
  </code></pre>
  
  <p>Only HTML or only JS encoding would not help because the <code>.innerHTML</code> method as I understood decodes the input before inserting it into the page. With HTML+JS encoding, I noticed that the <code>.innerHTML</code> decodes only the JS, but the HTML encoding remains.</p>
  
  <p>But I was able to achieve the same by double encoding into HTML.</p>
  
  <p>My question is: Could somebody provide an example of why I should HTML encode and then JS encode, and not double encode in HTML when using the <code>.innerHTML</code> method?</p>