Merge pull request #10181 from brave/feature/9029

add 3rd party fingerprinting block option
brave · Aug 15, 2017 · e8f32db · e8f32db
2 parents 890c58f + ce3a8ae
commit e8f32db
Show file tree

Hide file tree

Showing 17 changed files with 306 additions and 93 deletions.
diff --git a/app/extensions/brave/content/scripts/blockCanvasFingerprinting.js b/app/extensions/brave/content/scripts/blockCanvasFingerprinting.js
@@ -145,6 +145,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
@@ -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
@@ -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
@@ -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)
@@ -496,8 +497,7 @@ class BraveryPanel extends React.Component {
                 <div data-l10n-id='adControl' className={css(
                   !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__title_disabled,
                   gridStyles.row1col1,
-                  !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__title,
-                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__title
+                  styles.braveryPanel__body__advanced__control__forms__title
                 )} />
 
                 <div className={css(
@@ -514,8 +514,8 @@ class BraveryPanel extends React.Component {
                 </div>
 
                 <SwitchControl className={css(
-                  !this.props.isCompactBraveryPanel && gridStyles.row3col1,
-                  this.props.isCompactBraveryPanel && gridStyles.row5col1,
+                  !this.props.isCompactBraveryPanel && gridStyles.row5col1,
+                  this.props.isCompactBraveryPanel && gridStyles.row7col1,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__switchControl
                 )}
                   onClick={this.onToggleHTTPSE}
@@ -526,8 +526,8 @@ class BraveryPanel extends React.Component {
                 />
 
                 <SwitchControl className={css(
-                  !this.props.isCompactBraveryPanel && gridStyles.row4col1,
-                  this.props.isCompactBraveryPanel && gridStyles.row6col1,
+                  !this.props.isCompactBraveryPanel && gridStyles.row6col1,
+                  this.props.isCompactBraveryPanel && gridStyles.row8col1,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__switchControl
                 )}
                   onClick={this.onToggleNoScript}
@@ -540,9 +540,8 @@ class BraveryPanel extends React.Component {
                 <div data-l10n-id='cookieControl' className={css(
                   !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__title_disabled,
                   !this.props.isCompactBraveryPanel && gridStyles.row1col2,
-                  !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__title,
                   this.props.isCompactBraveryPanel && gridStyles.row3col1,
-                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__title
+                  styles.braveryPanel__body__advanced__control__forms__title
                 )} />
 
                 <div className={css(
@@ -559,24 +558,41 @@ class BraveryPanel extends React.Component {
                   </BraveryPanelDropdown>
                 </div>
 
-                <SwitchControl className={css(
-                  !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'
-                />
+                <div className={css(
+                  !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__title_disabled,
+                  !this.props.isCompactBraveryPanel && gridStyles.row3col1,
+                  this.props.isCompactBraveryPanel && gridStyles.row5col1,
+                  styles.braveryPanel__body__advanced__control__fpWrapper,
+                  styles.braveryPanel__body__advanced__control__forms__title
+                )}>
+                  <span data-l10n-id='fingerprintingProtection' />
+                  <span className={globalStyles.appIcons.question}
+                    title={config.fingerprintingInfoUrl}
+                    onClick={this.onInfoClick}
+                  />
+                </div>
+
+                <div className={css(
+                  !this.props.shieldsUp && styles.braveryPanel__body__advanced__control__forms__dropdown_disabled,
+                  !this.props.isCompactBraveryPanel && gridStyles.row4col1,
+                  !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.row4col2,
-                  this.props.isCompactBraveryPanel && gridStyles.row8col1,
+                  !this.props.isCompactBraveryPanel && gridStyles.row5col2,
+                  this.props.isCompactBraveryPanel && gridStyles.row9col1,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__switchControl
                 )}
                   onClick={this.onToggleSafeBrowsing}
@@ -591,7 +607,6 @@ class BraveryPanel extends React.Component {
           }
           <hr className={css(
             styles.braveryPanel__body__hr,
-            styles.braveryPanel__body__hr_splitter,
             this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__hr
           )} />
           <div className={css(
@@ -685,6 +700,10 @@ const gridStyles = StyleSheet.create({
     gridRow: 5,
     gridColumn: 1
   },
+  row5col2: {
+    gridRow: 5,
+    gridColumn: 2
+  },
   row6col1: {
     gridRow: 6,
     gridColumn: 1
@@ -696,6 +715,10 @@ const gridStyles = StyleSheet.create({
   row8col1: {
     gridRow: 8,
     gridColumn: 1
+  },
+  row9col1: {
+    gridRow: 9,
+    gridColumn: 1
   }
 })
 
@@ -891,10 +914,7 @@ const styles = StyleSheet.create({
     background: globalStyles.braveryPanel.body.hr.background,
     border: 0,
     height: '1px',
-    margin: '10px 0'
-  },
-  braveryPanel__body__hr_splitter: {
-    marginTop: '30px'
+    margin: '1rem 0'
   },
   braveryPanel__body__footer: {
     display: 'flex',
@@ -956,14 +976,11 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexFlow: 'column nowrap'
   },
-  braveryPanel_compact__body__advanced__control__forms__title: {
-    margin: '0 0 .25rem .25rem'
-  },
   braveryPanel_compact__body__advanced__control__forms__dropdown: {
     marginBottom: '.75rem'
   },
   braveryPanel_compact__body__advanced__control__switchControl: {
-    padding: '5px 0 5px .25rem'
+    padding: '5px .25rem'
   },
   braveryPanel_compact__body__footer: {
     padding: '0 .25rem'
@@ -979,15 +996,19 @@ const styles = StyleSheet.create({
     margin: '15px 10px'
   },
   braveryPanel__body__advanced__control__forms__title: {
-    marginBottom: '4px',
-    marginLeft: '8px'
+    margin: '0 .25rem .25rem .25rem'
   },
   braveryPanel__body__advanced__control__forms__title_disabled: {
     opacity: 0.3
   },
   braveryPanel__body__advanced__control__forms__dropdown_disabled: {
     opacity: 0.3
   },
+  braveryPanel__body__advanced__control__fpWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
   braveryPanel__body__advanced__control__switchControl__infoButton: {
     display: 'inline',
     cursor: 'pointer',

diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -241,21 +241,22 @@ const globalStyles = {
     prefsPanelHeading: '23px'
   },
   appIcons: {
+    angleDoubleRight: 'fa fa-angle-double-right',
     clipboard: 'fa fa-clipboard',
     closeTab: 'fa fa-times-circle',
     defaultIcon: 'fa fa-file-o',
+    exclude: 'fa fa-ban',
+    findNext: 'fa fa-caret-down',
+    findPrev: 'fa fa-caret-up',
     loading: 'fa fa-spinner fa-spin',
+    moreInfo: 'fa fa-info-circle',
     private: 'fa fa-eye',
+    question: 'fa fa-question-circle',
     refresh: 'fa fa-refresh',
     remove: 'fa fa-times',
-    volumeOff: 'fa fa-volume-off',
-    volumeOn: 'fa fa-volume-up',
-    exclude: 'fa fa-ban',
     trash: 'fa fa-trash',
-    moreInfo: 'fa fa-info-circle',
-    angleDoubleRight: 'fa fa-angle-double-right',
-    findPrev: 'fa fa-caret-up',
-    findNext: 'fa fa-caret-down'
+    volumeOff: 'fa fa-volume-off',
+    volumeOn: 'fa fa-volume-up'
   },
   animations: {
     subtleShowUp: {

diff --git a/app/sessionStore.js b/app/sessionStore.js
@@ -699,6 +699,28 @@ module.exports.runPreMigrations = (data) => {
 }
 
 module.exports.runPostMigrations = (immutableData) => {
+  const globalFpSetting = immutableData.getIn(['settings', 'privacy.block-canvas-fingerprinting'])
+  // fingerprinting protection migration
+  if (typeof globalFpSetting !== 'boolean') {
+    return immutableData
+  }
+  try {
+    const siteSettings = immutableData.get('siteSettings', Immutable.Map())
+      .map((setting) => {
+        const fpSetting = setting.get('fingerprintingProtection')
+        if (fpSetting === true) {
+          return setting.set('fingerprintingProtection', 'blockAllFingerprinting')
+        } else if (fpSetting === false) {
+          return setting.set('fingerprintingProtection', 'allowAllFingerprinting')
+        }
+        return setting
+      })
+    immutableData = immutableData.set('siteSettings', siteSettings)
+    immutableData = immutableData.setIn(['fingerprintingProtectionAll', 'enabled'],
+      globalFpSetting).deleteIn(['settings', 'privacy.block-canvas-fingerprinting'])
+  } catch (e) {
+    console.log('fingerprinting protection migration failed', e)
+  }
   return immutableData
 }
 

diff --git 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
@@ -255,7 +261,6 @@ AppStore
     'payments.sites-show-less': boolean, // whether to show less sites in the payments list
     '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
@@ -294,7 +299,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
@@ -47,6 +47,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
@@ -89,7 +91,7 @@ const braveryPermissionNames = {
   'cookieControl': ['string'],
   'safeBrowsing': ['boolean'],
   'httpsEverywhere': ['boolean'],
-  'fingerprintingProtection': ['boolean'],
+  'fingerprintingProtection': ['string'],
   'noScript': ['boolean', 'number']
 }
 
@@ -492,6 +494,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)
   }
@@ -517,10 +523,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
@@ -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'
@@ -147,7 +155,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,