title: How to handle content-security-policy (CSP) while injecting iframe into a webpage?
body: <p>I'm attempting to build a chrome browser extension, that whenever the chrome-extension icon is clicked, injects onto the current page an iframe that that then renders inside it an angular application that is packaged into the chrome extension itself (i.e. not from external source). I've got it working except I am unable to get past the CSP violations. </p>
  
  <p>manifest.json </p>
  
  <pre><code>  {
        "manifest_version": 2,
        "name": "My Extension",
        "description": "injects iframe in all pages on command",
        "version": "1.0",
        "permissions": ["storage", "tabs", "debugger", "*://*.google.com/*", "http://*/*", "https://*/*", "notifications"],
        "browser_action": {
          "default_icon": "icon.png",
          "defualt_title": "My Extension"
        },
        "background": {
          "scripts": ["background.js"]
        },
        "content_security_policy": "script-src 'self' https://*.googleapis.com/*; object-src 'self' https://*.googleapis.com/*",
        "web_accessible_resources": [
          "index.html",
          "assets/css/*",
          "assets/js/*",
          "assets/fonts/*"
        ]
      }
  </code></pre>
  
  <p>background.js</p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(activeTab) {
      chrome.tabs.executeScript(null, {file: "contentScript.js"});
  });
  </code></pre>
  
  <p>contentScript.js </p>
  
  <pre><code>'use strict';
  var iframe = document.createElement('iframe');
  iframe.src = chrome.extension.getURL("index.html");
  iframe.id = 'myExtension';
  document.body.appendChild(iframe);
  
  console.log('content script has executed');
  </code></pre>
  
  <p>Then you have your typical index.html for and vanilla Angular application:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;!-- &lt;meta http-equiv="Content-Security-Policy" content="script-src 'self' https://*.googleapis.com/* 'unsafe-eval'; object-src 'self' https://*.googleapis.com/*"&gt; --&gt;
    &lt;title&gt;My Extension&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container-fluid" style="height: 400px; overflow: hidden;"&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
    &lt;/div&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>After building and testing the extension in the browser I get the following errors: </p>
  
  <p><a href="https://i.stack.imgur.com/YB7LD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YB7LD.png" alt="enter image description here"></a></p>
  
  <p>I've researched and researched and none of the answers I've found seem applicable to my particular use case, or CSP is too nuanced for me to understand the applicability of those solutions. Any help resolving this would be legendary!</p>