Wednesday, January 29, 2025

Uninstalling StrongSwan and xl2tpd Completely

To completely uninstall StrongSwan and xl2tpd from your Debian 12 system, follow these steps:

1. Stop the Services
First, stop the services of StrongSwan and xl2tpd:

sudo systemctl stop strongswan
sudo systemctl stop xl2tpd

2. Disable Auto-Start
To disable these services from starting automatically at boot, run:

sudo systemctl disable strongswan
sudo systemctl disable xl2tpd

3. Uninstall the Packages
Use apt to uninstall StrongSwan and xl2tpd along with their configuration files:

sudo apt remove --purge strongswan xl2tpd

This will remove both the packages and their configuration files from your system.

4. Delete Configuration Files and Directories
Although the apt remove command will delete most configuration files, some may remain on the system. To ensure they are completely removed, manually delete the configuration directories:

sudo rm -rf /etc/strongswan
sudo rm -rf /etc/xl2tpd

5. Remove Any Unused Dependencies
After uninstalling, it’s a good practice to remove any residual dependencies or packages that are no longer required:

sudo apt autoremove --purge

6. Remove Firewall and Routing Rules (if applicable)
If you made changes to your firewall or routing configuration (e.g., for IP forwarding or specific ports), it’s a good idea to clean these up.

For instance, if you added port 500 (for IPsec), remove that rule:

sudo ufw delete allow 500/udp
sudo ufw delete allow 4500/udp

7. Reboot the System (Optional)
To ensure that all configurations and services are fully cleared, it’s recommended to reboot your system:

sudo reboot

By following these steps, you will completely uninstall StrongSwan and xl2tpd from your Debian 12 system. This ensures that both the services and any associated configuration files are removed.

How to Uninstall WireGuard

How to Uninstall WireGuard
If you need to fully uninstall WireGuard from Debian 12, follow these steps:

1. Stop the WireGuard Service
First, ensure that the WireGuard service has stopped:

sudo systemctl stop wg-quick@wg0

2. Disable WireGuard Autostart
If WireGuard is set to start automatically, disable it:

sudo systemctl disable wg-quick@wg0

3. Uninstall WireGuard Packages
Uninstall WireGuard and its tools using apt:

sudo apt remove --purge wireguard wireguard-tools

4. Delete Configuration Files
Remove WireGuard configuration and key files:

sudo rm -rf /etc/wireguard

5. Clean Up Remaining Dependencies
Sometimes, there might be unused dependencies left after uninstallation. Clean them up with:

sudo apt autoremove --purge

6. Reboot (Optional)
To ensure all configurations and services are fully cleared, it’s recommended to reboot the system:

sudo reboot

This will ensure that WireGuard is completely removed from your system

Here’s a step-by-step guide to setting up WireGuard on Debian 12.

Here’s a step-by-step guide to setting up WireGuard on Debian 12.

1. Install WireGuard
First, ensure your system is up to date and install the necessary packages.

Update the package list:

sudo apt update;sudo apt upgrade -y

Install WireGuard:

sudo apt install wireguard wireguard-tools

This will install WireGuard and its command-line tools.

2. Generate Keys for Server and Client
Both the server and client require a private and public key pair for secure communication.

Generate server key pair:

wg genkey | tee /etc/wireguard/server.key | wg pubkey > /etc/wireguard/server.pub

Generate client key pair:
If you’re configuring a client device (e.g., another server or device), you need to generate its keys too:

wg genkey | tee /etc/wireguard/client.key | wg pubkey > /etc/wireguard/client.pub

You can run this command on the machine you want to configure as the client.

3. Configure WireGuard Server
Edit the server configuration file
On the server, create or edit the WireGuard configuration file at /etc/wireguard/wg0.conf:

sudo nano /etc/wireguard/wg0.conf

Example configuration:

[Interface]
Address = 10.0.0.1/24         # The server's virtual IP address
ListenPort = 51820            # The listening port
PrivateKey = <server-private-key>  # The private key generated from /etc/wireguard/server.key

[Peer]
PublicKey = <client-public-key>  # The client's public key
AllowedIPs = 10.0.0.2/32     # The client's virtual IP address

PrivateKey: The server’s private key from /etc/wireguard/server.key.
PublicKey: The client’s public key, which you will insert here.
AllowedIPs: The IP address range that the client is allowed to access.
Configure the firewall
If your server has a firewall enabled, allow the necessary WireGuard port (default is 51820 UDP):

sudo ufw allow 51820/udp

