Č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 asynca defer, 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.