title: Chrome Extension CSP - unsafe-eval and unsafe-inline in 3rd party js library and stylesheet
body: <p>Browser - Chrome Version 85.0.4183.102</p>
  <p>There are lot of threads around this topic but I could not find what is the safest and correct way to deal with 3rd party libraries.
  I am using kendo grid (jQuery) in my chrome extension.. it has &quot;unsafe-eval&quot; and &quot;unsafe-inline&quot;... unless I set the below entry in manifest.json its not working.</p>
  <pre><code>&quot;content_security_policy&quot;: &quot;font-src data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; object-src 'self';&quot;
  </code></pre>
  <p>Since its not safest practice.. how can I bypass this with hash or nonce.</p>
  <p>Note: The Kendo library is downloaded and referred from local machine. (No CDN references)</p>
  <p><strong>'unsafe-line'</strong></p>
  <p>When I remove 'unsafe-inline' as expected its giving out 5 errors in my case and providing 5 different sha-256 hashes. I replaced 'unsafe-inline' with 5 hashes but still getting the same error.</p>
  <p>Below is the error when I tried only with 1 hash.</p>
  <p>Refused to apply inline style because it violates the following Content Security Policy directive: &quot;style-src 'self' 'sha256-lzhPGNqxpwmBda/ftMrdga7dSTDWPq2rpjz66R6TVFw='&quot;. Either the 'unsafe-inline' keyword, a hash ('sha256-lzhPGNqxpwmBda/ftMrdga7dSTDWPq2rpjz66R6TVFw='), or a nonce ('nonce-...') is required to enable inline execution.</p>
  <p><strong>'unsafe-eval'</strong></p>
  <p>When I remove 'unsafe-eval' as expected giving out errors with no generated hash to replace.</p>
  <p><strong>'font-src data:'</strong></p>
  <p>yet to attempt to bypass.</p>
  <p>I even tried nonce but did not work.</p>
  <p>am I missing something? or do I need to live with 'unsafe-inline' and 'unsafe-eval'. If yes, what is the potential risk? I am planning to release this extension to public.</p>
  <p>EDIT: I tried sandbox as suggested below.</p>
  <p>Here is what I did.</p>
  <p>index.html</p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link href=&quot;css/iframe.css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;iframe id=&quot;iframe&quot; src=&quot;sandbox.html&quot;&gt;&lt;/iframe&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>sandbox.html has kendo reference <code>&lt;script src=&quot;js/kendo.all.min.js&quot;&gt;&lt;/script&gt;</code></p>
  <p>Here is the manifest.json change</p>
  <pre><code>&quot;sandbox&quot;: {
  &quot;pages:&quot;: [
    &quot;sandbox.html&quot;
  ]},&quot;content_security_policy&quot;: &quot;sandbox allow-scripts allow-same-origin allow-popups;&quot;
  </code></pre>
  <p>I am still getting errors with kendo. Any suggestions?</p>