Start WireGuard service
Start the WireGuard service and enable it to start on boot:

sudo systemctl start wg-quick@wg0
sudo systemctl enable wg-quick@wg0

4. Configure WireGuard Client
Edit the client configuration file
On the client device, create the configuration file /etc/wireguard/wg0.conf and add the following:
[Interface]
PrivateKey = # The private key from /etc/wireguard/client.key
Address = 10.0.0.2/24 # The client’s virtual IP address

[Peer]
PublicKey = <server-public-key>   # The server's public key
Endpoint = <server-public-ip>:51820  # The server's public IP and port
AllowedIPs = 0.0.0.0/0      # Route all traffic through WireGuard
PersistentKeepalive = 25   # Keep connection alive (seconds)

PrivateKey: The client’s private key from /etc/wireguard/client.key.
PublicKey: The server’s public key from /etc/wireguard/server.pub.
Endpoint: The server’s public IP address and port.
AllowedIPs: If you want the client to route all traffic through the VPN, set it to 0.0.0.0/0.
Start the client WireGuard service:

sudo systemctl start wg-quick@wg0
sudo systemctl enable wg-quick@wg0

5. Verify the Connection
On the server, check the connection status:

sudo wg show

On the client device, test the connection:
Use ping to test connectivity to the server’s virtual IP:

ping 10.0.0.1

If everything is set up correctly, you should be able to ping the server.

6. Configure Routing and NAT (Optional)
If you want the client to access the server’s network and route traffic through the VPN, you’ll need to enable IP forwarding and set up NAT.

Enable IP forwarding:

sudo sysctl -w net.ipv4.ip_forward=1

Configure NAT:
To make IP forwarding permanent, edit the sysctl configuration file:

sudo nano /etc/sysctl.conf

Uncomment the following line:

net.ipv4.ip_forward=1

Then reload the sysctl settings:

sudo sysctl -p

Set up firewall rules for NAT:

sudo ufw allow 51820/udp
sudo ufw route allow in on wg0 out on eth0

Replace eth0 with your actual network interface.

7. Disconnect and Stop the Service
If you need to stop WireGuard, you can do so using the following command:

sudo systemctl stop wg-quick@wg0

Summary
Following these steps, you should have WireGuard successfully installed and configured on your Debian 12 system, allowing secure VPN communication between your server and client. You can further configure additional clients or tweak network settings as needed.

Tuesday, January 14, 2025

Make a Chromium-based browser

Here’s a guide on creating a basic Chromium-based browser using the Chromium Embedded Framework (CEF). This example sets up a simple browser with basic functionality.

Requirements
Install a C++ development environment (e.g., Visual Studio, CMake).
Download Chromium or CEF SDK.
Ensure necessary dependencies like Git, Python3, and Ninja are installed.
Project Structure

/MyBrowser
    |-- CMakeLists.txt
    |-- main.cpp
    |-- simple_handler.cpp
    |-- simple_handler.h

1. CMakeLists.txt

cmake_minimum_required(VERSION 3.10)
project(MyBrowser)

# Set C++ standard
set(CMAKE_CXX_STANDARD 17)

# CEF root directory
set(CEF_ROOT "path/to/cef_binary")

# Add CEF as a subdirectory
add_subdirectory(${CEF_ROOT} cef_target_dir)

# Add source files
add_executable(MyBrowser main.cpp simple_handler.cpp)

# Link CEF libraries
target_link_libraries(MyBrowser libcef_lib cef_sandbox_lib)

2. main.cpp
This is the entry point of the application. It initializes CEF, creates a browser window, and runs the CEF message loop.

#include "include/cef_app.h"
#include "simple_handler.h"

int main(int argc, char* argv[]) {
    // CEF main arguments
    CefMainArgs main_args(argc, argv);

    // Implement a custom CEF app
    CefRefPtr<CefApp> app;

    // Execute sub-processes
    int exit_code = CefExecuteProcess(main_args, app, nullptr);
    if (exit_code >= 0) {
        return exit_code;
    }

    // CEF initialization settings
    CefSettings settings;
    settings.no_sandbox = true;

    // Initialize CEF
    CefInitialize(main_args, settings, app, nullptr);

    // Create the main browser window
    CefRefPtr<SimpleHandler> handler(new SimpleHandler());
    CefWindowInfo window_info;
    CefBrowserSettings browser_settings;

    // Create a browser instance
    CefBrowserHost::CreateBrowser(window_info, handler, "https://www.google.com", browser_settings, nullptr, nullptr);

    // Run the CEF message loop
    CefRunMessageLoop();

    // Shutdown CEF
    CefShutdown();
    return 0;
}

