add 3rd party fingerprinting block option

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)

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

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: {

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
 }
 

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,

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

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,