Expose ability to toggle on/off cname-uncloaking to all users

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/1513

Prior to this commit, the ability to enable/disable the
uncloaking of canonical names was only available to advanced
users. This commit make it so that the setting can be
toggled from the _Settings_ pane.

The setting is enabled by default. The documentation should
be clear that the setting should not be disabled unless it
actually solves serious network issues, for example:

https://bugzilla.mozilla.org/show_bug.cgi?id=1694404

Also, as a result, the advanced setting `cnameUncloak` is no
longer available from within the advanced settings editor.

platform/firefox/vapi-webrequest.js

@@ -50,7 +50,7 @@
     const parsedURL = new URL('about:blank');
 
     // Canonical name-uncloaking feature.
-    let cnameUncloak = browser.dns instanceof Object;
+    let cnameUncloakEnabled = browser.dns instanceof Object;
     let cnameUncloakProxied = false;
 
     // https://github.com/uBlockOrigin/uBlock-issues/issues/911
@@ -59,7 +59,7 @@
     //   DNS leaks.
     const proxyDetector = function(details) {
         if ( details.proxyInfo instanceof Object ) {
-            cnameUncloak = false;
+            cnameUncloakEnabled = false;
             proxyDetectorTryCount = 0;
         }
         if ( proxyDetectorTryCount === 0 ) {
@@ -81,6 +81,7 @@
         constructor() {
             super();
             this.pendingRequests = [];
+            this.canUncloakCnames = browser.dns instanceof Object;
             this.cnames = new Map([ [ '', '' ] ]);
             this.cnameIgnoreList = null;
             this.cnameIgnore1stParty = true;
@@ -92,9 +93,10 @@
         }
         setOptions(options) {
             super.setOptions(options);
-            if ( 'cnameUncloak' in options ) {
+            if ( 'cnameUncloakEnabled' in options ) {
-                cnameUncloak = browser.dns instanceof Object &&
+                cnameUncloakEnabled =
-                               options.cnameUncloak !== false;
+                    this.canUncloakCnames &&
+                    options.cnameUncloakEnabled !== false;
             }
             if ( 'cnameUncloakProxied' in options ) {
                 cnameUncloakProxied = options.cnameUncloakProxied === true;
@@ -127,7 +129,7 @@
             //   Install/remove proxy detector.
             if ( vAPI.webextFlavor.major < 80 ) {
                 const wrohr = browser.webRequest.onHeadersReceived;
-                if ( cnameUncloak === false || cnameUncloakProxied ) {
+                if ( cnameUncloakEnabled === false || cnameUncloakProxied ) {
                     if ( wrohr.hasListener(proxyDetector) ) {
                         wrohr.removeListener(proxyDetector);
                     }
@@ -266,7 +268,7 @@
         }
         onBeforeSuspendableRequest(details) {
             const r = super.onBeforeSuspendableRequest(details);
-            if ( cnameUncloak === false ) { return r; }
+            if ( cnameUncloakEnabled === false ) { return r; }
             if ( r !== undefined ) {
                 if (
                     r.cancel === true ||

src/_locales/en/messages.json

@@ -371,6 +371,10 @@
     "message": "Block CSP reports",
     "description": "background information: https://github.com/gorhill/uBlock/issues/3150"
   },
+  "settingsUncloakCnamePrompt": {
+    "message": "Uncloak canonical names",
+    "description": "background information: https://github.com/uBlockOrigin/uBlock-issues/issues/1513"
+  },
   "settingsLastRestorePrompt": {
     "message": "Last restore:",
     "description": "English: Last restore:"

src/css/common.css

@@ -179,6 +179,10 @@ label {
     border-color: var(--checkbox-checked-ink);
     stroke: var(--default-surface);
     }
+.checkbox[disabled],
+.checkbox[disabled] ~ span {
+    opacity: 0.5;
+    }
 
 select {
     padding: 2px;

src/js/background.js

@@ -88,6 +88,7 @@ const µBlock = (( ) => { // jshint ignore:line
         alwaysDetachLogger: true,
         autoUpdate: true,
         cloudStorageEnabled: false,
+        cnameUncloakEnabled: true,
         collapseBlocked: true,
         colorBlindFriendly: false,
         contextMenuEnabled: true,

src/js/messaging.js

@@ -190,6 +190,9 @@ const onMessage = function(request, sender, callback) {
 
     case 'userSettings':
         response = µb.changeUserSettings(request.name, request.value);
+        if ( vAPI.net.canUncloakCnames !== true ) {
+            response.cnameUncloakEnabled = undefined;
+        }
         break;
 
     default:

src/js/settings.js

@@ -240,16 +240,20 @@ const onPreventDefault = function(ev) {
 // TODO: use data-* to declare simple settings
 
 const onUserSettingsReceived = function(details) {
-    uDom('[data-setting-type="bool"]').forEach(function(uNode) {
+    const checkboxes = document.querySelectorAll('[data-setting-type="bool"]');
-        uNode.prop('checked', details[uNode.attr('data-setting-name')] === true)
+    for ( const checkbox of checkboxes ) {
-             .on('change', function() {
+        const name = checkbox.getAttribute('data-setting-name') || '';
-                    changeUserSettings(
+        if ( details[name] === undefined ) {
-                        this.getAttribute('data-setting-name'),
+            checkbox.closest('.checkbox').setAttribute('disabled', '');
-                        this.checked
+            checkbox.setAttribute('disabled', '');
-                    );
+            continue;
-                    synchronizeDOM();
+        }
-                });
+        checkbox.checked = details[name] === true;
-    });
+        checkbox.addEventListener('change', ( ) => {
+            changeUserSettings(name, checkbox.checked);
+            synchronizeDOM();
+        });
+    }
 
     uDom('[data-i18n="settingsNoLargeMediaPrompt"] > input[type="number"]')
         .attr('data-setting-name', 'largeMediaSize')

src/js/start.js

@@ -175,6 +175,17 @@ const onUserSettingsReady = function(fetched) {
             fetched.externalLists.trim().split(/[\n\r]+/);
     }
 
+    // https://github.com/uBlockOrigin/uBlock-issues/issues/1513
+    //   Transition nicely.
+    //   TODO: remove when current version of uBO is well past 1.34.0.
+    if ( typeof µb.hiddenSettings.cnameUncloak === false ) {
+        fetched.cnameUncloakEnabled = false;
+        µb.hiddenSettings.cnameUncloak = true;
+        µb.saveHiddenSettings();
+    }
+    µb.hiddenSettingsDefault.cnameUncloak = undefined;
+    µb.hiddenSettings.cnameUncloak = undefined;
+
     fromFetch(µb.userSettings, fetched);
 
     if ( µb.privacySettingsSupported ) {
@@ -184,6 +195,14 @@ const onUserSettingsReady = function(fetched) {
             'webrtcIPAddress': !µb.userSettings.webrtcIPAddressHidden
         });
     }
+
+    // https://github.com/uBlockOrigin/uBlock-issues/issues/1513
+    if (
+        vAPI.net.canUncloakCnames &&
+        µb.userSettings.cnameUncloakEnabled === false
+    ) {
+        vAPI.net.setOptions({ cnameUncloakEnabled: false });
+    }
 };
 
 /******************************************************************************/

src/js/storage.js

@@ -234,7 +234,6 @@ self.addEventListener('hiddenSettingsChanged', ( ) => {
         cnameIgnoreRootDocument: µbhs.cnameIgnoreRootDocument,
         cnameMaxTTL: µbhs.cnameMaxTTL,
         cnameReplayFullURL: µbhs.cnameReplayFullURL,
-        cnameUncloak: µbhs.cnameUncloak,
         cnameUncloakProxied: µbhs.cnameUncloakProxied,
     });
 });

src/js/ublock.js

@@ -322,7 +322,7 @@ const matchBucket = function(url, hostname, bucket, start) {
     }
 
     // Change -- but only if the user setting actually exists.
-    let mustSave = us.hasOwnProperty(name) && value !== us[name];
+    const mustSave = us.hasOwnProperty(name) && value !== us[name];
     if ( mustSave ) {
         us[name] = value;
     }
@@ -337,6 +337,11 @@ const matchBucket = function(url, hostname, bucket, start) {
     case 'autoUpdate':
         this.scheduleAssetUpdater(value ? 7 * 60 * 1000 : 0);
         break;
+    case 'cnameUncloakEnabled':
+        if ( vAPI.net.canUncloakCnames === true ) {
+            vAPI.net.setOptions({ cnameUncloakEnabled: value === true });
+        }
+        break;
     case 'collapseBlocked':
         if ( value === false ) {
             this.cosmeticFilteringEngine.removeFromSelectorCache('*', 'net');

src/settings.html

@@ -28,6 +28,7 @@
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsHyperlinkAuditingDisabledPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">info-circle</a></span></label></div>
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsWebRTCIPAddressHiddenPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">info-circle</a></span></label></div>
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoCSPReportsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">info-circle</a></span></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cnameUncloakEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsUncloakCnamePrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#uncloak-canonical-names" target="_blank">info-circle</a></span></label></div>
 </div>
 <hr>
 <div class="fieldset">