3. simple_handler.h
This file defines a handler class to manage browser events.

#ifndef SIMPLE_HANDLER_H_
#define SIMPLE_HANDLER_H_

#include "include/cef_client.h"

class SimpleHandler : public CefClient, public CefLifeSpanHandler {
public:
    SimpleHandler() = default;
    ~SimpleHandler() override = default;

    CefRefPtr<CefLifeSpanHandler> GetLifeSpanHandler() override {
        return this;
    }

    void OnAfterCreated(CefRefPtr<CefBrowser> browser) override {
        CEF_REQUIRE_UI_THREAD();
        browser_list_.push_back(browser);
    }

    void OnBeforeClose(CefRefPtr<CefBrowser> browser) override {
        CEF_REQUIRE_UI_THREAD();
        browser_list_.remove(browser);
        if (browser_list_.empty()) {
            CefQuitMessageLoop();
        }
    }

private:
    std::list<CefRefPtr<CefBrowser>> browser_list_;

    IMPLEMENT_REFCOUNTING(SimpleHandler);
};

#endif  // SIMPLE_HANDLER_H_

4. simple_handler.cpp
This file provides implementations for SimpleHandler.

#include "simple_handler.h"
#include "include/cef_browser.h"

void SimpleHandler::OnAfterCreated(CefRefPtr<CefBrowser> browser) {
    CefClient::OnAfterCreated(browser);
}

How to Run
1.Download the CEF SDK: Obtain the latest SDK from the CEF website.
2.Configure the project path: Replace CEF_ROOT in the CMakeLists.txt file with the path to your CEF installation.
3.Build the project:

mkdir build
cd build
cmake ..
cmake --build .

4.Run the browser: Execute the generated binary.
How to Extend
1.Multi-Tab Support: Manage multiple CefBrowser instances in the SimpleHandler class.
2.Custom UI: Integrate a GUI framework like Qt or wxWidgets for a more polished interface.
3.Plugins and Extensions: Enable Chromium features for extensions or custom plugins.
4.Custom Features: Add APIs for file access, scripting, or other specific functionalities.
This setup provides a minimal browser framework.

Sunday, January 5, 2025

Use webpage to upload and download files

In the current code, uploaded files are not actually stored on a server. The files are just read and stored temporarily in the browser’s memory using JavaScript FileReader and Blob objects. These files are not uploaded to any server or remote storage, and are instead stored locally in the browser for temporary use.

How the file storage works:
When the user selects a file, it is read into an ArrayBuffer, then converted into a URL using Blob.
This temporary URL is saved in the browser’s memory using a Map object for easy access to the files.
When the user clicks the “Download” button, the file is downloaded using this temporary URL.
However, the file is not saved to any server, meaning if the page is refreshed, the uploaded files will be lost. If you want to save uploaded files on a server and provide download links, you’ll need to implement server-side storage.

Code Functionality:
This code implements a simple webpage file upload download and refresh functionality:

The user can select multiple files to upload, but the files are only stored in the browser’s memory and not uploaded to a server.
The uploaded files are displayed on the page, and users can download these files.
There is a “Refresh Page” button on the page that, when clicked, reloads the entire page and resets the file list.
Code Implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Transfer Tool</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
    #fileList { margin-top: 20px; }
    button { margin-top: 20px; }
  </style>
