Merge pull request #4086 from balena-io/fix-opening-links-in-safe-webview

Fix opening links from within SafeWebView

.github/actions/publish/action.yml

@@ -31,10 +31,17 @@ runs:
         path: ${{ runner.temp }}
 
     - name: Extract custom source artifact
+      if: runner.os != 'Windows'
       shell: pwsh
       working-directory: .
       run: tar -xf ${{ runner.temp }}/custom.tgz
 
+    - name: Extract custom source artifact
+      if: runner.os == 'Windows'
+      shell: pwsh
+      working-directory: .
+      run: C:\"Program Files"\Git\usr\bin\tar.exe --force-local -xf ${{ runner.temp }}\custom.tgz
+
     - name: Setup Node.js
       uses: actions/setup-node@v3
       with:

.github/actions/test/action.yml

@@ -47,9 +47,15 @@ runs:
         ELECTRON_NO_ATTACH_CONSOLE: true
 
     - name: Compress custom source
+      if: runner.os != 'Windows'
       shell: pwsh
       run: tar -acf ${{ runner.temp }}/custom.tgz .
 
+    - name: Compress custom source
+      if: runner.os == 'Windows'
+      shell: pwsh
+      run: C:\"Program Files"\Git\usr\bin\tar.exe --force-local -acf ${{ runner.temp }}\custom.tgz .
+
     - name: Upload custom artifact
       uses: actions/upload-artifact@v3
       with:

lib/gui/app/components/safe-webview/safe-webview.tsx

@@ -95,6 +95,7 @@ export class SafeWebview extends React.PureComponent<
 		);
 		this.entryHref = url.href;
 		// Events steal 'this'
+		this.handleDomReady = _.bind(this.handleDomReady, this);
 		this.didFailLoad = _.bind(this.didFailLoad, this);
 		this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this);
 		// Make a persistent electron session for the webview
@@ -121,6 +122,8 @@ export class SafeWebview extends React.PureComponent<
 				ref={this.webviewRef}
 				partition={ELECTRON_SESSION}
 				style={style}
+				// @ts-ignore
+				allowpopups="true"
 			/>
 		);
 	}
@@ -134,8 +137,8 @@ export class SafeWebview extends React.PureComponent<
 				this.didFailLoad,
 			);
 			this.webviewRef.current.addEventListener(
-				'new-window',
-				SafeWebview.newWindow,
+				'dom-ready',
+				this.handleDomReady,
 			);
 			this.webviewRef.current.addEventListener(
 				'console-message',
@@ -157,8 +160,8 @@ export class SafeWebview extends React.PureComponent<
 				this.didFailLoad,
 			);
 			this.webviewRef.current.removeEventListener(
-				'new-window',
-				SafeWebview.newWindow,
+				'dom-ready',
+				this.handleDomReady,
 			);
 			this.webviewRef.current.removeEventListener(
 				'console-message',
@@ -168,6 +171,15 @@ export class SafeWebview extends React.PureComponent<
 		this.session.webRequest.onCompleted(null);
 	}
 
+	handleDomReady() {
+		const webview = this.webviewRef.current;
+		if (webview == null) {
+			return;
+		}
+		const id = webview.getWebContentsId();
+		electron.ipcRenderer.send('webview-dom-ready', id);
+	}
+
 	// Set the element state to hidden
 	public didFailLoad() {
 		this.setState({
@@ -196,17 +208,4 @@ export class SafeWebview extends React.PureComponent<
 			}
 		}
 	}
-
-	// Open link in browser if it's opened as a 'foreground-tab'
-	public static async newWindow(event: electron.NewWindowEvent) {
-		const url = new window.URL(event.url);
-		if (
-			(url.protocol === 'http:' || url.protocol === 'https:') &&
-			event.disposition === 'foreground-tab' &&
-			// Don't open links if they're disabled by the env var
-			!(await settings.get('disableExternalLinks'))
-		) {
-			electron.shell.openExternal(url.href);
-		}
-	}
 }

lib/gui/app/i18n/zh-TW.ts

@@ -46,7 +46,8 @@ const translation = {
 			drive: '磁碟',
 			missingPartitionTable:
 				'看起來這不是一個可啟動的{{type}}。\n\n這個{{type}}似乎不包含分割表，因此您的設備可能無法識別或無法正確啟動。',
-			largeDriveSize: '這是個很大容量的磁碟！請檢查並確認它不包含對您來說存放很重要的資料',
+			largeDriveSize:
+				'這是個很大容量的磁碟！請檢查並確認它不包含對您來說存放很重要的資料',
 			systemDrive: '選擇系統分割區很危險，因為這將會刪除你的系統',
 			sourceDrive: '來源映像檔位於這個分割區中',
 			noSpace: '磁碟空間不足。請插入另一個較大的磁碟並重試。',
@@ -130,8 +131,7 @@ const translation = {
 			autoUpdate: '自動更新',
 			settings: '軟體設定',
 			systemInformation: '系統資訊',
-			trimExtPartitions:
-				'修改原始映像檔上未分配的空間（在 ext 類型分割區中）',
+			trimExtPartitions: '修改原始映像檔上未分配的空間（在 ext 類型分割區中）',
 		},
 		menu: {
 			edit: '編輯',

lib/gui/etcher.ts

@@ -21,7 +21,7 @@ import { promises as fs } from 'fs';
 import { platform } from 'os';
 import * as path from 'path';
 import * as semver from 'semver';
-import * as _ from 'lodash';
+import * as lodash from 'lodash';
 
 import './app/i18n';
 
@@ -107,10 +107,10 @@ async function getCommandLineURL(argv: string[]): Promise<string | undefined> {
 	}
 }
 
-const initSentryMain = _.once(() => {
+const initSentryMain = lodash.once(() => {
 	const dsn =
 		settings.getSync('analyticsSentryToken') ||
-		_.get(packageJSON, ['analytics', 'sentry', 'token']);
+		lodash.get(packageJSON, ['analytics', 'sentry', 'token']);
 
 	SentryMain.init({ dsn, beforeSend: anonymizeSentryData });
 });
@@ -267,6 +267,24 @@ async function main(): Promise<void> {
 				console.log('Build menu failed. ');
 			}
 		});
+
+		electron.ipcMain.on('webview-dom-ready', (_, id) => {
+			const webview = electron.webContents.fromId(id);
+
+			// Open link in browser if it's opened as a 'foreground-tab'
+			webview.setWindowOpenHandler((event) => {
+				const url = new URL(event.url);
+				if (
+					(url.protocol === 'http:' || url.protocol === 'https:') &&
+					event.disposition === 'foreground-tab' &&
+					// Don't open links if they're disabled by the env var
+					!settings.getSync('disableExternalLinks')
+				) {
+					electron.shell.openExternal(url.href);
+				}
+				return { action: 'deny' };
+			});
+		});
 	}
 }
 main();