Přejít k navigační liště

Zdroják » Různé » Změna URL a skrývání fbclid pomocí JavaScriptu

Změna URL a skrývání fbclid pomocí JavaScriptu

Články Různé

Přibližně před dvěma týdny začal Facebook přidávat „sledovací“ parameter fbclid (Facebook click id?) do všech externích odkazů, které uživatelé sdílí. A mně se to nelíbilo, tak ten parametr skrývám.

Článek vyšel původně na webu autora.

Tenhle nový parametr byl nejspíš přidán proto, aby Facebook mohl obcházet omezení sledování třetími stranami a evidentně to funguje. Mozilla musela opravit jejich Facebook Container, který má právě bránit Facebooku ve sledování uživatelů skrz celý web. Mimo jiné to také například rozbíjí Cloudflare cachování.

Úprava historie

Já naštěstí takové problémy řešit nemusím, ale stejně se mi nelíbilo, že návštěvníci přicházející z Facebooku ten parametr v mých URL viděli. Chtěl jsem, aby jejich prohlížeče ukazovaly hezké a „čisté“ adresy, které by mohli kopírovat a sdílet dále. Ten parametr jsem mohl odstranit na serveru a poté návštěvníka přesměrovat na tu samou stránku. To by ale zabralo nějaký čas navíc a lidi přicházející z Facebooku by za to platili delším časem nahrávání stránek.

Místo toho jsem udělal něco jiného: tu část URL, která se mi nelíbí, prostě schovám. Žádný reloady, žádný přesměrování, žádný požadavky sem a odpovědi tam. Ke skrytí se dá použít history.replaceState() Pokud bych to měl fakt hodně zjednodušit, tak to změní některé části URL (ne, doménu ne), které uživatelé vidí v prohlížeči, aniž by se (znovu) načítala stránka. Metoda replaceState() má kámoše, pushState(), která dělá to samé, ale navíc vloží nový záznam do historie prohlížení stránek. Obě tyto metody mohou přidat „stav“, který bude poté dostupný v události popstate. Víc se dozvíte např. v MDN.

Odstranění fbclid 🚮

S těmito znalostmi jsem vytvořil kratičký kód v JavaScriptu, který se spustí co nejdříve a prostě jen změní URL v prohlížeči, aniž by se posílal nějaký požadavek nebo se někam přesměrovávalo:

var param = 'fbclid';
if (location.search.indexOf(param + '=') !== -1) {
        var replace = '';
        try {
                var url = new URL(location);
                url.searchParams.delete(param);
                replace = url.pathname + url.search + url.hash;
        } catch (ex) {
                var regExp = new RegExp('[?&]' + param + '=.*$');
                replace = location.search.replace(regExp, '');
                replace = location.pathname + replace + location.hash;
        }
        history.replaceState(null, '', replace);
}

Funguje to takto: pokud je v adrese parametr fbclid, tak se pomocí hezkého URL API odstraní. Pokud to selže, primárně kvůli tomu, že to API nepodporuje Internet Explorer, tak se parametr a jeho hodnota odstraní z konce URL pomocí regulárních výrazů. Ve finálne se stará adresa nahradí novou pomocí history.replaceState(). Šlo by to celé udělat jen pomocí regulárních výrazů, ale to URL API se mi líbí a rád bych ho používal v prohlížečích, které ho podporují.

Ten kód uložte do souboru pojmenovaného třeba remove-fbclid.js a nahrávejte ho s atributy asyncdefer, aby to nezdržovalo vykreslování stránky:

<script src="remove-fbclid.js" async defer></script>

Můžete to celé vyzkoušet přímo na tomto článku, do adresy přidejte ?fbclid=1337 a načtěte stránku. Kdybyste chtěli vidět úpravu URL a historie v akci na jakékoliv stránce, tak otevřete „developer tools“, jděte do konzole a spusťte např.:

history.replaceState(null, '', '/admin');

Řádek s adresou bude ukazovat jiné URL, ale obsah stránky zůstane beze změny. Ta nová adresa v podstatě nahradila tu starou. Když ve vašem browseru zmáčknete tlačítko „zpět“, tak se dostanete na adresu, ze které jste přišli na stránku, na které jste spustili history.replaceState(). Metoda history.pushState() funguje trochu jinak, ta přidá nový záznam do historie prohlížení. Využíváme toho např. na Report URI, když měníme URL podle toho, jaké vyberete filtry v seznamu reportů, což se hodí pro ukládání do záložek apod.

Nikomu nevěř

Mimochodem, dnes jste se tu měli naučit ještě jednu lekci: URL v řádku s adresou nemusí být to, na které prohlížeč poslal požadavek a které se ve skutečnosti načetlo. v kombinaci s útoky jako je Cross-Site Scripting je s tím docela dost srandy. Na debugování stránek raději tedy používejte „developer tools“ a adrese, kterou vám prohlížeč ukazuje, moc nevěřte.

Komentáře

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
ic

Vzhledem k používanosti FB to bude asi takový must-have script do každé stránky… leda by FB s tímhle nápadem přestal.

Přidal bych pár užitečných tipů:
Pokud testujete toto přepisování adresy, musíte mít nějaký server na protokolu file:// … (napřímo otevření souboru s disku) to z bezpečnostních důvodu nefunguje.

A možná bych pro všechny případy přidal i rel=canonical s odkazem na původní adresu, pro lepší indexování vyhledávači. Přeci jen existují sice nepravděpodobné ale možné scénáře kdy se fbclid nepřepíše (starý prohlížeč, vypnutý javascript, selhání javascriptu, …) a pokud někdo na takovouto adresu bude odkazovat, hned je na světě duplicita.

Host

Asi by to chtelo do neceho uzavrit – takto jsou vsechny variable v global scope.

Mlocik97

a to je problém umiestniť do anonymnej funkcie?

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.