add 3rd party fingerprinting block option

fix #9029

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)

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)]}

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

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}

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
 }
 

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,

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

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,

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',

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')

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')
       }
     }