feat(*): disable web security features so more sites can be embedded

Author: andrewbrey

main/background.ts

@@ -2,6 +2,7 @@ import { app, BrowserWindow, webFrameMain } from 'electron';
 import { ipcMain as ipc } from 'electron-better-ipc';
 import serve from 'electron-serve';
 import { readFile } from 'fs/promises';
+import { omitBy, toLower } from 'lodash';
 import fetch from 'node-fetch';
 import { join } from 'path';
 import { createWindow } from './helpers';
@@ -64,6 +65,17 @@ if (isProd) {
     icon: join(__dirname, 'images', 'logo', '256x256.png'),
     alwaysOnTop: true,
     hasShadow: false,
+    webPreferences: {
+      webSecurity: false,
+    },
+  });
+
+  mainWindow.webContents.session.webRequest.onHeadersReceived({ urls: ['*://*/*'] }, (details, callback) => {
+    const responseHeaders = omitBy({ ...(details?.responseHeaders ?? {}) }, (value, key) =>
+      ['x-frame-options', 'content-security-policy'].includes(toLower(key))
+    );
+
+    callback({ cancel: false, responseHeaders });
   });
 
   mainWindow.setVisibleOnAllWorkspaces(true);
@@ -111,6 +123,17 @@ if (isProd) {
     }
   );
 
+  mainWindow.webContents.on('did-navigate-in-page', async (event, url, isMainFrame, frameProcessId, frameRoutingId) => {
+    if (isMainFrame) return;
+    if (url === 'about:blank') return;
+
+    const frame = webFrameMain.fromId(frameProcessId, frameRoutingId);
+
+    if (frame) {
+      frame.executeJavaScript(`parent.postMessage({key: 'location', msg: location.href}, "*")`);
+    }
+  });
+
   if (isProd) {
     await mainWindow.loadURL('app://./index.html');
 
@@ -140,5 +163,10 @@ ipc.answerRenderer('please-quit', () => app.quit());
 app.on('window-all-closed', () => app.quit());
 
 function getFlotEmbed() {
-  return (mainWindow?.webContents.mainFrame.frames ?? []).find((f) => f.name === 'flot-embed');
+  const frames = mainWindow?.webContents.mainFrame.frames ?? [];
+
+  // Some websites seem to cause the embed frame to be renamed...not sure how, it's
+  // supposed to be a readonly property, but ah well, if this happens, just try the
+  // using the first frame
+  return frames.find((f) => f.name === 'flot-embed') ?? frames[0];
 }

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "Flot",
   "description": "Open websites in a floating window",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "author": {
     "name": "Andrew Brey",
     "email": "[email protected]"

renderer/pages/_app.tsx

@@ -16,6 +16,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         switch (key) {
           case 'location':
             if (typeof window !== 'undefined') localStorage.setItem('flot-last-url', msg);
+            useStore.setState({ url: msg });
             break;
           case 'active':
             useStore.setState({ childActive: msg });

renderer/store.ts

@@ -1,5 +1,5 @@
 import create from 'zustand';
-import { prepareDailyMotionUrl, prepareTwitchUrl, prepareVimeoUrl, prepareYoutubeUrl } from './util/magic-urls';
+import { prepareDailyMotionUrl, prepareVimeoUrl, prepareYoutubeUrl } from './util/magic-urls';
 
 interface FlotState {
   url: string;
@@ -74,7 +74,6 @@ function preprocessURL(target: string) {
 
   target = prepareYoutubeUrl(target);
   target = prepareVimeoUrl(target);
-  target = prepareTwitchUrl(target);
   target = prepareDailyMotionUrl(target);
 
   return new URL(target);

renderer/util/magic-urls.ts

@@ -56,21 +56,6 @@ export function prepareVimeoUrl(target: string) {
   return `https://player.vimeo.com/video/${videoId}?${queryParams}`;
 }
 
-export function prepareTwitchUrl(target: string) {
-  const asURL = new URL(target);
-
-  if (!asURL.host.includes('twitch.tv')) {
-    return target;
-  }
-
-  const queryParams = asURL.searchParams || {};
-
-  queryParams.set('channel', asURL.pathname.substring(1));
-  queryParams.set('parent', 'localhost'); // TODO, this is a required parameter but it might not be possible to fake
-
-  return `https://player.twitch.tv?${queryParams}`;
-}
-
 export function prepareDailyMotionUrl(target: string) {
   const normalized = target.replace(/^http(s)?:\/\/dai\.ly\//, 'http://www.dailymotion.com/video/');