How Facebook Avoids Ad Blockers
Facebook actually hides ‘dummy’ DOM nodes between the ‘Sponsored’ text. These values are entirely random characters, with a random number of DOM nodes between them. Invisible characters. At this point our CSS ad blocker is completely broken. There is no way for us to possibly code every possible value in CSS.
We’ve covered this before when Mike Pan noted it. Looks like it’s evolved a bit since then, getting even a little tricker.
I just opened my Facebook and selected “Copy Outer HTML” on the word “Sponsored”:
<span class="v_19dt4zixpg r_19dt4zk7i5"><span class="fsm fwn fcg"><span class="q_19dt4zirbc"><a class="d_19dt4zioka h_19dt4ziol1" role="button" id="u_fetchstream_3_6"><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="a" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="t" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="S" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="p" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="r" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="i" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="n" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="S" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="i" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="p" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="o" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="i" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="n" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="o" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="a" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="c" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="s" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="n" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="s" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="o" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="r" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="e" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="o" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="g" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="r" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="d" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="e" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="f" class="s_19dt4ziok9 l_19dt4zlqyi b_19dt4ziokl"></span></span><span class="s_19dt4ziok9 d_19dt4ziok- e_19dt4ziokq"><span data-content="d" class="s_19dt4ziok9 l_19dt4zlqyi n_19dt4ziokm"></span></span></span></a></span></span></span>I guess we shouldn’t be terribly surprised at Facebook being user-hostile. I can imagine a workplace environment where fighting against ad blockers is turned into this fun kinda cat-and-mouse technological tennis match. But what they are fighting against is people wanting to exert a little control over what they allow into their eyes, ears, and brains.
It’s worth noting that nothing else in the DOM helps identify a post as an ad. So in that sense it’s just like how Google has evolved SERPs in how ads look just like organic results aside from a tiny “AD” before the URL.
We run sponsored posts here on CSS-Tricks too, so please feel free to hold our feet to the fire of accountability if you feel sponsored posts aren’t clear enough.
Direct Link to Article — Permalink
The post How Facebook Avoids Ad Blockers appeared first on CSS-Tricks.
