From fb3f28e2d4fe06ce4cfa29ea0e1f4be60e42970e Mon Sep 17 00:00:00 2001
From: yan <yan@mit.edu>
Date: Wed, 26 Jul 2017 15:12:42 -0700
Subject: [PATCH] add 3rd party fingerprinting block option

fix #9029
---
 .../scripts/blockCanvasFingerprinting.js      |  5 ++
 .../brave/locales/en-US/bravery.properties    |  3 +
 .../locales/en-US/preferences.properties      |  1 -
 app/renderer/components/main/braveryPanel.js  | 59 +++++++++++++------
 app/sessionStore.js                           | 22 +++++++
 docs/state.md                                 |  9 ++-
 js/about/preferences.js                       | 18 +++++-
 js/constants/appConfig.js                     |  9 ++-
 js/constants/settings.js                      |  1 -
 js/state/contentSettings.js                   | 50 ++++++++++++++--
 js/state/siteSettings.js                      | 16 ++---
 js/state/syncUtil.js                          |  8 ++-
 less/switchControls.less                      |  3 +
 test/bravery-components/braveryPanelTest.js   | 51 ++++++++++++----
 test/fixtures/fingerprinting_iframe.html      | 53 +++++++++++++++++
 test/lib/selectors.js                         |  5 +-
 test/misc-components/syncTest.js              | 36 ++++++-----
 17 files changed, 284 insertions(+), 65 deletions(-)
 create mode 100644 test/fixtures/fingerprinting_iframe.html

