How does Mailocator load different sources?

What about loading various sources into Mailocator?

Sometimes you encounter a situation where seemingly simple loading of an external source in a Mailocator campaign fails – even though the URL address is correct and the source is accessible. So why are images, fonts, or data not accessible, even though they should be?

In most cases, you will encounter web browser restrictions designed to protect users and websites themselves from unwanted data sharing. Most often, these are CORS or CSP. Let's take a look at how they work and how to deal with them properly.

CORS – Cross-Origin Resource Sharing

CORS is a security mechanism that tells the browser whether a website is allowed to load a resource (font, image, script, data) from another domain.

How does it work?

A request to an external resource is made, but the browser evaluates the response and decides whether to make it available to the application (e.g., Mailocator).

If the server does not return the correct HTTP headers, the browser will block the response, even if it physically exists.

CORS is therefore not evaluated at the application code level, but only in the browser, which protects users from "cross-domain sharing" without explicit permission.

Fonts – when the font family is correct, but the font still does not load

This is the most common CORS issue we encounter with Mailocator. It occurs when the font is linked correctly, the styles are written flawlessly, and the URL address also shows no problems – yet the font does not appear on the page. In such cases, CORS is almost always to blame. The server from which the font is loaded simply does not return the necessary Access-Control-Allow-Origin header, so the browser blocks the font download for security reasons.

Solution for functional fonts

Modify the HTTP headers on your server:
(For more restrictive settings, replace the asterisk with your domain)

add_header Access-Control-Allow-Origin *; 

Adding the crossorigin attribute (if you call the font via link)

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

CSP – Content Security Policy

CSP is a security policy that determines from which sources a website can load content – primarily images, styles, fonts, scripts, or iframes.

If any of these types of content come from a domain that is not listed in the CSP, the browser will refuse to load it for security reasons.

If Mailocator is not explicitly listed among the allowed sources, this will quickly affect the appearance of the campaign: images may not display at all, styles may not load, and the entire layout of the campaign may "break" into an unformatted form.

The images you see in the Mailocator editor are not displayed on the web

Everything works in the editor, but on your website, images hidden behind URLs such as mlcdn.eu are not displayed.

Why is this happening?
Your CSP probably contains a strict rule such as:

img-src 'self'; 

Solution:
Add Mailocator domains to your CSP::

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

Texts, colors, and layout don't match – styles didn't load

When a campaign's layout is "off" or system colors are used instead of those from the editor, it's 99% due to blocked CSS. The problem and solution are analogous to images.

Solution:
Add Mailocator domains to your CSP::

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

Mailocator uses CDN images at the addresses mlcdn.eu and cdn-ml.net, and exclusively mlcdn.eu for styles.