feat: implement experimental dnt setting (#400)

* feat: implement experimental dnt setting

* fix: send dnt-hesder after settings changed

Co-authored-by: Eryk Rakowski <sentialx@gmail.com>

src/constants/settings.ts

@@ -21,8 +21,9 @@ export const DEFAULT_SETTINGS: ISettings = {
   downloadsPath: remote
     ? remote.app.getPath('downloads')
     : app
-    ? app.getPath('downloads')
-    : '',
+      ? app.getPath('downloads')
+      : '',
+  doNotTrack: true,
 };
 
 export const DEFAULT_SEARCH_ENGINES = [

src/interfaces/settings.ts

@@ -25,4 +25,5 @@ export interface ISettings {
   darkContents: boolean;
   downloadsDialog: boolean;
   downloadsPath: string;
+  doNotTrack: boolean;
 }

src/main/view.ts

@@ -6,6 +6,7 @@ import storage from './services/storage';
 import Vibrant = require('node-vibrant');
 import { IHistoryItem, IBookmark } from '~/interfaces';
 import { WEBUI_BASE_URL } from '~/constants/files';
+import { windowsManager } from '.';
 import { NEWTAB_URL } from '~/constants/tabs';
 
 export class View extends BrowserView {
@@ -55,6 +56,13 @@ export class View extends BrowserView {
     this.window = window;
     this.homeUrl = url;
 
+    this.webContents.session.webRequest.onBeforeSendHeaders((details, callback) => {
+      const { object: settings } = windowsManager.settings;
+      if (settings.doNotTrack)
+        details.requestHeaders['DNT'] = '1'
+      callback({ requestHeaders: details.requestHeaders })
+    });
+
     ipcMain.handle(`get-error-url-${this.webContents.id}`, async e => {
       return this.errorURL;
     });

src/preloads/view-preload.ts

@@ -114,13 +114,14 @@ if (window.location.host === 'chrome.google.com') {
   injectChromeWebstoreInstallButton();
 }
 
+const settings = ipcRenderer.sendSync('get-settings-sync');
 if (
   window.location.href.startsWith(WEBUI_BASE_URL) ||
   window.location.protocol === 'wexond-error:'
 ) {
-  (async function() {
+  (async function () {
     const w = await webFrame.executeJavaScript('window');
-    w.settings = ipcRenderer.sendSync('get-settings-sync');
+    w.settings = settings;
     w.require = (id: string) => {
       if (id === 'electron') {
         return { ipcRenderer };
@@ -144,6 +145,13 @@ if (
       };
     }
   })();
+} else {
+  (async function () {
+    if (settings.doNotTrack) {
+      const w = await webFrame.executeJavaScript('window');
+      Object.defineProperty(w.navigator, 'doNotTrack', { value: 1 })
+    }
+  })()
 }
 
 if (window.location.href.startsWith(WEBUI_BASE_URL)) {

src/renderer/views/settings/components/App/index.tsx

@@ -34,14 +34,14 @@ const MenuItem = observer(
     children: any;
     icon?: string;
   }) => (
-    <NavigationDrawer.Item
-      onClick={() => (store.selectedSection = section)}
-      selected={store.selectedSection === section}
-      icon={icon}
-    >
-      {children}
-    </NavigationDrawer.Item>
-  ),
+      <NavigationDrawer.Item
+        onClick={() => (store.selectedSection = section)}
+        selected={store.selectedSection === section}
+        icon={icon}
+      >
+        {children}
+      </NavigationDrawer.Item>
+    ),
 );
 
 export default hot(
@@ -71,7 +71,9 @@ export default hot(
             <MenuItem icon={ICON_DOWNLOAD} section="downloads">
               Downloads
             </MenuItem>
-            {/* <MenuItem section="privacy">Privacy</MenuItem> */}
+            <MenuItem icon={icons.shield} section="privacy">
+              Privacy
+            </MenuItem>
             {/* <MenuItem section="permissions">Site permissions</MenuItem> */}
 
             {/* <MenuItem section="language">Languages</MenuItem> */}

src/renderer/views/settings/components/Privacy/index.tsx

@@ -1,14 +1,30 @@
 import * as React from 'react';
 
-import { Header } from '../App/style';
+import { Header, Row, Title, Control } from '../App/style';
 import { Button } from '~/renderer/components/Button';
 import store from '../../store';
 import { BLUE_500 } from '~/renderer/constants';
+import { observer } from 'mobx-react-lite';
+import { onSwitchChange } from '../../utils';
+import { Switch } from '~/renderer/components/Switch';
 
 const onClearBrowsingData = () => {
   store.dialogContent = 'privacy';
 };
 
+const DoNotTrackToggle = observer(() => {
+  const { doNotTrack } = store.settings;
+
+  return (
+    <Row onClick={onSwitchChange('doNotTrack')}>
+      <Title>Send a "Do Not Track" request with your browsing traffic</Title>
+      <Control>
+        <Switch value={doNotTrack} />
+      </Control>
+    </Row>
+  );
+});
+
 export const Privacy = () => {
   return (
     <>
@@ -20,6 +36,7 @@ export const Privacy = () => {
       >
         Clear browsing data
       </Button>
+      <DoNotTrackToggle />
     </>
   );
 };