Overriding X-Frame-Options for the urls that are being processed

browser-extension/public/manifest.json

@@ -19,6 +19,9 @@
 	},
 	"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
 	"permissions": [
-		"tabs"
+		"tabs",
+		"webRequest",
+		"webRequestBlocking",
+		"<all_urls>"
 	]
 }

browser-extension/src/app/App.js

@@ -1,17 +1,42 @@
+import "core-js/stable";
+import "regenerator-runtime/runtime";
+
 import React from 'react';
 import './App.css';
 import DevicesPreviewer from './components/DevicesPreviewer';
 import Header from './components/Header';
+import {setURL} from './commons/postMan';
 import {DEVICES} from './commons/constants';
 
-function App() {
-  const urlParam = Array.from(new URLSearchParams(window.location.search.slice(1)).entries()).filter(([key]) => key === 'url')[0];
-  return (
-    <div className="App">
-      <Header />
-      <DevicesPreviewer devices={DEVICES} url={urlParam ? urlParam[1] : null} />
-    </div>
-  );
+class App extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      initialized: false,
+    }
+  }
+
+  async componentDidMount() {
+    const urlParam = Array.from(new URLSearchParams(window.location.search.slice(1)).entries()).filter(([key]) => key === 'url')[0];
+    if (!urlParam) {
+      return;
+    }
+    await setURL(urlParam[1]);
+    this.setState({initialized: true, url: urlParam[1]});
+  }
+
+  render() {
+    if (!this.state.initialized) {
+      return 'Loading';
+    }
+    return (
+      <div className="App">
+        <Header />
+        <DevicesPreviewer devices={DEVICES} url={this.state.url} />
+      </div>
+    );
+  }
 }
 
 export default App;

browser-extension/src/app/commons/postMan.js

@@ -0,0 +1,7 @@
+export const MESSAGE_TYPES = {
+  NEW_URL: 'NEW_URL',
+};
+
+export async function setURL(url) {
+  return chrome.runtime.sendMessage({type: MESSAGE_TYPES.NEW_URL, url});
+}

browser-extension/src/background.js

@@ -1,6 +1,44 @@
-require("webextension-polyfill");
+import 'webextension-polyfill';
+import {MESSAGE_TYPES} from './app/commons/postMan';
+import normalizeUrl from 'normalize-url';
 
 chrome.browserAction.onClicked.addListener(activeTab => {
-    const newURL = chrome.runtime.getURL(`/app/index.html?url=${activeTab.url}`);
-    chrome.tabs.create({ url: newURL });
-});
+  const newURL = chrome.runtime.getURL(`/app/index.html?url=${activeTab.url}`);
+  chrome.tabs.create({ url: newURL });
+});
+
+const currentUrls = {}
+
+function onHeadersReceived(details) {
+  console.log('currentUrls', currentUrls, details.url, details.responseHeaders && currentUrls[details.url], details.responseHeaders, currentUrls[details.url]);
+  const normalizedUrl = normalizeUrl(details.url);
+  if (details.responseHeaders && currentUrls[normalizedUrl]) {
+      const newHeaders = removeHeader(details.responseHeaders, 'X-Frame-Options');
+      console.log('newHeaders', newHeaders);
+      return { responseHeaders: newHeaders };
+  }
+  return { responseHeaders: details.responseHeaders };
+}
+
+function removeHeader(headers, headerToRemove) {
+  headerToRemove = headerToRemove.toLowerCase();
+  return headers.filter(({ name }) => name.toLowerCase() != headerToRemove);
+}
+
+chrome.webRequest.onHeadersReceived.addListener(
+  onHeadersReceived,
+  {
+    urls: ["<all_urls>"],
+  },
+  ['blocking', 'responseHeaders']
+);
+
+chrome.runtime.onMessage.addListener(
+  (request, sender, sendResponse) => {
+    console.log('New Message', request);
+    if (request.type === MESSAGE_TYPES.NEW_URL) {
+      currentUrls[normalizeUrl(request.url)] = true;
+      sendResponse({status: true});
+    }
+  }
+);