wpemoji code in wp header triggers tracking protection warnings in browsers/plugins

[corvuscorax]

Recent publications about user agent tracking and privacy protection put more emphasis on possible misuse of the HTML <canvas> feature to track and identify individual web users and browsers between site accesses, capable to circumvent "do not track" attributes and features without the use of cookies.

To defend against this kind of attacks, specific browser plugins like "canvas blocker" (​https://addons.mozilla.org/de/firefox/addon/canvasblocker/) track API calls to browser features typically used for that kind of attacks and block and/or warn the user about the attempt to identify them. Similar features are integrated into browsers optimized for privacy enabled browsing.

Javascript code in the wpemoji header, inserted into all wordpress generated pages unless suppressed, utilises these same canvas API methods and as such triggers warnings and alerts in some of these browser plugins when visiting a wordpress generated site.

(example:)

<link rel='dns-prefetch' href='//s.w.org' />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/************\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.1"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">

Although this code's purpose seems to be to pre-cache the browsers features and capabilities for later use by the wp-emoji plugin, and as such these alerts are technically false positives,
the fact that they are read out on every page load regardless wether emoji features are being used, in combination with heavily obfuscated javascript code is bad practice.

More so, this inserted code is nearly indistinguishable from a genuine tracking attempt and as such very prone to generate false positives.

This is problematic, since the resulting alerts and warnings issued by the canvas API monitoring plugins compromise user trust in webpages using wordpress, and can also be a liability issue for website operators in regions where tracking methods are not permitted without prior consent by the user.

As such, I would highly suggest to modify this code to be less invasive, check capabilities only when they are actually needed, and avoid the pre-caching or browser capabilities, especially those of the canvas extension.

[superpoincare]

Good point. I have observed that Tor complains about canvass.

Note however that the inline JS code feature detects if the browser has emoji supports and polyfills if it doesn't. For this it uses canvass.

The alternate would be to detect without using canvass or to load twemoji for all browsers. Not sure if there's any method to feature detect without using canvass.

[dd32]

Not sure if there's any method to feature detect without using canvass.

This is exactly why Canvas is used, there are no other reliable methods (other than UA sniffing, and even that's hit-and-miss) which allows Javascript to differentiate between whether a browser supports the various different sets of emojis correctly.

If anyone can come up with an alternate way to detect emoji support while handling all the cross-browser/cross-plarform issues then we'd be all ears - but until then my suggestion is that the plugins which block canvas tracking should instead allow non-malicious uses of canvas through, although that may be just as impossible (simply allowing emoji-only canvas use might be possible for example).

[pento]

Duplicate of #32138.