DEV Community

Eugene Karataev
Eugene Karataev

Posted on • Updated on


iframes everywhere

How many times you were on a random website and wanted to watch your favorite youtube video right on the current website? I guess it never happened 😀. You just opened a new tab and entered youtube in the browser's url input.

But recently I developed chrome extension and faced a problem with injection 3rd websites via iframe in a currently opened website.

Open your browser's dev tools and execute the following code:

(function injectIframe(src) {
  let iframe = document.createElement('iframe');
  iframe.setAttribute('src', src); = '500px'; = '300px';
Enter fullscreen mode Exit fullscreen mode

Your attempt will fail with the message
Refused to display '' in a frame because it set 'X-Frame-Options' to 'sameorigin'.


This happens because sets header X-Frame-Options to sameorigin, which blocks loading the website in iframe. YouTube don't want to show it's content on other websites and it's a reasonable decision.

Browser extension to the rescue

But there is a way to bypass these security restrictions. You'll have to use a browser extension which have much more access to the client-server interactions.
An extension can intercept a server's response, modify it's headers and provide the modified response without limiting headers to the browser.

We're gonna use webRequest API to modify response headers. Here's the extension code:

function stripHeaders(headers) {
  return headers.filter(header => {
    let headerName =;
    return !(headerName === 'content-security-policy' || headerName === 'x-frame-options');

  function(details) {
    return {
      responseHeaders: stripHeaders(details.responseHeaders)
  }, {
    urls: ["<all_urls>"]
  }, ["blocking", "responseHeaders"]);
Enter fullscreen mode Exit fullscreen mode

Here is the repo with full extension code if you want to try it by yourself.

And here we go 🌟

P.S. Extensions have super powers compared to a regular javascript in a website's sandbox. Use them wisely and don't install extension you don't trust ❗

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!