Recipe context isolation (#1456)

* Enable service contextIsolation

* Enable contextIsolation on the service webviews
* Expose a new API window.ferdi in the service main world to allow
  calling back into the service isolated world
* Expose a new IPC message inject-js-unsafe from the service isolated
  world to execute Javascript in the service main world (i.e., run code
  without context isolation). While the name contains the "unsafe"
  suffix to show the lack of context isolation, this should mostly be
  safe, as no nodejs APIs are available in the injected code.
* Refactor the Notifications shim into a part in the isolated world that
  handles displaying and modifying notifications, and a shim in the main
  world for the Notifications class. The two communicate via the
  window.ferdi endpoint and a Promise object can be used to detect
  notification clicks.
* Refactor the screen sharing shim into a part in the isolated world
  that enumerated shareable screens and windows and a shim in the main
  world that displays the media selector and completes the media
  selection promise.
* Expose the injectJSUnsafe API to recipes to inject javascript code
  into the main world without context isolation.

* Expose setBadge to the main world

The window.ferdi.setBadge API can be used to update the service badge
from injected unsafe Javascript

* Safer script injection into the service main world

Make sure that we don't try to serialize stray objects back from the
main world to the isolated world by always surrounding the script to be
executed by an anonymous function.

* Always read recipe assets as utf8

* Remove window.log from recipes

We didn't use it anywhere and its behavior was confusing in production
mode.

* Inject multiple unsafe scripts at the same time

* Find in page without remote module

Remove the @electron/remote dependency from the find in page (Ctrl+F)
functionality. The remote webContents is replaced with Electron IPC.
Synchronous IPC messages are handled in the main Electron process,
because the renderer process cannot reply to IPC messages synchronously.

* Update to latest contextIsolation recipes

* Fixing issue with missing 'fs' functions.

Co-authored-by: Vijay A <avijayr@protonmail.com>

1 files changed, 35 insertions, 46 deletions

diff --git a/src/webview/screenshare.js b/src/webview/screenshare.js
index 84d2e1e95..ab548a625 100644
--- a/src/webview/screenshare.js
+++ b/src/webview/screenshare.js
@@ -2,6 +2,27 @@ import { desktopCapturer } from 'electron';
 
 const CANCEL_ID = 'desktop-capturer-selection__cancel';
 
+export async function getDisplayMediaSelector() {
+  const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] });
+  return `<div class="desktop-capturer-selection__scroller">
+  <ul class="desktop-capturer-selection__list">
+    ${sources.map(({ id, name, thumbnail }) => `
+      <li class="desktop-capturer-selection__item">
+        <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
+          <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
+          <span class="desktop-capturer-selection__name">${name}</span>
+        </button>
+      </li>
+    `).join('')}
+    <li class="desktop-capturer-selection__item">
+      <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
+        <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
+      </button>
+    </li>
+  </ul>
+</div>`;
+}
+
 export const screenShareCss = `
 .desktop-capturer-selection {
   position: fixed;
@@ -72,38 +93,12 @@ export const screenShareCss = `
 }
 `;
 
-// Patch getDisplayMedia for screen sharing
-window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) => {
+export const screenShareJs = `
+window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => {
   try {
-    const sources = await desktopCapturer.getSources({
-      types: ['screen', 'window'],
-    });
-
     const selectionElem = document.createElement('div');
-    selectionElem.classList = 'desktop-capturer-selection';
-    selectionElem.innerHTML = `
-        <div class="desktop-capturer-selection__scroller">
-          <ul class="desktop-capturer-selection__list">
-            ${sources
-    .map(
-      ({ id, name, thumbnail }) => `
-              <li class="desktop-capturer-selection__item">
-                <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
-                  <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
-                  <span class="desktop-capturer-selection__name">${name}</span>
-                </button>
-              </li>
-            `,
-    )
-    .join('')}
-            <li class="desktop-capturer-selection__item">
-              <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
-                <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      `;
+    selectionElem.classList = ['desktop-capturer-selection'];
+    selectionElem.innerHTML = await window.ferdi.getDisplayMediaSelector();
     document.body.appendChild(selectionElem);
 
     document
@@ -112,25 +107,18 @@ window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) =>
         button.addEventListener('click', async () => {
           try {
             const id = button.getAttribute('data-id');
-            if (id === CANCEL_ID) {
+            if (id === '${CANCEL_ID}') {
               reject(new Error('Cancelled by user'));
             } else {
-              const mediaSource = sources.find((source) => source.id === id);
-              if (!mediaSource) {
-                throw new Error(`Source with id ${id} does not exist`);
-              }
-
-              const stream = await window.navigator.mediaDevices.getUserMedia(
-                {
-                  audio: false,
-                  video: {
-                    mandatory: {
-                      chromeMediaSource: 'desktop',
-                      chromeMediaSourceId: mediaSource.id,
-                    },
+              const stream = await window.navigator.mediaDevices.getUserMedia({
+                audio: false,
+                video: {
+                  mandatory: {
+                    chromeMediaSource: 'desktop',
+                    chromeMediaSourceId: id,
                   },
                 },
-              );
+              });
               resolve(stream);
             }
           } catch (err) {
@@ -143,4 +131,5 @@ window.navigator.mediaDevices.getDisplayMedia = () => async (resolve, reject) =>
   } catch (err) {
     reject(err);
   }
-};
+});
+`;