{"id":3311,"date":"2019-12-12T14:55:16","date_gmt":"2019-12-12T12:55:16","guid":{"rendered":"https:\/\/blog.tomayac.com\/2019\/12\/12\/same-same-but-different-unicode-variation-selector-16\/"},"modified":"2019-12-12T14:55:16","modified_gmt":"2019-12-12T12:55:16","slug":"same-same-but-different-unicode-variation-selector-16","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2019\/12\/12\/same-same-but-different-unicode-variation-selector-16\/","title":{"rendered":"Same same but different: Unicode Variation Selector-16"},"content":{"rendered":"\n\t\t\t

The other day, I did an analysis of Facebook's WebView<\/a>,\nwhich you are kindly invited to read.\nThey have a code path in which they check whether a given page is using AMPHTML<\/a>,\nwhere \\u26A1<\/code> is the\nUnicode code point escape<\/a>\nof the \u26a1 High Voltage emoji<\/a>.<\/p>\n

var<\/span> nvtiming__fb_html_amp =<\/span>
  nvtiming__fb_html.<\/span>hasAttribute<\/span>(<\/span>\"amp\"<\/span>)<\/span> ||<\/span>
  nvtiming__fb_html.<\/span>hasAttribute<\/span>(<\/span>\"\\u26A1\"<\/span>)<\/span>;<\/span>
console.<\/span>log<\/span>(<\/span>\"FBNavAmpDetect:\"<\/span> +<\/span> nvtiming__fb_html_amp)<\/span>;<\/span><\/code><\/pre>\n
An undetected fake AMP page \u2693<\/a><\/h2>\n
I was curious to see if they did something special when they detect a page is using AMP\n(spoiler alert: they do not),\nso I quickly hacked together a fake AMP page that seemingly<\/em> fulfilled their simple test.<\/p>\n
<<\/span>html<\/span> \u26a1\ufe0f<\/span>><\/span><\/span>
  <<\/span>body<\/span>><\/span><\/span>Fake AMP<\/<\/span>body<\/span>><\/span><\/span>
<\/<\/span>html<\/span>><\/span><\/span><\/code><\/pre>\n
\u26a1\ufe0f High Voltage sign is a valid attribute name \u2693<\/a><\/h2>\n
My first reaction was: <html \u26a1\ufe0f><\/code> does not quite look like what the founders of HTML had in mind,\nso maybe hasAttribute()<\/code><\/a>\nis specified<\/a> to return false<\/code>\nwhen an attribute name is invalid.\nBut what even is a valid attribute name?\nI consulted the HTML spec<\/a>\nwhere it says (emphasis mine):<\/p>\n
\n
Attribute names must consist of one or more characters\nother than controls, U+0020 SPACE, U+0022 ("), U+0027 ('), U+003E (>), U+002F (\/), U+003D (=),\nand noncharacters. In the HTML syntax, attribute names, even those for foreign elements,\nmay be written with any mix of ASCII lower and ASCII upper alphas.<\/strong><\/p>\n<\/blockquote>\n
I was on company chat with Jake Archibald<\/a> at that moment,\nso I confirmed my reading of the spec that \u26a1<\/code> is not a valid attribute name.\nTurns out, it is a valid name, but the spec is formulated in an ambiguous way, so Jake filed\n"HTML syntax" attribute names<\/a>.\nAnd my lead to a rational explanation was gone.<\/p>\n
Perfect Heisenbug? \u2693<\/a><\/h2>\n
Luckily a valid AMP boilerplate example<\/a>\nwas just a quick Web search away, so I copy-pasted the code and Facebook, as expected,\nreported "FBNavAmpDetect: true"<\/code>.\nI reduced the AMP boilerplate example until it looked like my fake AMP page,\nbut still Facebook detected the modified boilerplate as AMP, but did not detect mine as AMP.\nEssentially my experiment looked like the below code sample.\nPerfect Heisenbug?<\/p>\n
\"JavaScript<\/p>\n
The Unicode Variation Selector-16 \u2693<\/a><\/h2>\n
Jake eventually traced it down to the Unicode\nVariation Selector-16<\/a>:<\/p>\n
\n
An invisible code point which specifies that the preceding character should be displayed\nwith emoji presentation. Only required if the preceding character defaults to text presentation.<\/p>\n<\/blockquote>\n
You may have seen this in effect with the Unicode snowman that appears in a textual \u2603\ufe0e\nas well as in an emoji representation \u2603\ufe0f (depending on the device you read this on,\nthey may both look the same).\nAs far as I can tell, Chrome DevTools prefers to always render the textual variant,\nas you can see in the screenshot above.\nBut with the help of the\nlength()<\/code><\/a>\nand the\ncharCodeAt()<\/code><\/a>\nfunctions, the difference gets visible.<\/p>\n
document.<\/span>querySelector<\/span>(<\/span>'html'<\/span>)<\/span>.<\/span>hasAttribute<\/span>(<\/span>'\u26a1'<\/span>)<\/span>;<\/span>
\/\/ false<\/span>
document.<\/span>querySelector<\/span>(<\/span>'html'<\/span>)<\/span>.<\/span>hasAttribute<\/span>(<\/span>'\u26a1\ufe0f'<\/span>)<\/span>;<\/span>
\/\/ true<\/span>
'\u26a1\ufe0f'<\/span>.<\/span>length;<\/span>
\/\/ 2<\/span>
'\u26a1'<\/span>.<\/span>length;<\/span>
\/\/ 1<\/span>
'\u26a1'<\/span>.<\/span>charCodeAt<\/span>(<\/span>0<\/span>)<\/span> +<\/span> ' '<\/span> +<\/span> '\u26a1'<\/span>.<\/span>charCodeAt<\/span>(<\/span>1<\/span>)<\/span>;<\/span>
\/\/ \"9889 NaN\"<\/span>
'\u26a1\ufe0f'<\/span>.<\/span>charCodeAt<\/span>(<\/span>0<\/span>)<\/span> +<\/span> ' '<\/span> +<\/span> '\u26a1\ufe0f'<\/span>.<\/span>charCodeAt<\/span>(<\/span>1<\/span>)<\/span>;<\/span>
\/\/ \"9889 65039\"<\/span><\/code><\/pre>\n
Making this actionable \u2693<\/a><\/h2>\n
I have filed crbug.com\/1033453<\/a> against the Chrome DevTools\nasking for rendering the characters differently, depending on whether the Variation Selector-16\nis present or not.\nFurther, I have opened a feature request on the AMP Project repo demanding that\nAMP should respect \u26a1\ufe0f apart from \u26a1<\/a>.\nSame same, but different.<\/p>\n\n\t\t\t
\n\t\t\t\t\"Thomas\n\t\t\t\tThis post appeared first on https:\/\/blog.tomayac.com\/2019\/12\/12\/same-same-but-different-unicode-variation-selector-16\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"
\t\t\tThe other day, I did an analysis of Facebook’s WebView,
\nwhich you are kindly invited to read.
\nThey have a code path in which they check whether a given page is using AMPHTML,
\nwhere \\u26A1 is the
\nUnicode code point escape
\nof the \u26a1 High Voltage emoji…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3311","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3311"}],"version-history":[{"count":1,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3311\/revisions"}],"predecessor-version":[{"id":3312,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3311\/revisions\/3312"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The AMP Validator and \u26a1\ufe0f \u2693<\/a><\/h2>\n
The macOS emoji picker creates the variant \u26a1\ufe0f, which includes the Variation Selector-16,\nbut AMP requires the variant without, which I have also confirmed in the\nvalidator code<\/a>.\nYou can see in the screenshot below how the AMP Validator<\/a>\nrejects one of the two High Voltage symbols.<\/p>\n
\"AMP<\/p>\n
I am a big emoji fan, so instead of the\n<html amp><\/code><\/a>\nvariant, I went for the <html \u26a1><\/code> variant and entered the \u26a1<\/code> via the macOS emoji picker.\nTo my surprise, Facebook logged "FBNavAmpDetect: false"<\/code>. Huh \ud83e\udd37\u200d\u2642\ufe0f?<\/p>\n