diff --git a/app/extensions/brave/content/scripts/blockCanvasFingerprinting.js b/app/extensions/brave/content/scripts/blockCanvasFingerprinting.js
index 6d40115bf6b..bb0e5cbfe77 100644
--- a/app/extensions/brave/content/scripts/blockCanvasFingerprinting.js
+++ b/app/extensions/brave/content/scripts/blockCanvasFingerprinting.js
@@ -75,6 +75,11 @@ if (chrome.contentSettings.canvasFingerprinting == 'block') {
 
   function reportBlock (type) {
     var script_url = getOriginatingScriptUrl()
+    if (script_url) {
+      script_url = stripLineAndColumnNumbers(script_url)
+    } else {
+      script_url = window.location.href
+    }
     var msg = {
       type,
       scriptUrl: stripLineAndColumnNumbers(script_url)
diff --git a/app/extensions/brave/locales/en-US/bravery.properties b/app/extensions/brave/locales/en-US/bravery.properties
index dbccbe3592f..353dbd3da89 100644
--- a/app/extensions/brave/locales/en-US/bravery.properties
+++ b/app/extensions/brave/locales/en-US/bravery.properties
@@ -1,6 +1,7 @@
 blockAds=Block Ads
 allowAdsAndTracking=Allow Ads and Tracking
 block3rdPartyCookie=Block 3rd Party Cookies
+block3rdPartyFingerprinting=Block 3rd Party Fingerprinting
 httpsEverywhere=HTTPS Everywhere
 noScript=Block Scripts
 noScriptPref=Block Scripts (will break many sites)
@@ -10,7 +11,9 @@ fingerprintingProtection=Fingerprinting Protection
 adControl=Ad Control
 cookieControl=Cookie Control
 allowAllCookies=Allow all cookies
+allowAllFingerprinting=Allow all fingerprinting
 blockAllCookies=Block all cookies
+blockAllFingerprinting=Block all fingerprinting
 adBlock=Ad Block
 showBraveAds=Show Brave Ads
 adsBlocked={[plural(blockedAdCount)]}
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index 71cc0dc3ca7..ac1bc6f9a01 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -203,7 +203,6 @@ offerSearchSuggestions=Autocomplete search term as you type
 doNotTrackTitle=Do Not Track
 doNotTrack=Send a 'Do Not Track' header with browsing requests *
 fullscreenContent=Full Screen Content
-blockCanvasFingerprinting=Fingerprinting Protection (may break some sites)
 advancedSettingsTitle=Advanced Settings for Brave Payments
 advancedSettingsIcon.title=Advanced Settings
 ledgerRecoveryTitle=Recover your Brave wallet
diff --git a/app/renderer/components/main/braveryPanel.js b/app/renderer/components/main/braveryPanel.js
index 64343bab3f1..81f77affd1d 100644
--- a/app/renderer/components/main/braveryPanel.js
+++ b/app/renderer/components/main/braveryPanel.js
@@ -212,7 +212,8 @@ class BraveryPanel extends React.Component {
     props.noScriptEnabled = braverySettings.noScript
     props.httpsEnabled = braverySettings.httpsEverywhere
     props.adControl = braverySettings.adControl
-    props.isFpEnabled = braverySettings.fingerprintingProtection
+    props.isFpEnabled = braverySettings.fingerprintingProtection !== 'allowAllFingerprinting'
+    props.fingerprintingProtection = braverySettings.fingerprintingProtection
     props.cookieControl = braverySettings.cookieControl
     props.safeBrowsing = braverySettings.safeBrowsing
     props.isCompactBraveryPanel = getSetting(settings.COMPACT_BRAVERY_PANEL)
@@ -515,7 +516,7 @@ class BraveryPanel extends React.Component {
 
                 <SwitchControl className={css(
                   !this.props.isCompactBraveryPanel && gridStyles.row3col1,
-                  this.props.isCompactBraveryPanel && gridStyles.row5col1,
+                  this.props.isCompactBraveryPanel && gridStyles.row7col1,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__switchControl
                 )}
                   onClick={this.onToggleHTTPSE}
@@ -527,7 +528,7 @@ class BraveryPanel extends React.Component {
 
                 <SwitchControl className={css(
                   !this.props.isCompactBraveryPanel && gridStyles.row4col1,
-                  this.props.isCompactBraveryPanel && gridStyles.row6col1,
+                  this.props.isCompactBraveryPanel && gridStyles.row8col1,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__switchControl
                 )}
                   onClick={this.onToggleNoScript}
@@ -559,24 +560,48 @@ class BraveryPanel extends React.Component {
                   </BraveryPanelDropdown>
                 </div>
 
-                <SwitchControl className={css(
+                <div data-l10n-id='fingerprintingProtection' className={css(
+                  !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__title_disabled,
                   !this.props.isCompactBraveryPanel && gridStyles.row3col2,
-                  this.props.isCompactBraveryPanel && gridStyles.row7col1,
-                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__switchControl
-                )}
-                  customInfoButtonClassName={css(styles.braveryPanel__body__advanced__control__switchControl__infoButton)}
-                  onClick={this.onToggleFp}
-                  rightl10nId='fingerprintingProtection'
-                  checkedOn={this.props.isFpEnabled}
-                  disabled={!this.props.shieldsUp}
-                  onInfoClick={this.onInfoClick}
-                  infoTitle={config.fingerprintingInfoUrl}
-                  testId='fingerprintingProtectionSwitch'
+                  !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__title,
+                  this.props.isCompactBraveryPanel && gridStyles.row5col1,
+                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__title
+                )} />
+                <span className={cx({
+                  [css(gridStyles.row3col2)]: !this.props.isCompactBraveryPanel,
+                  [css(gridStyles.row5col1)]: this.props.isCompactBraveryPanel,
+                  [css(styles.braveryPanel__body__advanced__control__forms__title_disabled)]: !this.props.shieldsUp,
+                  [css(styles.braveryPanel_compact__body__advanced__control__forms__title)]: this.props.isCompactBraveryPanel,
+                  [css(styles.braveryPanel__body__advanced__control__forms__title)]: !this.props.isCompactBraveryPanel,
+                  fa: true,
+                  pullRight: true,
+                  'fa-question-circle': true
+                })}
+                  title={config.fingerprintingInfoUrl}
+                  onClick={this.onInfoClick}
                 />
 
-                <SwitchControl className={css(
+                <div className={css(
+                  !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__dropdown_disabled,
                   !this.props.isCompactBraveryPanel && gridStyles.row4col2,
-                  this.props.isCompactBraveryPanel && gridStyles.row8col1,
+                  !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__dropdown,
+                  this.props.isCompactBraveryPanel && gridStyles.row6col1,
+                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__dropdown
+                )}>
+                  <BraveryPanelDropdown
+                    data-test-id='fpControl'
+                    value={this.props.fingerprintingProtection}
+                    onChange={this.onToggleFp}
+                    disabled={!this.props.shieldsUp}>
+                    <option data-l10n-id='block3rdPartyFingerprinting' data-test-id='block3rdPartyFingerprinting' value='block3rdPartyFingerprinting' />
+                    <option data-l10n-id='allowAllFingerprinting' data-test-id='allowAllFingerprinting' value='allowAllFingerprinting' />
+                    <option data-l10n-id='blockAllFingerprinting' data-test-id='blockAllFingerprinting' value='blockAllFingerprinting' />
+                  </BraveryPanelDropdown>
+                </div>
+
+                <SwitchControl className={css(
+                  !this.props.isCompactBraveryPanel && gridStyles.row5col1,
+                  this.props.isCompactBraveryPanel && gridStyles.row9col1,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__switchControl
                 )}
                   onClick={this.onToggleSafeBrowsing}
diff --git a/app/sessionStore.js b/app/sessionStore.js
index d51ea865b6b..ac886c36f92 100644
--- a/app/sessionStore.js
+++ b/app/sessionStore.js
@@ -675,6 +675,28 @@ module.exports.runPreMigrations = (data) => {
 }
 
 module.exports.runPostMigrations = (data) => {
+  // fingerprinting protection migration
+  if (typeof data.settings['privacy.block-canvas-fingerprinting'] !== 'boolean') {
+    return data
+  }
+  try {
+    const siteSettings = data.siteSettings
+    if (siteSettings) {
+      for (let host in siteSettings) {
+        if (siteSettings[host].fingerprintingProtection === true) {
+          siteSettings[host].fingerprintingProtection = 'blockAllFingerprinting'
+        } else if (siteSettings[host].fingerprintingProtection === false) {
+          siteSettings[host].fingerprintingProtection = 'allowAllFingerprinting'
+        }
+      }
+    }
+    data['fingerprintingProtectionAll'] = {
+      enabled: data.settings['privacy.block-canvas-fingerprinting']
+    }
+    delete data.settings['privacy.block-canvas-fingerprinting']
+  } catch (e) {
+    console.log('fingerprinting protection migration failed', e)
+  }
   return data
 }
 
diff --git a/docs/state.md b/docs/state.md
index 2deafd3502b..2ac017e1748 100644
--- a/docs/state.md
+++ b/docs/state.md
@@ -150,6 +150,12 @@ AppStore
       }
     } // the unique id of the extension
   },
+  fingerprintingProtection: {
+    enabled: boolean // enable 3p fingerprinting blocking. default true.
+  },
+  fingerprintingProtectionAll: {
+    enabled: boolean // enable all fingerprinting blocking. default false.
+  },
   firstRunTimestamp: integer,
   flash: {
     enabled: boolean // enable flash
@@ -253,7 +259,6 @@ AppStore
     'payments.notificationTryPaymentsDismissed': boolean, // true if you dismiss the message or enable Payments
     'privacy.autocomplete.history-size': number, // number of autocomplete entries to keep
     'privacy.autofill-enabled': boolean, // true to enable autofill
-    'privacy.block-canvas-fingerprinting': boolean, // canvas fingerprinting defense
     'privacy.bookmark-suggestions': boolean, // auto suggest for bookmarks enabled
     'privacy.do-not-track': boolean, // whether DNT is 1
     'privacy.history-suggestions': boolean, // auto suggest for history enabled
@@ -292,7 +297,7 @@ AppStore
     [hostPattern]: {
       adControl: string, // (showBraveAds | blockAds | allowAdsAndTracking)
       cookieControl: string, // (block3rdPartyCookie | allowAllCookies | blockAllCookies)
-      fingerprintingProtection: boolean,
+      fingerprintingProtection: string, // (block3rdPartyFingerprinting | allowAllFingerprinting | blockAllFingerprinting)
       flash: (number|boolean), // approval expiration time if allowed, false if never allow
       fullscreenPermission: boolean,
       geolocationPermission: boolean,
diff --git a/js/about/preferences.js b/js/about/preferences.js
index f3ea271653f..ac11b3a7204 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -46,6 +46,8 @@ const searchProviders = require('../data/searchProviders')
 const adblock = appConfig.resourceNames.ADBLOCK
 const cookieblock = appConfig.resourceNames.COOKIEBLOCK
 const cookieblockAll = appConfig.resourceNames.COOKIEBLOCK_ALL
+const fingerprintingProtection = appConfig.resourceNames.FINGERPRINTING_PROTECTION
+const fingerprintingProtectionAll = appConfig.resourceNames.FINGERPRINTING_PROTECTION_ALL
 const adInsertion = appConfig.resourceNames.AD_INSERTION
 const trackingProtection = appConfig.resourceNames.TRACKING_PROTECTION
 const httpsEverywhere = appConfig.resourceNames.HTTPS_EVERYWHERE
@@ -88,7 +90,7 @@ const braveryPermissionNames = {
   'cookieControl': ['string'],
   'safeBrowsing': ['boolean'],
   'httpsEverywhere': ['boolean'],
-  'fingerprintingProtection': ['boolean'],
+  'fingerprintingProtection': ['string'],
   'noScript': ['boolean', 'number']
 }
 
@@ -488,6 +490,10 @@ class ShieldsTab extends ImmutableComponent {
     aboutActions.setResourceEnabled(cookieblock, e.target.value === 'block3rdPartyCookie')
     aboutActions.setResourceEnabled(cookieblockAll, e.target.value === 'blockAllCookies')
   }
+  onChangeFingerprintingProtection (e) {
+    aboutActions.setResourceEnabled(fingerprintingProtection, e.target.value === 'block3rdPartyFingerprinting')
+    aboutActions.setResourceEnabled(fingerprintingProtectionAll, e.target.value === 'blockAllFingerprinting')
+  }
   onToggleSetting (setting, e) {
     aboutActions.setResourceEnabled(setting, e.target.value)
   }
@@ -513,10 +519,18 @@ class ShieldsTab extends ImmutableComponent {
             <option data-l10n-id='blockAllCookies' value='blockAllCookies' />
           </SettingDropdown>
         </SettingItem>
+        <SettingItem dataL10nId='fingerprintingProtection'>
+          <SettingDropdown
+            value={this.props.braveryDefaults.get('fingerprintingProtection')}
+            onChange={this.onChangeFingerprintingProtection}>
+            <option data-l10n-id='block3rdPartyFingerprinting' value='block3rdPartyFingerprinting' />
+            <option data-l10n-id='allowAllFingerprinting' value='allowAllFingerprinting' />
+            <option data-l10n-id='blockAllFingerprinting' value='blockAllFingerprinting' />
+          </SettingDropdown>
+        </SettingItem>
         <SettingCheckbox checked={this.props.braveryDefaults.get('httpsEverywhere')} dataL10nId='httpsEverywhere' onChange={this.onToggleHTTPSE} />
         <SettingCheckbox checked={this.props.braveryDefaults.get('safeBrowsing')} dataL10nId='safeBrowsing' onChange={this.onToggleSafeBrowsing} />
         <SettingCheckbox checked={this.props.braveryDefaults.get('noScript')} dataL10nId='noScriptPref' onChange={this.onToggleNoScript} />
-        <SettingCheckbox dataL10nId='blockCanvasFingerprinting' prefKey={settings.BLOCK_CANVAS_FINGERPRINTING} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         {/* TODO: move this inline style to Aphrodite once refactored */}
         <div style={{marginTop: '15px'}}>
           <BrowserButton
diff --git a/js/constants/appConfig.js b/js/constants/appConfig.js
index 6c8dc164ac9..8e1779cbd67 100644
--- a/js/constants/appConfig.js
+++ b/js/constants/appConfig.js
@@ -24,6 +24,8 @@ module.exports = {
     SAFE_BROWSING: 'safeBrowsing',
     HTTPS_EVERYWHERE: 'httpsEverywhere',
     TRACKING_PROTECTION: 'trackingProtection',
+    FINGERPRINTING_PROTECTION: 'fingerprintingProtection', // block 3p fingerprinting
+    FINGERPRINTING_PROTECTION_ALL: 'fingerprintingProtectionAll', // block all fingerprinting
     AD_INSERTION: 'adInsertion',
     NOSCRIPT: 'noScript',
     FLASH: 'flash',
@@ -40,6 +42,12 @@ module.exports = {
   cookieblockAll: {
     enabled: false
   },
+  fingerprintingProtection: {
+    enabled: true
+  },
+  fingerprintingProtectionAll: {
+    enabled: false
+  },
   noScript: {
     enabled: false,
     twitterRedirectUrl: 'https://mobile.twitter.com/i/nojs_router'
@@ -148,7 +156,6 @@ module.exports = {
     'privacy.topsite-suggestions': true,
     'privacy.opened-tab-suggestions': true,
     'privacy.autocomplete.history-size': 500,
-    'privacy.block-canvas-fingerprinting': false,
     'bookmarks.toolbar.show': false,
     'bookmarks.toolbar.showFavicon': false,
     'bookmarks.toolbar.showOnlyFavicon': false,
diff --git a/js/constants/settings.js b/js/constants/settings.js
index bc53fce1093..82b45a7b83e 100644
--- a/js/constants/settings.js
+++ b/js/constants/settings.js
@@ -36,7 +36,6 @@ const settings = {
   OPENED_TAB_SUGGESTIONS: 'privacy.opened-tab-suggestions',
   AUTOCOMPLETE_HISTORY_SIZE: 'privacy.autocomplete.history-size',
   DO_NOT_TRACK: 'privacy.do-not-track',
-  BLOCK_CANVAS_FINGERPRINTING: 'privacy.block-canvas-fingerprinting',
   // Security Tab
   ACTIVE_PASSWORD_MANAGER: 'security.passwords.active-password-manager',
   SHUTDOWN_CLEAR_HISTORY: 'shutdown.clear-history',
diff --git a/js/state/contentSettings.js b/js/state/contentSettings.js
index e94e4acf912..8de582e23af 100644
--- a/js/state/contentSettings.js
+++ b/js/state/contentSettings.js
@@ -75,6 +75,7 @@ const getDefaultUserPrefContentSettings = (braveryDefaults, appSettings, appConf
       primaryPattern: '*'
     }],
     cookies: getDefault3rdPartyStorageSettings(braveryDefaults, appSettings, appConfig),
+    canvasFingerprinting: getDefaultFingerprintingSetting(braveryDefaults),
     referer: [{
       setting: braveryDefaults.get('cookieControl') !== 'allowAllCookies' ? 'block' : 'allow',
       primaryPattern: '*'
@@ -100,10 +101,6 @@ const getDefaultUserPrefContentSettings = (braveryDefaults, appSettings, appConf
       secondaryPattern: '*',
       primaryPattern: 'chrome-extension://*'
     }],
-    canvasFingerprinting: [{
-      setting: braveryDefaults.get('fingerprintingProtection') ? 'block' : 'allow',
-      primaryPattern: '*'
-    }],
     runInsecureContent: [{
       setting: 'block',
       primaryPattern: '*'
@@ -170,6 +167,40 @@ const getDefaultPluginSettings = (braveryDefaults, appSettings, appConfig) => {
   ]
 }
 
+const getDefaultFingerprintingSetting = (braveryDefaults, appSettings, appConfig) => {
+  braveryDefaults = makeImmutable(braveryDefaults)
+  if (braveryDefaults.get('fingerprintingProtection') === 'block3rdPartyFingerprinting') {
+    return [
+      {
+        setting: 'block',
+        primaryPattern: '*',
+        secondaryPattern: '*'
+      },
+      {
+        setting: 'allow',
+        primaryPattern: '*',
+        secondaryPattern: '[firstParty]'
+      }
+    ]
+  } else if (braveryDefaults.get('fingerprintingProtection') === 'blockAllFingerprinting') {
+    return [
+      {
+        setting: 'block',
+        primaryPattern: '*',
+        secondaryPattern: '*'
+      }
+    ]
+  } else {
+    return [
+      {
+        setting: 'allow',
+        primaryPattern: '*',
+        secondaryPattern: '*'
+      }
+    ]
+  }
+}
+
 const getDefault3rdPartyStorageSettings = (braveryDefaults, appSettings, appConfig) => {
   braveryDefaults = makeImmutable(braveryDefaults)
   if (braveryDefaults.get('cookieControl') === 'block3rdPartyCookie') {
@@ -278,8 +309,15 @@ const siteSettingsToContentSettings = (currentSiteSettings, defaultContentSettin
         contentSettings = addContentSettings(contentSettings, 'referer', primaryPattern, '*', 'allow')
       }
     }
-    if (typeof siteSetting.get('fingerprintingProtection') === 'boolean') {
-      contentSettings = addContentSettings(contentSettings, 'canvasFingerprinting', primaryPattern, '*', siteSetting.get('fingerprintingProtection') ? 'block' : 'allow')
+    if (siteSetting.get('fingerprintingProtection')) {
+      if (siteSetting.get('fingerprintingProtection') === 'block3rdPartyFingerprinting') {
+        contentSettings = addContentSettings(contentSettings, 'canvasFingerprinting', primaryPattern, '*', 'block')
+        contentSettings = addContentSettings(contentSettings, 'canvasFingerprinting', primaryPattern, '[firstParty]', 'allow')
+      } else if (siteSetting.get('fingerprintingProtection') === 'blockAllFingerprinting') {
+        contentSettings = addContentSettings(contentSettings, 'canvasFingerprinting', primaryPattern, '*', 'block')
+      } else {
+        contentSettings = addContentSettings(contentSettings, 'canvasFingerprinting', primaryPattern, '*', 'allow')
+      }
     }
     if (siteSetting.get('adControl')) {
       contentSettings = addContentSettings(contentSettings, 'adInsertion', primaryPattern, '*', siteSetting.get('adControl') === 'showBraveAds' ? 'allow' : 'block')
diff --git a/js/state/siteSettings.js b/js/state/siteSettings.js
index 9155c18f669..0f3fd542cc8 100644
--- a/js/state/siteSettings.js
+++ b/js/state/siteSettings.js
@@ -17,6 +17,9 @@ module.exports.braveryDefaults = (appState, appConfig) => {
   let blockTracking = defaults[appConfig.resourceNames.TRACKING_PROTECTION] || false
   let blockCookies = defaults[appConfig.resourceNames.COOKIEBLOCK] || false
   let blockCookiesAll = defaults[appConfig.resourceNames.COOKIEBLOCK_ALL] || false
+  let blockFingerprinting = defaults[appConfig.resourceNames.FINGERPRINTING_PROTECTION] || false
+  let blockFingerprintingAll = defaults[appConfig.resourceNames.FINGERPRINTING_PROTECTION_ALL] || false
+
   defaults.adControl = 'allowAdsAndTracking'
   if (blockAds && replaceAds && blockTracking) {
     defaults.adControl = 'showBraveAds'
@@ -27,13 +30,10 @@ module.exports.braveryDefaults = (appState, appConfig) => {
   if (blockCookiesAll) {
     defaults.cookieControl = 'blockAllCookies'
   }
-
-  // TODO(bridiver) this should work just like the other bravery settings
-  let fingerprintingProtection = appState.get('settings').get('privacy.block-canvas-fingerprinting')
-  if (typeof fingerprintingProtection !== 'boolean') {
-    fingerprintingProtection = appConfig.defaultSettings['privacy.block-canvas-fingerprinting']
+  defaults.fingerprintingProtection = blockFingerprinting ? 'block3rdPartyFingerprinting' : 'allowAllFingerprinting'
+  if (blockFingerprintingAll) {
+    defaults.fingerprintingProtection = 'blockAllFingerprinting'
   }
-  defaults.fingerprintingProtection = fingerprintingProtection
   return defaults
 }
 
@@ -96,10 +96,10 @@ module.exports.activeSettings = (siteSettings, appState, appConfig) => {
 
   settings.fingerprintingProtection = (() => {
     if (settings.shieldsUp === false) {
-      return false
+      return 'allowAllFingerprinting'
     }
     if (siteSettings) {
-      if (typeof siteSettings.get('fingerprintingProtection') === 'boolean') {
+      if (typeof siteSettings.get('fingerprintingProtection') === 'string') {
         return siteSettings.get('fingerprintingProtection')
       }
     }
diff --git a/js/state/syncUtil.js b/js/state/syncUtil.js
index 7c548f7aad7..d78a13d42b7 100644
--- a/js/state/syncUtil.js
+++ b/js/state/syncUtil.js
@@ -46,7 +46,7 @@ module.exports.siteSettingDefaults = {
   safeBrowsing: true,
   noScript: false,
   httpsEverywhere: true,
-  fingerprintingProtection: false,
+  fingerprintingProtection: false, // boolean for backwards compatibility
   ledgerPayments: true,
   ledgerPaymentsShown: true,
   ledgerPinPercentage: 0
@@ -188,6 +188,9 @@ const applySiteSettingRecord = (record) => {
       return adControlEnum[value]
     } else if (key === 'cookieControl') {
       return cookieControlEnum[value]
+    } else if (key === 'fingerprintingProtection' && typeof value === 'boolean') {
+      // TODO: Migrate from bool to enum on all platforms
+      return value ? 'blockAllFingerprinting' : 'block3rdPartyFingerprinting'
     } else {
       return value
     }
@@ -700,6 +703,9 @@ module.exports.createSiteSettingsData = (hostPattern, setting) => {
       objectData[key] = adControlEnum[value]
     } else if (key === 'cookieControl' && typeof cookieControlEnum[value] !== 'undefined') {
       objectData[key] = cookieControlEnum[value]
+    } else if (key === 'fingerprintingProtection') {
+      // TODO: migrate from bool to enum on all platforms
+      objectData[key] = value === 'blockAllFingerprinting'
     } else if (key in module.exports.siteSettingDefaults) {
       objectData[key] = value
     }
diff --git a/less/switchControls.less b/less/switchControls.less
index 597b8266e41..689dd276193 100644
--- a/less/switchControls.less
+++ b/less/switchControls.less
@@ -85,3 +85,6 @@
     }
   }
 }
+.pullRight {
+  text-align: right;
+}
diff --git a/test/bravery-components/braveryPanelTest.js b/test/bravery-components/braveryPanelTest.js
index 1c0ad6d93e1..49ea449a4e9 100644
--- a/test/bravery-components/braveryPanelTest.js
+++ b/test/bravery-components/braveryPanelTest.js
@@ -15,7 +15,10 @@ const {
   httpsEverywhereStat,
   noScriptSwitch,
   noScriptStat,
-  fpSwitch,
+  fpControl,
+  blockFpOption,
+  allowFpOption,
+  defaultFpOption,
   fpStat,
   cookieControl,
   allowAllCookiesOption,
@@ -33,6 +36,14 @@ describe('Bravery Panel', function () {
       .waitForVisible(urlInput)
   }
 
+  function * changeFpSetting (client, fpSetting) {
+    yield client
+      .waitForVisible(fpControl)
+      .click(fpControl)
+      .waitForVisible(fpSetting)
+      .click(fpSetting)
+  }
+
   describe('General', function () {
     Brave.beforeEach(this)
     beforeEach(function * () {
@@ -138,6 +149,12 @@ describe('Bravery Panel', function () {
         return process.platform === 'linux' ? stat === '2' : stat === '3'
       })
     }
+    const verifyDoubleFingerprintingStat = function () {
+      // XXX: WebGL seems to be broken in Brave on Linux distros. #3227
+      return this.getText(fpStat).then((stat) => {
+        return process.platform === 'linux' ? stat === '4' : stat === '6'
+      })
+    }
 
     it('downloads and detects regional adblock resources in private tab', function * () {
       const url = Brave.server.url('adblock.html')
@@ -785,51 +802,61 @@ describe('Bravery Panel', function () {
         })
     })
     it('blocks fingerprinting', function * () {
-      const url = Brave.server.url('fingerprinting.html')
+      const url = Brave.server.url('fingerprinting_iframe.html')
       yield this.app.client
         .tabByIndex(0)
         .loadUrl(url)
         .openBraveMenu(braveMenu, braveryPanel)
-        .click(fpSwitch)
-        .waitUntil(verifyFingerprintingStat)
+      yield changeFpSetting(this.app.client, blockFpOption)
+      yield this.app.client
+        .waitUntil(verifyDoubleFingerprintingStat)
         .keys(Brave.keys.ESCAPE)
         .newTab({ url, isPrivate: true })
         .waitForTabCount(2)
         .waitForUrl(url)
         .openBraveMenu(braveMenu, braveryPanel)
         .waitUntil(verifyFingerprintingStat)
-        .click(fpSwitch)
+      yield changeFpSetting(this.app.client, allowFpOption)
+      yield this.app.client
         .waitForTextValue(fpStat, '0')
         .keys(Brave.keys.ESCAPE)
         .newTab({ url })
         .waitForTabCount(3)
         .waitForUrl(url)
         .openBraveMenu(braveMenu, braveryPanel)
+        .waitUntil(verifyDoubleFingerprintingStat)
+      yield changeFpSetting(this.app.client, defaultFpOption)
+      yield this.app.client
         .waitUntil(verifyFingerprintingStat)
     })
     it('blocks fingerprinting on compact panel', function * () {
-      const url = Brave.server.url('fingerprinting.html')
+      const url = Brave.server.url('fingerprinting_iframe.html')
       yield this.app.client
         .changeSetting(settings.COMPACT_BRAVERY_PANEL, true)
 
         .tabByIndex(0)
         .loadUrl(url)
         .openBraveMenu(braveMenu, braveryPanelCompact)
-        .click(fpSwitch)
-        .waitUntil(verifyFingerprintingStat)
+      yield changeFpSetting(this.app.client, blockFpOption)
+      yield this.app.client
+        .waitUntil(verifyDoubleFingerprintingStat)
         .keys(Brave.keys.ESCAPE)
         .newTab({ url, isPrivate: true })
         .waitForTabCount(2)
         .waitForUrl(url)
         .openBraveMenu(braveMenu, braveryPanelCompact)
         .waitUntil(verifyFingerprintingStat)
-        .click(fpSwitch)
+      yield changeFpSetting(this.app.client, allowFpOption)
+      yield this.app.client
         .waitForTextValue(fpStat, '0')
         .keys(Brave.keys.ESCAPE)
         .newTab({ url })
         .waitForTabCount(3)
         .waitForUrl(url)
         .openBraveMenu(braveMenu, braveryPanelCompact)
+        .waitUntil(verifyDoubleFingerprintingStat)
+      yield changeFpSetting(this.app.client, defaultFpOption)
+      yield this.app.client
         .waitUntil(verifyFingerprintingStat)
     })
     it('block device enumeration', function * () {
@@ -844,7 +871,8 @@ describe('Bravery Panel', function () {
             })
         })
         .openBraveMenu(braveMenu, braveryPanel)
-        .click(fpSwitch)
+      yield changeFpSetting(this.app.client, blockFpOption)
+      yield this.app.client
         .waitUntil(function () {
           return this.getText(fpStat)
             .then((stat) => stat === '1')
@@ -871,7 +899,8 @@ describe('Bravery Panel', function () {
           return this.getText(fpStat)
             .then((stat) => stat === '1')
         })
-        .click(fpSwitch)
+      yield changeFpSetting(this.app.client, defaultFpOption)
+      yield this.app.client
         .tabByUrl(url)
         .waitUntil(function () {
           return this.getText('body')
diff --git a/test/fixtures/fingerprinting_iframe.html b/test/fixtures/fingerprinting_iframe.html
new file mode 100644
index 00000000000..d37679a94fb
--- /dev/null
+++ b/test/fixtures/fingerprinting_iframe.html
@@ -0,0 +1,53 @@
+<iframe src='https://jsfiddle.net/bkf50r8v/13/'></iframe>
+
+<div>
+fingerprinting test
+</div>
+<div>
+<div id='canvas'></div>
+<div id='gl'></div>
+<div id='webrtc'></div>
+</div>
+
+<script>
+ // WebRTC from https://github.com/diafygi/webrtc-ips
+  var RTCPeerConnection = window.webkitRTCPeerConnection;
+  //minimal requirements for data connection
+  var mediaConstraints = {
+      optional: [{RtpDataChannels: true}]
+  };
+  var servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};
+  //construct a new RTCPeerConnection
+  var pc = new RTCPeerConnection(servers, mediaConstraints);
+  //listen for candidate events
+  pc.onicecandidate = function(ice){
+      //skip non-candidate events
+      if(ice.candidate)
+          console.log(ice.candidate.candidate);
+  };
+  //create a bogus data channel
+  pc.createDataChannel("");
+  //create an offer sdp
+  pc.createOffer(function(result){
+      //trigger the stun server request
+      pc.setLocalDescription(result, function(){}, function(){});
+      document.getElementById('webrtc').innerText = 'got webrtc fingerprint'
+  }, function(){});
+
+  // Canvas
+      var canvas = document.createElement("canvas");
+      canvas.width = 2000;
+      canvas.height = 200;
+      canvas.style.display = "inline";
+      var ctx = canvas.getContext("2d");
+      ctx.rect(0, 0, 10, 10);
+      ctx.rect(2, 2, 6, 6);
+      document.getElementById('canvas').innerText = canvas.toDataURL() ? 'got canvas fingerprint ' + canvas.toDataURL() : ''
+// WebGL
+canvas = document.createElement("canvas");
+var gl = canvas.getContext("webgl")
+gl.clearColor(0.0, 0.0, 0.0, 1.0);
+if (gl.getSupportedExtensions()) {
+  document.getElementById('gl').innerText = 'got webgl fingerprint ' + gl.getSupportedExtensions().join(";") + gl.getParameter(gl.ALPHA_BITS);
+}
+</script>
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 0b429493afa..ee846903b83 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -49,10 +49,13 @@ module.exports = {
   showAdsOption: '[data-test-id="showAdsOption"]',
   blockAdsOption: '[data-test-id="blockAdsOption"]',
   noScriptSwitch: '[data-test-id="noScriptSwitch"]  .switchMiddle',
+  fpControl: '[data-test-id="fpControl"]',
+  blockFpOption: '[data-test-id="blockAllFingerprinting"]',
+  allowFpOption: '[data-test-id="allowAllFingerprinting"]',
+  defaultFpOption: '[data-test-id="block3rdPartyFingerprinting"]',
   cookieControl: '[data-test-id="cookieControl"]',
   allowAllCookiesOption: '[data-test-id="allowAllCookies"]',
   blockAllCookiesOption: '[data-test-id="blockAllCookies"]',
-  fpSwitch: '[data-test-id="fingerprintingProtectionSwitch"] .switchMiddle',
 
   braveryPanelContainer: '[data-test-id="braveryPanelContainer"]',
   httpsEverywhereSwitch: '[data-test-id="httpsEverywhereSwitch"] .switchMiddle',
diff --git a/test/misc-components/syncTest.js b/test/misc-components/syncTest.js
index 7ea595a4caa..1226a9bf00c 100644
--- a/test/misc-components/syncTest.js
+++ b/test/misc-components/syncTest.js
@@ -5,7 +5,7 @@ const settings = require('../../js/constants/settings')
 const {newTabMode} = require('../../app/common/constants/settingsEnums')
 const Brave = require('../lib/brave')
 const Immutable = require('immutable')
-const {adsBlockedControl, allowAllCookiesOption, bookmarksToolbar, braveMenu, braveryPanel, braveryPanelContainer, cookieControl, doneButton, fpSwitch, httpsEverywhereSwitch, navigatorBookmarked, navigatorNotBookmarked, noScriptSwitch, urlInput, removeButton, safeBrowsingSwitch, showAdsOption, syncTab, syncSwitch, bookmarkNameInput} = require('../lib/selectors')
+const {adsBlockedControl, allowAllCookiesOption, bookmarksToolbar, braveMenu, braveryPanel, braveryPanelContainer, cookieControl, doneButton, fpControl, blockFpOption, httpsEverywhereSwitch, navigatorBookmarked, navigatorNotBookmarked, noScriptSwitch, urlInput, removeButton, safeBrowsingSwitch, showAdsOption, syncTab, syncSwitch, bookmarkNameInput} = require('../lib/selectors')
 const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
 const aboutBookmarksUrl = getTargetAboutUrl('about:bookmarks')
 const aboutHistoryUrl = getTargetAboutUrl('about:history')
@@ -748,7 +748,9 @@ describe('Syncing site settings', function () {
       .waitForVisible(httpsEverywhereSwitch)
       .click(httpsEverywhereSwitch)
       .click(noScriptSwitch)
-      .click(fpSwitch)
+      .click(fpControl)
+      .waitForVisible(blockFpOption)
+      .click(blockFpOption)
       .click(safeBrowsingSwitch)
       .click(adsBlockedControl)
       .waitForVisible(showAdsOption)
@@ -779,7 +781,7 @@ describe('Syncing site settings', function () {
     yield Brave.app.client
       .windowByUrl(Brave.browserWindowUrl)
       .waitUntil(checkSiteSetting(hostPattern, 'httpsEverywhere', false))
-      .waitUntil(checkSiteSetting(hostPattern, 'fingerprintingProtection', true))
+      .waitUntil(checkSiteSetting(hostPattern, 'fingerprintingProtection', 'blockAllFingerprinting'))
       .waitUntil(checkSiteSetting(hostPattern, 'safeBrowsing', false))
       .waitUntil(checkSiteSetting(hostPattern, 'adControl', 'allowAdsAndTracking'))
       .waitUntil(checkSiteSetting(hostPattern, 'cookieControl', 'allowAllCookies'))
@@ -886,9 +888,11 @@ describe('Syncing then turning it off stops syncing', function () {
       .tabByIndex(0)
       .loadUrl(this.page3Url)
       .openBraveMenu(braveMenu, braveryPanel)
-      .waitForVisible(fpSwitch)
-      .click(fpSwitch)
-      .waitUntil(checkSiteSetting(this.hostPattern1, this.siteSettingName, true))
+      .waitForVisible(fpControl)
+      .click(fpControl)
+      .waitForVisible(blockFpOption)
+      .click(blockFpOption)
+      .waitUntil(checkSiteSetting(this.hostPattern1, this.siteSettingName, 'blockAllFingerprinting'))
       .moveToObject(navigatorNotBookmarked)
       .leftClick()
       .waitForVisible(braveryPanelContainer, 1000, true)
@@ -901,9 +905,11 @@ describe('Syncing then turning it off stops syncing', function () {
       .tabByIndex(0)
       .loadUrl(this.page4Url)
       .openBraveMenu(braveMenu, braveryPanel)
-      .waitForVisible(fpSwitch)
-      .click(fpSwitch)
-      .waitUntil(checkSiteSetting(this.hostPattern2, this.siteSettingName, true))
+      .waitForVisible(fpControl)
+      .click(fpControl)
+      .waitForVisible(blockFpOption)
+      .click(blockFpOption)
+      .waitUntil(checkSiteSetting(this.hostPattern1, this.siteSettingName, 'blockAllFingerprinting'))
 
     // Finally start a fresh profile and setup sync
     yield Brave.stopApp()
@@ -938,7 +944,7 @@ describe('Syncing then turning it off stops syncing', function () {
     const hostPattern2 = this.hostPattern2
     yield Brave.app.client
       .windowByUrl(Brave.browserWindowUrl)
-      .waitUntil(checkSiteSetting(hostPattern1, this.siteSettingName, true))
+      .waitUntil(checkSiteSetting(hostPattern1, this.siteSettingName, 'blockAllFingerprinting'))
       .waitUntil(function () {
         return this.getAppState().then((val) => {
           return val.value.siteSettings.hasOwnProperty(hostPattern2) === false
@@ -981,9 +987,11 @@ describe('Syncing then turning it off, then turning it on sends new records', fu
       .tabByIndex(0)
       .loadUrl(this.page3Url)
       .openBraveMenu(braveMenu, braveryPanel)
-      .waitForVisible(fpSwitch)
-      .click(fpSwitch)
-      .waitUntil(checkSiteSetting(this.hostPattern1, this.siteSettingName, true))
+      .waitForVisible(fpControl)
+      .click(fpControl)
+      .waitForVisible(blockFpOption)
+      .click(blockFpOption)
+      .waitUntil(checkSiteSetting(this.hostPattern1, this.siteSettingName, 'blockAllFingerprinting'))
       .moveToObject(navigatorNotBookmarked)
       .leftClick()
       .waitForVisible(braveryPanelContainer, 1000, true)
@@ -1030,6 +1038,6 @@ describe('Syncing then turning it off, then turning it on sends new records', fu
     const hostPattern1 = this.hostPattern1
     yield Brave.app.client
       .windowByUrl(Brave.browserWindowUrl)
-      .waitUntil(checkSiteSetting(hostPattern1, this.siteSettingName, true))
+      .waitUntil(checkSiteSetting(hostPattern1, this.siteSettingName, 'blockAllFingerprinting'))
   })
 })