feat: allow user select system for which to generate fingerprint

nodecar/src/camoufox-launcher.ts

@@ -352,6 +352,7 @@ interface GenerateConfigOptions {
   blockWebgl?: boolean;
   executablePath?: string;
   fingerprint?: string;
+  os?: "windows" | "macos" | "linux";
 }
 
 /**
@@ -433,6 +434,11 @@ export async function generateCamoufoxConfig(
 
     launchOpts.allowAddonNewTab = true;
 
+    // Add OS option for fingerprint generation
+    if (options.os) {
+      launchOpts.os = options.os;
+    }
+
     // Generate the configuration using launchOptions
     const generatedOptions = await launchOptions(launchOpts);
 

nodecar/src/index.ts

@@ -34,6 +34,10 @@ program
   .option("--fingerprint <json>", "fingerprint JSON string")
   .option("--headless", "run in headless mode")
   .option("--custom-config <json>", "custom config JSON string")
+  .option(
+    "--os <os>",
+    "operating system for fingerprint: windows, macos, linux",
+  )
 
   .description("manage Camoufox browser instances")
   .action(
@@ -284,6 +288,10 @@ program
               typeof options.fingerprint === "string"
                 ? options.fingerprint
                 : undefined,
+            os:
+              typeof options.os === "string"
+                ? (options.os as "windows" | "macos" | "linux")
+                : undefined,
           });
           console.log(config);
           process.exit(0);

src-tauri/src/browser_runner.rs

@@ -214,6 +214,10 @@ impl BrowserRunner {
         updated_camoufox_config.fingerprint = Some(new_fingerprint);
         // Preserve the randomize flag so it persists across launches
         updated_camoufox_config.randomize_fingerprint_on_launch = Some(true);
+        // Preserve the OS setting so it's used for future fingerprint generation
+        if camoufox_config.os.is_some() {
+          updated_camoufox_config.os = camoufox_config.os.clone();
+        }
         updated_profile.camoufox_config = Some(updated_camoufox_config.clone());
 
         log::info!(

src-tauri/src/camoufox_manager.rs

@@ -23,6 +23,7 @@ pub struct CamoufoxConfig {
   pub executable_path: Option<String>,
   pub fingerprint: Option<String>, // JSON string of the complete fingerprint config
   pub randomize_fingerprint_on_launch: Option<bool>, // Generate new fingerprint on every launch
+  pub os: Option<String>, // Operating system for fingerprint generation: "windows", "macos", or "linux"
 }
 
 impl Default for CamoufoxConfig {
@@ -40,6 +41,7 @@ impl Default for CamoufoxConfig {
       executable_path: None,
       fingerprint: None,
       randomize_fingerprint_on_launch: None,
+      os: None,
     }
   }
 }
@@ -171,6 +173,11 @@ impl CamoufoxManager {
       }
     }
 
+    // Add OS option for fingerprint generation
+    if let Some(os) = &config.os {
+      config_args.extend(["--os".to_string(), os.clone()]);
+    }
+
     // Execute config generation command
     let mut config_sidecar = self.get_nodecar_sidecar(app_handle)?;
     for arg in &config_args {
@@ -496,6 +503,7 @@ mod tests {
     assert_eq!(default_config.proxy, None);
     assert_eq!(default_config.fingerprint, None);
     assert_eq!(default_config.randomize_fingerprint_on_launch, None);
+    assert_eq!(default_config.os, None);
   }
 }
 

src/components/camoufox-config-dialog.tsx

@@ -10,7 +10,16 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import type { BrowserProfile, CamoufoxConfig } from "@/types";
+import type { BrowserProfile, CamoufoxConfig, CamoufoxOS } from "@/types";
+
+const getCurrentOS = (): CamoufoxOS => {
+  if (typeof navigator === "undefined") return "linux";
+  const platform = navigator.platform.toLowerCase();
+  if (platform.includes("win")) return "windows";
+  if (platform.includes("mac")) return "macos";
+  return "linux";
+};
+
 import { LoadingButton } from "./loading-button";
 import { RippleButton } from "./ui/ripple";
 
@@ -29,9 +38,10 @@ export function CamoufoxConfigDialog({
   onSave,
   isRunning = false,
 }: CamoufoxConfigDialogProps) {
-  const [config, setConfig] = useState<CamoufoxConfig>({
+  const [config, setConfig] = useState<CamoufoxConfig>(() => ({
     geoip: true,
-  });
+    os: getCurrentOS(),
+  }));
   const [isSaving, setIsSaving] = useState(false);
 
   // Initialize config when profile changes
@@ -40,6 +50,7 @@ export function CamoufoxConfigDialog({
       setConfig(
         profile.camoufox_config || {
           geoip: true,
+          os: getCurrentOS(),
         },
       );
     }
@@ -88,6 +99,7 @@ export function CamoufoxConfigDialog({
       setConfig(
         profile.camoufox_config || {
           geoip: true,
+          os: getCurrentOS(),
         },
       );
     }

src/components/create-profile-dialog.tsx

@@ -29,7 +29,16 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useBrowserDownload } from "@/hooks/use-browser-download";
 import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { getBrowserIcon } from "@/lib/browser-utils";
-import type { BrowserReleaseTypes, CamoufoxConfig } from "@/types";
+import type { BrowserReleaseTypes, CamoufoxConfig, CamoufoxOS } from "@/types";
+
+const getCurrentOS = (): CamoufoxOS => {
+  if (typeof navigator === "undefined") return "linux";
+  const platform = navigator.platform.toLowerCase();
+  if (platform.includes("win")) return "windows";
+  if (platform.includes("mac")) return "macos";
+  return "linux";
+};
+
 import { RippleButton } from "./ui/ripple";
 
 type BrowserTypeString =
@@ -111,9 +120,10 @@ export function CreateProfileDialog({
   const [selectedProxyId, setSelectedProxyId] = useState<string>();
 
   // Camoufox anti-detect states
-  const [camoufoxConfig, setCamoufoxConfig] = useState<CamoufoxConfig>({
+  const [camoufoxConfig, setCamoufoxConfig] = useState<CamoufoxConfig>(() => ({
     geoip: true, // Default to automatic geoip
-  });
+    os: getCurrentOS(), // Default to current OS
+  }));
 
   // Handle browser selection from the initial screen
   const handleBrowserSelect = (browser: BrowserTypeString) => {
@@ -379,6 +389,7 @@ export function CreateProfileDialog({
     setReleaseTypes({});
     setCamoufoxConfig({
       geoip: true, // Reset to automatic geoip
+      os: getCurrentOS(), // Reset to current OS
     });
     onClose();
   };

src/components/shared-camoufox-config-form.tsx

@@ -15,7 +15,11 @@ import {
 } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import type { CamoufoxConfig, CamoufoxFingerprintConfig } from "@/types";
+import type {
+  CamoufoxConfig,
+  CamoufoxFingerprintConfig,
+  CamoufoxOS,
+} from "@/types";
 
 interface SharedCamoufoxConfigFormProps {
   config: CamoufoxConfig;
@@ -31,6 +35,22 @@ const isFingerprintEditingDisabled = (config: CamoufoxConfig): boolean => {
   return config.randomize_fingerprint_on_launch === true;
 };
 
+// Detect the current operating system
+const getCurrentOS = (): CamoufoxOS => {
+  if (typeof navigator === "undefined") return "linux";
+  const platform = navigator.platform.toLowerCase();
+  if (platform.includes("win")) return "windows";
+  if (platform.includes("mac")) return "macos";
+  return "linux";
+};
+
+// OS display labels
+const osLabels: Record<CamoufoxOS, string> = {
+  windows: "Windows",
+  macos: "macOS",
+  linux: "Linux",
+};
+
 // Component for editing nested objects like webGl:parameters
 interface ObjectEditorProps {
   value: Record<string, unknown> | undefined;
@@ -102,6 +122,11 @@ export function SharedCamoufoxConfigForm({
   );
   const [fingerprintConfig, setFingerprintConfig] =
     useState<CamoufoxFingerprintConfig>({});
+  const [currentOS] = useState<CamoufoxOS>(getCurrentOS);
+
+  // Get selected OS (defaults to current OS)
+  const selectedOS = config.os || currentOS;
+  const isOSDifferent = selectedOS !== currentOS;
 
   // Set screen resolution to user's screen size when creating a new profile
   useEffect(() => {
@@ -188,6 +213,35 @@ export function SharedCamoufoxConfigForm({
 
   const renderAdvancedForm = () => (
     <div className="space-y-6">
+      {/* Operating System Selection */}
+      <div className="space-y-3">
+        <Label>Operating System Fingerprint</Label>
+        <Select
+          value={selectedOS}
+          onValueChange={(value: CamoufoxOS) => onConfigChange("os", value)}
+          disabled={readOnly}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select operating system" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="windows">{osLabels.windows}</SelectItem>
+            <SelectItem value="macos">{osLabels.macos}</SelectItem>
+            <SelectItem value="linux">{osLabels.linux}</SelectItem>
+          </SelectContent>
+        </Select>
+        {isOSDifferent && (
+          <Alert className="border-yellow-500/50 bg-yellow-500/10">
+            <AlertDescription className="text-yellow-600 dark:text-yellow-400">
+              ⚠️ Warning: Selecting an OS different from your current system (
+              {osLabels[currentOS]}) increases the risk of detection. Websites
+              can detect mismatches between your fingerprint and actual system
+              behavior.
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+
       {/* Randomize Fingerprint Option */}
       <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
         <div className="flex items-center space-x-2">
@@ -906,8 +960,40 @@ export function SharedCamoufoxConfigForm({
           </TabsList>
 
           <TabsContent value="automatic" className="space-y-6">
+            {/* Operating System Selection */}
+            <div className="mt-4 space-y-3">
+              <Label>Operating System Fingerprint</Label>
+              <Select
+                value={selectedOS}
+                onValueChange={(value: CamoufoxOS) =>
+                  onConfigChange("os", value)
+                }
+                disabled={readOnly}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select operating system" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="windows">{osLabels.windows}</SelectItem>
+                  <SelectItem value="macos">{osLabels.macos}</SelectItem>
+                  <SelectItem value="linux">{osLabels.linux}</SelectItem>
+                </SelectContent>
+              </Select>
+              {isOSDifferent && (
+                <Alert className="border-yellow-500/50 bg-yellow-500/10">
+                  <AlertDescription className="text-yellow-600 dark:text-yellow-400">
+                    ⚠️ Warning: Selecting an OS different from your current
+                    system ({osLabels[currentOS]}) increases the risk of
+                    detection. Websites with advanced protections can detect
+                    mismatches between your fingerprint and actual system
+                    behavior.
+                  </AlertDescription>
+                </Alert>
+              )}
+            </div>
+
             {/* Randomize Fingerprint Option */}
-            <div className="mt-4 space-y-3 p-4 border rounded-lg bg-muted/30">
+            <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
               <div className="flex items-center space-x-2">
                 <Checkbox
                   id="randomize-fingerprint-auto"

src/types.ts

@@ -82,6 +82,8 @@ export interface AppUpdateProgress {
   message: string;
 }
 
+export type CamoufoxOS = "windows" | "macos" | "linux";
+
 export interface CamoufoxConfig {
   proxy?: string;
   screen_max_width?: number;
@@ -95,6 +97,7 @@ export interface CamoufoxConfig {
   executable_path?: string;
   fingerprint?: string; // JSON string of the complete fingerprint config
   randomize_fingerprint_on_launch?: boolean; // Generate new fingerprint on every launch
+  os?: CamoufoxOS; // Operating system for fingerprint generation
 }
 
 // Extended interface for the advanced fingerprint configuration