title: Content Security Policy with Dynamic Button
body: <p>I'm implementing Content Security Policy (CSP) on a site.  Below is the CSP policy that I'm testing.</p>
  
  <pre><code>Content-Security-Policy: script-src 'self' 'nonce-random' 'strict-dynamic';
  </code></pre>
  
  <p>The site uses a third party js script library.  The script library injects dynamic content on a page.  The dynamic content has inline event handlers.  Below is a simple HTML page with a script that mimics the site + the third party library's behavior.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;CSP Test Page&lt;/title&gt;
      &lt;script nonce="random"&gt;
          document.addEventListener('DOMContentLoaded', function (event) {
              var el = document.createElement('button');
              el.innerHTML = 'Click Me';
              el.setAttribute('onclick', "doSomething()");
              document.body.appendChild(el);
          });
  
          function doSomething() {
              alert('I did something.');
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The inline event handlers on the dynamically added button triggers the following error message in the Chrome console:</p>
  
  <blockquote>
    <p>Refused to execute inline event handler because it violates the
    following Content Security Policy directive: "script-src 'self'
    'nonce-random' 'strict-dynamic'".  Either the 'unsafe-inline' keyword,
    a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable
    inline execution.</p>
  </blockquote>
  
  <p>Any suggestions on how to address this issue from a CSP standpoint? I can't change the code of the third party library that is adding the dynamically generated content with the inline event handler.</p>