fix: devtools csp to use 127.0.0.1

Author: NathanWalker

lib/common/services/net-service.ts

@@ -18,7 +18,7 @@ export class Net implements INet {
 		private $errors: IErrors,
 		private $childProcess: IChildProcess,
 		private $logger: ILogger,
-		private $osInfo: IOsInfo
+		private $osInfo: IOsInfo,
 	) {}
 
 	public async getFreePort(): Promise<number> {
@@ -76,13 +76,13 @@ export class Net implements INet {
 				server.close();
 			});
 
-			server.listen(port, "localhost");
+			server.listen(port, "127.0.0.1");
 		});
 	}
 
 	public async getAvailablePortInRange(
 		startPort: number,
-		endPort?: number
+		endPort?: number,
 	): Promise<number> {
 		endPort = endPort || 65534;
 		while (!(await this.isPortAvailable(startPort))) {
@@ -96,7 +96,7 @@ export class Net implements INet {
 	}
 
 	public async waitForPortToListen(
-		waitForPortListenData: IWaitForPortListenData
+		waitForPortListenData: IWaitForPortListenData,
 	): Promise<boolean> {
 		if (!waitForPortListenData) {
 			this.$errors.fail("You must pass port and timeout for check.");
@@ -126,8 +126,8 @@ export class Net implements INet {
 		if (!currentPlatformData) {
 			this.$errors.fail(
 				`Unable to check for free ports on ${platform}. Supported platforms are: ${_.keys(
-					platformData
-				).join(", ")}`
+					platformData,
+				).join(", ")}`,
 			);
 		}
 

lib/device-sockets/ios/app-debug-socket-proxy-factory.ts

@@ -21,14 +21,14 @@ export class AppDebugSocketProxyFactory
 		private $lockService: ILockService,
 		private $options: IOptions,
 		private $tempService: ITempService,
-		private $net: INet
+		private $net: INet,
 	) {
 		super();
 	}
 
 	public getTCPSocketProxy(
 		deviceIdentifier: string,
-		appId: string
+		appId: string,
 	): net.Server {
 		return this.deviceTcpServers[`${deviceIdentifier}-${appId}`];
 	}
@@ -37,18 +37,18 @@ export class AppDebugSocketProxyFactory
 		device: Mobile.IiOSDevice,
 		appId: string,
 		projectName: string,
-		projectDir: string
+		projectDir: string,
 	): Promise<net.Server> {
 		const cacheKey = `${device.deviceInfo.identifier}-${appId}`;
 		const existingServer = this.deviceTcpServers[cacheKey];
 		if (existingServer) {
 			this.$errors.fail(
-				`TCP socket proxy is already running for device '${device.deviceInfo.identifier}' and app '${appId}'`
+				`TCP socket proxy is already running for device '${device.deviceInfo.identifier}' and app '${appId}'`,
 			);
 		}
 
 		this.$logger.info(
-			"\nSetting up proxy...\nPress Ctrl + C to terminate, or disconnect.\n"
+			"\nSetting up proxy...\nPress Ctrl + C to terminate, or disconnect.\n",
 		);
 
 		const server = net.createServer({
@@ -69,7 +69,7 @@ export class AppDebugSocketProxyFactory
 			const appDebugSocket = await device.getDebugSocket(
 				appId,
 				projectName,
-				projectDir
+				projectDir,
 			);
 			this.$logger.info("Backend socket created.");
 
@@ -112,7 +112,7 @@ export class AppDebugSocketProxyFactory
 		device: Mobile.IiOSDevice,
 		appId: string,
 		projectName: string,
-		projectDir: string
+		projectDir: string,
 	): Promise<ws.Server> {
 		const existingWebProxy =
 			this.deviceWebServers[`${device.deviceInfo.identifier}-${appId}`];
@@ -130,22 +130,22 @@ export class AppDebugSocketProxyFactory
 		device: Mobile.IiOSDevice,
 		appId: string,
 		projectName: string,
-		projectDir: string
+		projectDir: string,
 	): Promise<ws.Server> {
 		let clientConnectionLockRelease: () => void;
 		const cacheKey = `${device.deviceInfo.identifier}-${appId}`;
 		const existingServer = this.deviceWebServers[cacheKey];
 		if (existingServer) {
 			this.$errors.fail(
-				`Web socket proxy is already running for device '${device.deviceInfo.identifier}' and app '${appId}'`
+				`Web socket proxy is already running for device '${device.deviceInfo.identifier}' and app '${appId}'`,
 			);
 		}
 
 		// NOTE: We will try to provide command line options to select ports, at least on the localhost.
 		const localPort = await this.$net.getAvailablePortInRange(41000);
 
 		this.$logger.info(
-			"\nSetting up debugger proxy...\nPress Ctrl + C to terminate, or disconnect.\n"
+			"\nSetting up debugger proxy...\nPress Ctrl + C to terminate, or disconnect.\n",
 		);
 
 		// NB: When the inspector frontend connects we might not have connected to the inspector backend yet.
@@ -156,17 +156,18 @@ export class AppDebugSocketProxyFactory
 		let currentAppSocket: net.Socket = null;
 		let currentWebSocket: ws = null;
 		const server = new ws.Server(<any>{
+			host: "127.0.0.1",
 			port: localPort,
 			verifyClient: async (
 				info: any,
-				callback: (res: boolean, code?: number, message?: string) => void
+				callback: (res: boolean, code?: number, message?: string) => void,
 			) => {
 				let acceptHandshake = true;
 				clientConnectionLockRelease = null;
 
 				try {
 					clientConnectionLockRelease = await this.$lockService.lock(
-						`debug-connection-${device.deviceInfo.identifier}-${appId}.lock`
+						`debug-connection-${device.deviceInfo.identifier}-${appId}.lock`,
 					);
 
 					this.$logger.info("Frontend client connected.");
@@ -184,7 +185,7 @@ export class AppDebugSocketProxyFactory
 					appDebugSocket = await device.getDebugSocket(
 						appId,
 						projectName,
-						projectDir
+						projectDir,
 					);
 					currentAppSocket = appDebugSocket;
 					this.$logger.info("Backend socket created.");
@@ -198,7 +199,7 @@ export class AppDebugSocketProxyFactory
 					this.emit(CONNECTION_ERROR_EVENT_NAME, err);
 					acceptHandshake = false;
 					this.$logger.warn(
-						`Cannot connect to device socket. The error message is '${err.message}'.`
+						`Cannot connect to device socket. The error message is '${err.message}'.`,
 					);
 				}
 
@@ -225,7 +226,7 @@ export class AppDebugSocketProxyFactory
 					webSocket.send(message);
 				} else {
 					this.$logger.trace(
-						`Received message ${message}, but unable to send it to webSocket as its state is: ${webSocket.readyState}`
+						`Received message ${message}, but unable to send it to webSocket as its state is: ${webSocket.readyState}`,
 					);
 				}
 			});

lib/services/debug-service-base.ts

@@ -8,10 +8,11 @@ import {
 
 export abstract class DebugServiceBase
 	extends EventEmitter
-	implements IDeviceDebugService {
+	implements IDeviceDebugService
+{
 	constructor(
 		protected device: Mobile.IDevice,
-		protected $devicesService: Mobile.IDevicesService
+		protected $devicesService: Mobile.IDevicesService,
 	) {
 		super();
 	}
@@ -20,20 +21,21 @@ export abstract class DebugServiceBase
 
 	public abstract debug(
 		debugData: IDebugData,
-		debugOptions: IDebugOptions
+		debugOptions: IDebugOptions,
 	): Promise<IDebugResultInfo>;
 
 	public abstract debugStop(): Promise<void>;
 
 	protected getCanExecuteAction(
-		deviceIdentifier: string
+		deviceIdentifier: string,
 	): (device: Mobile.IDevice) => boolean {
 		return (device: Mobile.IDevice): boolean => {
 			if (deviceIdentifier) {
 				let isSearchedDevice =
 					device.deviceInfo.identifier === deviceIdentifier;
 				if (!isSearchedDevice) {
-					const deviceByDeviceOption = this.$devicesService.getDeviceByDeviceOption();
+					const deviceByDeviceOption =
+						this.$devicesService.getDeviceByDeviceOption();
 					isSearchedDevice =
 						deviceByDeviceOption &&
 						device.deviceInfo.identifier ===
@@ -49,7 +51,7 @@ export abstract class DebugServiceBase
 
 	protected getChromeDebugUrl(
 		debugOptions: IDebugOptions,
-		port: number
+		port: number,
 	): string {
 		// corresponds to 55.0.2883 Chrome version
 		// SHA is taken from https://chromium.googlesource.com/chromium/src/+/55.0.2883.100
@@ -74,7 +76,7 @@ export abstract class DebugServiceBase
 			chromeDevToolsPrefix = `https://chrome-devtools-frontend.appspot.com/serve_file/@${commitSHA}`;
 		}
 
-		const chromeUrl = `${chromeDevToolsPrefix}/inspector.html?ws=localhost:${port}`;
+		const chromeUrl = `${chromeDevToolsPrefix}/inspector.html?ws=127.0.0.1:${port}`;
 		return chromeUrl;
 	}
 }