</head>
<body>
  <h1>File Transfer Tool</h1>
  <p>Upload and download files using this page.</p>
  
  <!-- File Upload Section -->
  <input type="file" id="fileInput" multiple>
  <button id="uploadBtn">Upload Files</button>
  
  <!-- Refresh Button -->
  <button id="refreshBtn">Refresh Page</button>

  <!-- File List -->
  <div id="fileList">
    <h3>Uploaded Files</h3>
    <ul id="files"></ul>
  </div>

  <script>
    const fileInput = document.getElementById('fileInput');
    const uploadBtn = document.getElementById('uploadBtn');
    const refreshBtn = document.getElementById('refreshBtn');
    const fileList = document.getElementById('files');

    // Store uploaded files in memory
    const uploadedFiles = new Map();

    // File upload functionality
    uploadBtn.addEventListener('click', () => {
      const files = fileInput.files;
      if (files.length === 0) {
        alert('Please select files!');
        return;
      }

      // Store files in memory
      Array.from(files).forEach((file) => {
        const fileURL = URL.createObjectURL(file);  // Create a temporary URL
        uploadedFiles.set(file.name, { file, fileURL });
      });

      alert('Files uploaded successfully');
      // Update the file list
      updateFileList();
    });

    // Update the file list
    function updateFileList() {
      fileList.innerHTML = '';  // Clear the list
      uploadedFiles.forEach((fileData, fileName) => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
          <span>${fileName}</span>
          <a href="${fileData.fileURL}" download="${fileName}" style="margin-left: 10px;">Download</a>
        `;
        fileList.appendChild(listItem);
      });
    }

    // Refresh page functionality
    refreshBtn.addEventListener('click', () => {
      location.reload();  // Reload the entire page
    });
  </script>
</body>
</html>

Code Explanation:
File Upload Functionality:

When the user clicks the “Upload Files” button, the selected files are given a temporary URL using URL.createObjectURL() and stored in the browser’s memory.
The uploaded files will be displayed on the page by calling updateFileList().
File List Update:

After uploading files, the updateFileList() function is called to refresh the file list on the page. Files are shown with their names and a download link.
Refresh Page:

When the “Refresh Page” button is clicked, location.reload() is called to reload the entire page, simulating a browser refresh. This clears the file list and resets the page content.
—————–
How to upload files to a server
To ensure that uploaded files are stored on the server and can be downloaded, you would need both front-end and back-end implementation:

Frontend: Use the FormData object to send the file to the server.
Backend: The server will receive the file and store it at a designated location.
Example: File upload using Node.js backend
1. Frontend: Uploading files to the server
Here’s an updated version of the front-end code to handle file uploads to the server.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Transfer Tool</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
    #fileList { margin-top: 20px; }
  </style>
</head>
<body>
  <h1>File Transfer Tool</h1>
  <p>Use this page to upload and download files.</p>
  
  <!-- File upload section -->
  <input type="file" id="fileInput" multiple>
  <button id="uploadBtn">Upload File</button>

  <!-- File list -->
  <div id="fileList">
    <h3>Uploaded Files</h3>
    <ul id="files"></ul>
  </div>

  <script>
    const fileInput = document.getElementById('fileInput');
    const uploadBtn = document.getElementById('uploadBtn');
    const fileList = document.getElementById('files');

    // File upload functionality
    uploadBtn.addEventListener('click', () => {
      const files = fileInput.files;
      if (files.length === 0) {
        alert('Please select a file!');
        return;
      }

      const formData = new FormData();
      for (const file of files) {
        formData.append('files', file);  // Add the file to the FormData object
      }

      // Send the file to the server
      fetch('/upload', {
        method: 'POST',
        body: formData,
      })
      .then(response => response.json())
      .then(data => {
        alert('File uploaded successfully');
        // Update file list (show file paths or information returned from server)
        updateFileList(data.files);
      })
      .catch(error => {
        console.error('File upload failed:', error);
        alert('File upload failed');
      });
    });

    // Update file list
    function updateFileList(files) {
      fileList.innerHTML = '';
      files.forEach(file => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
          <span>${file.name}</span>
          <a href="${file.url}" download="${file.name}" style="margin-left: 10px;">Download</a>
        `;
        fileList.appendChild(listItem);
      });
    }
  </script>
</body>
</html>

2. Backend: Using Node.js to handle file storage
You can use Node.js with Express and the Multer library to handle the file upload and storage on the server.

First, install the necessary packages:

npm install express multer

Then, set up the Node.js server:

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

// Configure storage settings for uploaded files
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');  // Folder where the files will be stored
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname));  // Filename format
  }
});

const upload = multer({ storage: storage });

// File upload route
app.post('/upload', upload.array('files'), (req, res) => {
  const files = req.files.map(file => ({
    name: file.originalname,
    url: `http://localhost:3000/uploads/${file.filename}`,  // URL to access the file
  }));

  res.json({ files });  // Return file information to the frontend
});

// Serve static files (uploaded files)
app.use('/uploads', express.static('uploads'));

// Start the server
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Explanation:
Frontend: Sends the file to the server using FormData. Upon successful upload, the server returns the file information (name and URL), which is then displayed on the webpage.
Backend: The multer library handles file uploads, stores the files in the uploads/ folder, and generates a URL to access each uploaded file.
How to Test:
1.Start the Node.js server.
2.Open the HTML page and upload a file.
3.Once the file is uploaded, it will be stored on the server in the uploads/ directory, and you can download it by clicking the download link.
This method will actually store the uploaded files on the server, allowing them to be accessed and downloaded by the user.