title: Refused to frame 'https://api.xxx.jp/' because it violates the following Content Security Policy directive: "frame-src 'self'
body: <p>Here we go:
  I am new to google's chrome extension development, so please bear with me.</p>
  
  <p>I have an extension which is giving me the following error:</p>
  
  <blockquote>
    <p>Refused to frame '<a href="https://api.xxx.jp/" rel="noreferrer">https://api.xxx.jp/</a>' because it violates the following Content Security Policy directive: "frame-src 'self' <a href="https://staticxx.facebook.com" rel="noreferrer">https://staticxx.facebook.com</a> <a href="https://twitter.com" rel="noreferrer">https://twitter.com</a> https://*.twimg.com <a href="https://5415703.fls.doubleclick.net" rel="noreferrer">https://5415703.fls.doubleclick.net</a> <a href="https://player.vimeo.com" rel="noreferrer">https://player.vimeo.com</a> <a href="https://pay.twitter.com" rel="noreferrer">https://pay.twitter.com</a> <a href="https://www.facebook.com" rel="noreferrer">https://www.facebook.com</a> <a href="https://ton.twitter.com" rel="noreferrer">https://ton.twitter.com</a> <a href="https://syndication.twitter.com" rel="noreferrer">https://syndication.twitter.com</a> <a href="https://vine.co" rel="noreferrer">https://vine.co</a> twitter: <a href="https://www.youtube.com" rel="noreferrer">https://www.youtube.com</a> <a href="https://platform.twitter.com" rel="noreferrer">https://platform.twitter.com</a> <a href="https://upload.twitter.com" rel="noreferrer">https://upload.twitter.com</a> <a href="https://s-static.ak.facebook.com" rel="noreferrer">https://s-static.ak.facebook.com</a> <a href="https://4337974.fls.doubleclick.net" rel="noreferrer">https://4337974.fls.doubleclick.net</a> <a href="https://8122179.fls.doubleclick.net" rel="noreferrer">https://8122179.fls.doubleclick.net</a> <a href="https://donate.twitter.com" rel="noreferrer">https://donate.twitter.com</a>".</p>
  </blockquote>
  
  <p>My <em>manifest.json</em> file has the following settings regarding <em>Content Security Policy</em>:</p>
  
  <pre><code>{
     "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
     "manifest_version": 2,
  }
  </code></pre>
  
  <p>In my <em>content.js</em> file, I'm calling an api through inside an <em>iframe</em> tag:</p>
  
  <pre><code>&lt;iframe src="'+url+'" name="xxxExtensionsFrame" width="380" height="' + (heightBase - 5) + '" border="0" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The api's <em>url</em> is always in https form.</p>
  
  <ul>
  <li>This extension works for most websites but in some websites like <a href="https://twitter.com/?lang=en" rel="noreferrer">https://twitter.com/?lang=en</a>, it displays a gray pop up box with the error message described above.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/08aIh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/08aIh.png" alt="Gray pop up box"></a>
  Please help me find the solution to this issue.</p>
  
  <p>Here is an example of my extension at work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video class="image-viewer horizontal" poster="https://thumb.gyazo.com/thumb/642_w/_262d5667a035ff8505079ce6994d3c3f-gif.jpg" autoplay="" playsinline="" loop="" style="max-width: 642px; max-height: 100%;"&gt;&lt;source src="https://i.gyazo.com/90701bdda37df8282699208efaa215a5.mp4" type="video/mp4"&gt;&lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is welcome.</p>