Orlian Prato

Posted on May 5

Basic Web Browser with Electron +APIS

Hi! I'm excited to share with you a little guide I put together some time ago with some basic tips on how to have a Chromium based browser that really covers our tracks when surfing the web.

Section 1: Basic Browser Setup

1. Setting Up the Environment
Before you begin coding, you need to have Node.js and npm (Node Package Manager) installed on your computer. These will allow you to manage dependencies and run Electron code. You can download Node.js and npm from their official page.

Once Node.js and npm are installed, you can install Electron globally on your system or specifically in your project using npm:

npm install electron -g  # Global installation
npm install electron     # Local installation in your project

2. Creating the Project
Create a new folder for your project and navigate to it in your console or terminal. Inside this folder, initialize a new npm project:

mkdir my-browser
cd my-browser
npm init -y  # Creates a new package.json with default settings

Then, install Electron as a project dependency:

npm install electron

3. Creating the Project
In your project, create the following files:

index.html
main.js

An example of index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Secure Browser</title>
</head>
<body>
    <h1>Welcome to Your Custom Browser</h1>
</body>
</html>

for main.js we can get:

const { app, BrowserWindow } = require('electron');

function createWindow() {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // and load the index.html of the app.
  win.loadFile('index.html');
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

4. Running Your Browser

To run your browser, you can add a script to your package.json file to make launching the application easier. Modify your package.json by adding a new script:

"scripts": {
  "start": "electron ."
}

Then, you can start your browser from the terminal:

npm start

This will open a desktop application window that displays the content of index.html, providing you with the basic structure of your custom browser.

This is the basic skeleton to start developing a custom browser with Electron. From here, we can begin to add more functionalities

## Section 2: Implementing Proxies

A proxy server acts as an intermediary between your browser and the internet. When you use a proxy, your internet traffic is routed through the proxy server before reaching its destination. This masks your actual IP address, making it harder for websites to track your location and identity.

Types of Proxies

HTTP Proxies: Handle only HTTP requests and are commonly used for web browsing.
HTTPS Proxies: Similar to HTTP proxies, but for encrypted HTTPS traffic.
SOCKS Proxies: More versatile and handle all types of traffic, not just web browsing. Useful for more generalized applications beyond just accessing web pages.

Setting Up Proxies in Electron
Electron's session module allows you to configure proxy settings programmatically. Here’s how you can implement it in your custom browser:

Define Proxy Configuration: First, you need to define the proxy settings. This can include HTTP, HTTPS, or SOCKS proxies. You can specify a proxy server for each type of traffic, or use a single proxy server for all types.
Apply Proxy Settings: Use the setProxy method of Electron's session object to apply these settings.

Detailed Code Implementation

You can configure your proxy settings directly in your main.js file. Here’s an example of how to set up a SOCKS5 proxy:

const { app, BrowserWindow, session } = require('electron');

function createWindow() {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      session: session.fromPartition('persist:proxy')
    }
  });

  win.loadFile('index.html');

  // Set up proxy configuration
  const proxyRules = "socks5://localhost:1080";
  win.webContents.session.setProxy({ proxyRules }, function() {
    console.log("Proxy configuration is set.");
  });

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

Handling Proxy Configuration Dynamically

You might want to change proxy settings dynamically based on different criteria (e.g., user input, specific websites, etc.). You can achieve this by creating a function to update the proxy configuration:

function setProxyConfig(proxyRules) {
  session.defaultSession.setProxy({ proxyRules }, () => {
    console.log(`Proxy set to: ${proxyRules}`);
  });
}

You can call setProxyConfig with different settings based on your needs, such as switching between different proxies or turning the proxy off.

Residential Proxies

Residential proxies are IP addresses provided by Internet providers to individuals, and are used by proxy services to offer greater legitimacy and less likelihood of being blocked by websites compared to data center proxies. This is because they simulate the behavior of a real user rather than a server farm. Key benefits include the ability to overcome geo-restrictions and CAPTCHAs, greater privacy and anonymity, and a lower likelihood of being detected and blocked by websites.

