Jak je to s načítáním různých zdrojů do Mailocatoru

Občas se setkáváte se situací, kdy se zdánlivě jednoduché načtení externího zdroje v kampani Mailocatoru nedaří — i když je URL adresa správná a zdroj je přístupný. Proč tedy obrázek, font nebo data nejsou přístupná, přestože by podle všeho měly?

Ve většině případů narazíte na omezení webového prohlížeče, které má chránit uživatele i samotné weby před nechtěným sdílením dat. Nejčastěji jde o CORS nebo CSP. Pojďme se podívat na to, jak fungují a jak je správně řešit.

CORS – Cross-Origin Resource Sharing

CORS je bezpečnostní mechanismus, který prohlížeči říká, zda webová stránka smí načíst zdroj (font, obrázek, skript, data) z jiné domény.

Jak to funguje?

Dotaz na externí zdroj sice proběhne, ale prohlížeč vyhodnotí odpověď a rozhodne, zda ji aplikaci (např. Mailocatoru) zpřístupní.

Pokud server nevrátí správné HTTP hlavičky, prohlížeč odpověď zablokuje, i když fyzicky existuje.

CORS se tak nehodnotí na úrovni kódu aplikace, ale až v prohlížeči, který chrání uživatele před „sdílením napříč doménami“ bez explicitního povolení.

Fonty — když font-family sedí, ale font se přesto nenačte

Toto je nejčastější CORS problém, se kterým se u Mailocatoru setkáváme. A to v situaci, kdy je font správně nalinkovaný, styly jsou napsané bezchybně a URL adresa také nevykazuje žádný problém — přesto se font na stránce neobjeví. V takovém případě je téměř vždy na vině CORS. Server, ze kterého se font načítá, jednoduše nevrací potřebnou hlavičku Access-Control-Allow-Origin, takže prohlížeč stažení fontu z bezpečnostních důvodů zablokuje.

Řešení pro funkční fonty

Úprava HTTP hlaviček na vašem serveru:
(Pro restriktivnější nastavení nahraďte hvězdičku vaší doménou)

add_header Access-Control-Allow-Origin *;

Přidání crossorigin atributu (pokud font voláte přes link)

<link rel="stylesheet" href="https://vasedomena.cz/fonts/myfont.css" crossorigin="anonymous">

CSP – Content Security Policy

CSP je bezpečnostní politika, která určuje, z jakých zdrojů smí web načítat obsah - jde především o obrázky, styly, fonty, skripty nebo iframe.

Pokud některý z těchto typů obsahu pochází z domény, která není v CSP uvedena, prohlížeč jej z bezpečnostních důvodů odmítne načíst.

Není-li Mailocator mezi povolenými zdroji výslovně uveden, projeví se to velmi rychle na vzhledu kampaně: obrázky se nemusí vůbec zobrazit, styly se nenačtou a celé rozložení kampaně se může „rozpadnout“ do neformátované podoby.

Obrázky, které vidíte v editoru Mailocatoru, se na webu nezobrazují

V editoru vše funguje, ale na vašem webu se obrázky schované za URL jako mlcdn.eu.

Proč se to děje?
Vaše CSP pravděpodobně obsahuje přísné pravidlo typu:

img-src 'self';

Řešení:
Do vašeho CSP přidejte domény Mailocatoru::

img-src 'self' https://mlcdn.eu https://cdn-ml.net data:;

Texty, barvy a rozložení nesedí — nenačetly se styly

Když kampani „ujede“ rozložení nebo se použijí systémové barvy místo těch z editoru, jde v 99 % o blokované CSS. Problém i řešení je analogické s obrázky.