Firefox has launched a feature called Tracking protection in v42.0. It blocks several tracking scripts such as Google Analytics, Marketo, LinkedIn, etc.
I was trying to detect it through navigator.DoNotTrack
, but it returns unspecified
in both cases – browsing in regular mode, and browsing in private mode – using Firefox 42.0 on Mac.
How can I detect in JavaScript whether a user is viewing the website with the Tracking protection on, since navigator.DoNotTrack
fails?
When tracking protection is enabled, Firefox blocks content from sites in the list. Sites that track users are most commonly third-party advertising and analytics sites. What does this mean for your website? Most obviously, it means that when tracking protection is enabled:
Redirect tracking protection is rolled out over the next two weeks to all Firefox users. The feature is controlled by a preference that Firefox users may set right away to enable the protection. Load about:config in the browser's address bar.
Firefox ships with a list of sites which have been identified as engaging in cross-site tracking of users. When tracking protection is enabled, Firefox blocks content from sites in the list. Sites that track users are most commonly third-party advertising and analytics sites.
In the "Blocked" area, tap a label to see exactly which trackers, cookies and other items Firefox has blocked on that web page from tracking you. 4. Down toward the bottom, tap Protection Settings to manage how Firefox protects you. 5. And then at the very bottom, tap Show Report to view a day-by-day report of trackers Firefox has blocked.
navigator.donottrack
only shows the setting of the "Do not track" preference. It does not tell if tracking protection, which is a different feature, is enabled. Tracking protection is enabled automatically when in private browsing mode, but users can change a setting in about:config to have it enabled full time.
While you can't tell directly if the feature is enabled, you can check for its effects with something like this:
var canreach = false;
$(function() {
$('<img/>')
.attr("src", "//apps.facebook.com/favicon.ico")
.load(function(){canreach = true;})
.css("display", "none")
.appendTo(document.body);
});
Firefox uses a list obtained from Disconnect for its tracking protection; just use a domain that you know is on that list, and an image that you know will exist.
Of course, this could flag any number of causes for the image not to load, including network connectivity problems, ad blocking software, filtering proxies, etc.
Here is slightly improved version of miken32's answer using Deferred:
function whenNoTrackingProtection() {
if (!whenNoTrackingProtection.promise) {
var dfd = new $.Deferred();
whenNoTrackingProtection.promise = dfd.promise();
var time = Date.now();
$('<img/>')
.attr('src', '//apps.facebook.com/favicon.ico')
.on('load', dfd.resolve)
.on('error', function() {
if ((Date.now() - time) < 50) {
dfd.reject();
} else {
// The request took to long, it seems this is a network error.
dfd.resolve();
}
});
}
return whenNoTrackingProtection.promise;
}
or without jQuery, using Promise:
function whenNoTrackingProtection() {
if (!whenNoTrackingProtection.promise) {
whenNoTrackingProtection.promise = new Promise(function(resolve, reject) {
var time = Date.now();
var img = new Image();
img.onload = resolve;
img.onerror = function() {
if ((Date.now() - time) < 50) {
reject();
} else {
// The request took to long, it seems this is a network error.
resolve();
}
};
img.src = '//apps.facebook.com/favicon.ico';
});
}
return whenNoTrackingProtection.promise;
}
Here is an updated solution without using jQuery, using Promise. Thanks @miken32 and @sleepwalker.
Why do I preferer this solution instead of a navigator.doNotTrack based one? In Firefox, navigator.doNotTrack returns 1 on strict Enhanced Tracking Protection but in Google Chrome user needs to enable Send a "Do Not Track" request with your browsing traffic.
function whenNoTrackingProtection() {
if (!whenNoTrackingProtection.promise) {
whenNoTrackingProtection.promise = new Promise(function(resolve, reject) {
var time = Date.now();
var img = new Image();
img.onload = resolve;
img.onerror = function() {
if ((Date.now() - time) < 50) {
reject(new Error("Rejected."));
} else {
resolve(new Error("Takes too long."));
}
};
img.src = '//www.facebook.com/tr/';
}).then((result) => {
console.log("Tracking OK");
}).catch(e => {
console.log("Tracking KAO");
console.log(e)
});
}
}
whenNoTrackingProtection()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With