Injecting iframe into page with restrictive Content Security Policy

by

The inability to insert an external iframe in Chrome is a bug (crbug.com/408932).

If you want to embed an external frame in an external website, then it must be loaded in a frame that is packaged with your extension.

manifest.json

{
    "name": "Embed external site",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["contentscript.js"],
        "matches": ["*://*/*"],
        "all_frames": true
    }],
    "web_accessible_resources": [
        "frame.html"
    ]
}

Do NOT use chrome.tabs.onUpdated + chrome.tabs.executeScript if you want a content script to always be inserted in a document. Your implementation is flawed and can cause the script to be run multiple times. Instead, you should declare the content script in the manifest file.

(remove "all_frames": true if you don’t want to insert the frame in every subframe.)

contentscript.js

// Avoid recursive frame insertion...
var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
if (!location.ancestorOrigins.contains(extensionOrigin)) {
    var iframe = document.createElement('iframe');
    // Must be declared at web_accessible_resources in manifest.json
    iframe.src = chrome.runtime.getURL('frame.html');

    // Some styles for a fancy sidebar
    iframe.style.cssText="position:fixed;top:0;left:0;display:block;" +
                           'width:300px;height:100%;z-index:1000;';
    document.body.appendChild(iframe);
}

frame.html

<style>
html, body, iframe, h2 {
    margin: 0;
    border: 0;
    padding: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    background: white;
    color: black;
}
h2 {
    height: 50px;
    font-size: 20px;
}
iframe {
    height: calc(100vh - 50px);
}
</style>
<h2>Displaying https://robwu.nl in a frame</h2>
<iframe src="https://robwu.nl/"></iframe>

It is important to observe that I loaded an https site in the frame. If you attempt to load an HTTP site in the frame, then the mixed content policy will block the frame from being loaded if one of the parent frames is an https page.

Replace https://robwu.nl/ with http://example.com/ and the frame will remain blank on https pages such as https://github.com. Simultaneously, the following message will be printed to the console.

[blocked] The page at 'https://github.com/' was loaded over HTTPS, but ran insecure content from 'http://example.com/': this content should also be loaded over HTTPS

More Related Contents:

  1. How to open the correct devtools console to see output from an extension script?
  2. The Chrome extension popup is not working, click events are not handled
  3. Access global js variables from js injected by a chrome extension
  4. Custom protocol handler in chrome
  5. Port error while changing chrome extension from manifest v1 to v2
  6. Firefox extension .xpi file structure: description, contents, creation, and installation
  7. Optionally inject Content Script
  8. Service worker registration failed. Chrome extension
  9. Console shows error about Content Security policy and lots of failed GET requests
  10. Permission ” is unknown or URL pattern is malformed
  11. Registering a custom element from a chrome extension
  12. Manifest v3 Resources must be listed in the web_accessible_resources
  13. Content-Security-Policy error in google chrome extension making
  14. How to inject javascript into Chrome DevTools itself
  15. Get JSON in a Chrome extension
  16. chrome extension: how to send ‘keydown’ event to page’s input?
  17. How to migrate manifest version 2 to v3 for chrome extension?
  18. How to trigger click on a button
  19. CORS Chrome Extension with manifest version 2
  20. Persistent background page on demand or an event page that doesn’t unload?
  21. On page load event in Chrome extensions
  22. How do I log out of a chrome.identity oauth provider
  23. Chrome tabs query returning empty tab array
  24. cannot create item with duplicate context menu id in extension
  25. How to avoid “Extension context invalidated” errors when messaging AFTER an Extension update?
  26. jQuery in Google Chrome Content Script?
  27. How to fix chrome-extension inline JavaScript invocation error?
  28. Google Chrome Socket API in extensions
  29. chrome.commands keyboard shortcuts not working
  30. Chrome extension page action appearing outside of address bar

Leave a Comment