Bright Data (formerly Luminati): One of the largest providers with a wide range of customization options and a large number of IPs available. However, their pricing and usage structure can be complex, especially for new users (Proxyway).
Smartproxy: Offers residential proxies with support for HTTP(S) and SOCKS5. It is known for its high success rate and 24/7 technical support. Smartproxy provides a balance between price and performance, making it accessible to less experienced users (Smartproxy).
SOAX: Stands out for its flexibility in IP rotation and geolocation options. It is an intermediate option in terms of cost, providing a good balance between functionality and price (Proxyway).
Webshare: New to the proxy industry, it offers competitive pricing and a self-service approach. Its proxies are suitable for users who need a cost-effective solution and are willing to work with more limited rotation and targeting options (Webshare).
ProxyFish: Offers several proxy options including residential, data center and ISP proxies. They stand out for their anonymity and variety of product offerings, adapting to both enterprise and individual needs (ProxyFish).

Note: You can check the quality of SOCKS5 or HTTPS proxy with companies like: https://ipinfo.io or whoer.net

## Section 3: Fingerprints

Browser fingerprinting is the process of collecting information about a user's browser at both the software and hardware levels. This includes details like browser settings, time zone, installed plugins, available fonts, and more. These data points can be combined to create a "digital fingerprint" that uniquely identifies a user.

Methods to Mitigate Fingerprinting

The goal here is to make your browser as indistinguishable as possible, thereby reducing the uniqueness of the digital fingerprint that can be collected. Here are several techniques you can implement in your Electron browser:

Randomize User-Agent Data: Regularly changing the user agent that your browser sends to websites can help decrease precise identification.
Disable or Limit Canvas API: The Canvas API is commonly used to generate a unique fingerprint based on how graphics are rendered on different devices. You can disable or alter this API to reduce tracking.
Control WebRTC Access: WebRTC can reveal your real IP address even when you are using a VPN or proxy. Controlling or disabling WebRTC is crucial for protecting that information.
Standardize Font and Plugin Information: Limiting or standardizing the responses your browser provides about installed fonts and plugins can also help combat fingerprinting.

Implementation in Electron

You can modify the user agent directly in your Electron code. Here is an example of how to do this in the main.js file:

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
  let mainWindow = new BrowserWindow({ width: 800, height: 600 });
  const session = mainWindow.webContents.session;

  session.webRequest.onBeforeSendHeaders((details, callback) => {
    details.requestHeaders['User-Agent'] = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3';
    callback({ cancel: false, requestHeaders: details.requestHeaders });
  });

  mainWindow.loadURL('https://example.com');
});

To disable WebRTC and prevent the leakage of your real IP address, you can add the following line to your web preferences configuration in BrowserWindow:

webPreferences: {
  enableWebRTC: false
}

To intervene in how the Canvas API is used, you can inject scripts that modify its behavior, such as randomizing the results of Canvas functions.

Section 4: Using Virtual Number APIs

Virtual number APIs allow you to programmatically access and manage virtual phone numbers. These numbers can receive SMS and calls like any regular number, but they are not tied to a physical SIM card or a specific device. They are often used to maintain privacy, manage multiple accounts, or test applications.

Why Use Virtual Numbers?

Privacy Protection: By using a virtual number, you can avoid giving out your personal phone number.
Account Verification: Many services require phone verification; virtual numbers can be used to meet this requirement without exposing your real number.
Global Reach: Virtual numbers can often be obtained in various country codes, helping to bypass regional restrictions.

Several APIs provide virtual number services (VOIP), such as Twilio, Nexmo (Vonage), and Plivo or Non-VoIP like Major Phones, Textverified or SMSPool. These services offer a range of capabilities, including SMS reception, voice calls, and more. For our implementation, we will consider a generic API setup that can be adapted based on the specific service you choose.

Implementation in Electron

You’ll need to use a package like axios or node-fetch for making HTTP requests to the virtual number API. Here’s a basic setup:

Depending on the service you integrate, the code may change. However in essence you will always need to do a fetch to acquire a virtual phone number, another fetch to request the text messages received to that number and depending on the case, report or cancel the virtual number.

Among the most popular services for these purposes are Major Phones, Textverified, SMSPool. Each one has its pros and cons, it is worth checking the documentation so that whatever the case may be you can apply it correctly.