Průvodce BIMI

Pokud jde o nalákání a klamání uživatelů, jsou e-maily pro podvodníky první volbou. Viděli jsme mnoho phishingových útoků, které začaly jednoduchým e-mailem, který vypadal jako oficiální (ač nebyl), a nakonec ohrozily bezpečnost celé organizace. Toto je oblast, kde budou BIMI a VMC (Verified Mark Certificate) hrát zásadní roli.

Existuje poměrně málo online BIMI validátorů – některé jsou skvělé, jiné dobré, jiné úplně nepoužitelné. Ověřování BIMI považujeme za velmi důležité téma, kterému se intenzivně věnujeme a neustále vylepšujeme náš BIMI validátor. Proto jsme se rozhodli, že je čas napsat kompletního průvodce pro přípravu vašeho BIMI záznamu.

Jak mnozí z vás možná vědí, BIMI je stále ve fázi vývoje s veřejně dostupnou podporou, která je již k dispozici na Yahoo! a v uzavřeném pilotu Gmailu. Je tedy na čase, aby se vaše značka začala přípravou BIMI zabývat, protože proces nasazení nemusí být úplně snadný.

Začněme rekapitulací toho, co BIMI je: Indikátory značky pro identifikaci zpráv (Brand Indicators for Message Identification) jsou aktivně vyvíjenou specifikací pro zobrazení log v e-mailových klientech.

Jako příjemce e-mailu můžete říci, že váš e-mailový klient již loga zobrazuje, tak o co jde?

Hlavní rozdíl je v tom, kdo má loga pod kontrolou. Loga jsou obvykle automaticky stahována z různých zdrojů případně spravována tvůrci e-mailových klientů. Ve výsledku se zobrazí různá loga v závislosti na e-mailovém klientovi a zařízení. S BIMI získají značky kontrolu nad svými oficiálně zobrazenými logy – bez ohledu na velikost značky. Symboly jsou stručným a účinným způsobem sdělování informací o vašem podnikání. Logo je důležitou součástí značky vaší společnosti a má významný dopad na její vnímání veřejností. Logo je ve skutečnosti jednou z nejdůležitějších investic do značky, které může firma podniknout. Upoutá pozornost, udělá silný první dojem, je základem identity vaší značky, bezpečnosti, je nezapomenutelné, odlišuje vás od konkurence, podporuje loajalitu ke značce a je očekáváno vaším publikem.

Specifikace BIMI vychází ze stávajících standardů ověřování e-mailů, jako jsou Sender Policy Framework (SPF), DomainKeys Identified Mail (DKIM) a Domain-based Message Authentication, Reporting & Conformance (DMARC). Značky, které správně nasazují ověřování e-mailů pomocí DMARC, budou moci využívat výhody BIMI. DMARC je standard, který umožňuje vlastníkům domén (značek) chránit své domény nastavením zásad ověřování e-mailů. DMARC také poskytuje reporty, které pomáhají nastavit ověřování e-mailů pomocí SPF a DKIM na všech zdrojích.

Jakmile jsou všechny validní zdroje identifikovány a ověřeny, lze nastavit restriktivní DMARC pravidla (tj. p=quarantine nebo p=reject). Pomocí těchto pravidel mohou vlastníci domén řídit, co se stane s neověřenými (nedůvěryhodnými) zprávami – zda skončí ve spamu, nebo budou poskytovateli poštovních schránek, do kterých měly být zprávy doručeny, úplně odmítnuty. DMARC pomáhá značkám chránit se před různými, ale běžnými typy zneužití domény a phishingovými útoky. Jednoduše řečeno – nakonec budete chtít mít své záznamy DMARC s “quarantine” nebo “reject” pravidlem bez ohledu na to, zda BIMI budete implementovat, nebo ne.

Možná si myslíte, že BIMI je určeno hlavně pro velké společnosti, ale je to přesně naopak – je mnohem snazší nasadit DMARC pro malé firmy s jednoduchou e-mailovou infrastrukturou, než je tomu pro firmy s více poskytovateli a e-mailovými službami.

Nyní, když máte správně nastavenou autentifikaci e-mailů z vaší domény, můžeme se dostat k nasazení BIMI. To je podstatně jednodušší než samotné nastavení autentifikace. Představte si BIMI jako ocenění, které dostáváte za tvrdou práci na ochraně vaší domény. Pamatujte, že vaše logo je mnohem víc než jen obrázek. Je to rozpoznávací bod pro klienty a důležitý základ pro branding a bezpečnost vaší společnosti.

Stejně jako mnoho jiných standardů autentifikace souvisejících s e-mailem bude i BIMI na vaší doméně nasazeno jako textový (TXT) záznam. Můžete dokonce mít více BIMI záznamů – s použitím různých selektorů nebo na subdoménách... ale zatím to nekomplikujme. Samotné záznamy budou umístěny v prostoru „_bimi“ vaší domény, přičemž výchozí záznam BIMI bude „default._bimi“. Textová část obsahuje identifikátor verze záznamu (v=BIMI1), URL adresu loga (l=) a URL adresu certifikátu loga (VMC), pokud je k dispozici (a=). Úplný záznam pak bude vypadat takto:

default._bimi IN TXT “v=BIMI1;l=https://url.to/your.file.svg;a=https://url.to/certificate.pem”

URL adresa loga v atributu „l“ a také volitelná URL adresa VMC v atributu „a“ musí používat zabezpečený protokol https a server musí reagovat HTTP stavovým kódem 200 (Found). Přesměrování HTTP používající stavový kód 302 nejsou povolena.

VMC (Verified Mark Certificate) je volitelný digitální certifikát, který ověřuje vaši organizaci jako vlastníka loga a bude v budoucnu vyžadován některými e-mailovými poskytovateli. Pokud není k dispozici žádný VMC, musí být atribut „a“ v záznamu vynechán nebo nastaven na „a=self“.

VMC jsou zásadní pro společnosti, které chtějí zlepšit svou online reputaci a prokázat kvalitu svých produktů. Zajištěním zvýšené míry zabezpečení doručovaných e-mailů, posilují společnosti, které přijímají standardy BIMI a VMC, důvěru mezi svou klientelou a zvyšují důvěryhodnost své značky. Jinými slovy, VMC dávají pocit klidu vašim zákazníkům. Aktuálně jsou VMC vydávány pouze v rámci pilotního projektu u Gmailu a nejsou k dispozici široké veřejnosti.

Přidání záznamu do DNS je pak velmi jednoduché a nezabere mnoho času, ale musíte se ujistit, že je platný i jeho obsah. Podívejme se na hlavní překážky při ověřování.

SVG soubor

O nejdůležitější části BIMI, požadavcích na soubor s logem, toho bylo zatím řečeno velmi málo. Logo musí být v tzv. SVG formátu a musí splňovat určité požadavky.

SVG (Scalable Vector Graphic) je formát, který využívá mnoho moderních webových stránek a mobilních aplikací. Jak název napovídá, jeho výhoda spočívá ve škálovatelnosti. Na rozdíl od nejpopulárnějších formátů GIF, JPG a PNG, které jsou bitmapovými formáty, je vektorová grafika vytvořena z čar a křivek, které lze snadno zvětšovat a zmenšovat bez ztráty detailů. SVG soubor je malý, rychle se načítá a perfektně se přizpůsobuje responzivní velikosti.

Základním požadavkem je, aby logo bylo čtvercové. Na přesných rozměrech nezáleží, protože je škálovatelné, ale poměr stran musí být 1:1 – ať už to bude 100×100 pixelů, nebo 140×140.

Druhým požadavkem je splnění SVG BIMI profilu. Samotný standard SVG je velmi univerzální a má mnoho variant – SVG 1.0, 1.1, 1.1 Tiny, 1.2 Tiny, 2.0. Ten, který je SVG BIMI profilu nejblíže, se nazývá SVG 1.2 Tiny a byl původně vytvořen jako podmnožina SVG určená pro mobilní zařízení. SVG BIMI profil je omezená verze SVG Tiny 1.2. Omezení má praktické i bezpečnostní důvody.

Jelikož formát SVG byl vytvořen pro potřeby internetu 21. století, jako je používání mobilních telefonů, má podporu mnoha fantastických věcí – skriptů, animací, zvuků, hypertextových odkazů, textů, efektů, odkazů na jiné SVG atd. Aby bylo zajištěno, že logo nelze zneužít, všechny tyto interaktivní prvky, které by mohly být potenciálně zneužity, jsou zakázány. SVG může také fungovat jako kontejner pro bitmapové obrázky, které se nemění. Obrazový obsah je rovněž zakázán, neboť by bránil právě možnosti změny rozlišení. To hlavní a podstatné je, že BIMI SVG je grafická varianta SVG Tiny 1.2.

Jak připravit správný SVG soubor?

Nyní, když jsme nastínili hlavní specifikace, můžeme se zaměřit na přípravu našeho loga. Nezapomeňte začít se správnou vektorovou grafikou. Pokud zde budete hledat zkratky nebudete moci exportovat správné SVG. Pojďme se podívat na to, jak vyexportovat správné SVG pomocí nejoblíbenějšího nástroje mezi grafickými designéry, kterým je Adobe Illustrator (AI).

Otevřete logo v AI a zkontrolujte jeho objekty. Ujistěte se, že zde nejsou žádné rastrované prvky (bitmapy), propojené soubory, texty nebo skupiny. Chcete-li zkontrolovat soubor, nejprve se ujistěte, že je v nabídce “Window” zapnutý “Control toolbar”.

Propojené soubory se na ovládacím panelu zobrazí jako „Linked File“. Všechny vrstvy s propojenými soubory budete muset převést na objekty výběrem jednotlivých vrstev a kliknutím na tlačítko “Embed” na ovládacím panelu.

Bitmapové obrázky jsou identifikovatelné na ovládacím panelu zobrazením jako „Image“. Vyhledejte obrázky výběrem jednotlivých vrstev a kontrolou, zda ovládací panel identifikuje objekt jako „Image“.

Loga zřídka obsahují obrázky, a pokud ano, je to pravděpodobně proto, že nemáte původní soubor grafického designu. Obrázky nejsou škálovatelné a jako takové nejsou pro loga praktické a jsou zakázány specifikací BIMI SVG.

Vaše logo může být založeno na obrázku, pokud bylo původně navrženo na papíře a nikdy nebylo správně přepracováno do podoby grafiky. V takovém případě můžete zkusit použít tlačítko “Image Trace”  a vyzkoušet, zda lze logo převést do křivek. Můžete vyzkoušet různé předvolby pro převod obrázků, abyste zjistili, zda lze dosáhnout přijatelného výsledku. Až budete s výsledkem spokojeni, klikněte na tlačítko “Expand”. Výsledná vektorová grafika bude s největší pravděpodobností vyžadovat úpravy profesionálním grafickým designérem.

Dalším krokem je najít všechny textové objekty. Ty se na ovládacím panelu zobrazí jako „Type“. Pokud je ve vašem logu text, budete jej muset převést na křivky, protože text může být v různých písmech a BIMI SVG je nemusí podporovat. Naštěstí se jedná o běžný úkol a v nabídce “Type” k tomu existuje nástroj. Vyberte textovou vrstvu a v nabídce „Type“ vyberte možnost „Create Outlines“. Poté ovládací panel již nebude identifikovat objekt jako „Type“, ale jako „Group“.

V tomto okamžiku byste měli mít všechny objekty jako správné vektorové prvky, ale mnoho z nich bude stále ve skupinách. Skupiny se zobrazují na panelu "Layers" s rozbalitelným indikátorem.

I když jsou skupiny pro práci s designem velmi praktické, při exportu do SVG způsobují všechny typy potíží. Proto budeme muset zajistit, aby u všech skupin proběhl tzv. “Ungroup”.

Nejrychlejší způsob, jak toho dosáhnout, je vybrání všech objektů v souboru výběrem možnosti „All“ v nabídce Select nebo použít klávesovou zkratkou Ctrl + A. Se všemi vybranými a zvýrazněnými objekty jděte na možnost „Ungroup“ v nabídce „Object“ nebo použijte zkratku Shift + Ctrl + G. Budete to muset několikrát zopakovat, dokud nebudou odskupeny všechny skupiny v dokumentu.

Export

Struktura dokumentu by nyní měla obsahovat pouze objekty uvnitř jedné nebo více vrstev. Stále musíme mít na mysli, aby výstup splňoval specifikace BIMI SVG, včetně čtvercových rozměrů. Abychom se vyhnuli dalším problémům, začneme vytvořením nového souboru (aktuální pracovní soubor ale nezavírejte).

Vytvořte nový soubor se čtvercovými rozměry – ujistěte se, že šířka a výška jsou stejné. Dále se ujistěte se, že vybraný barevný režim je RGB, nikoli CMYK.

Nyní, když máte nový dokument připravený, přepněte na původní dokument a vyberte všechny objekty kliknutím na „All“ v menu „Object“, nebo použijte klávesovou zkratkou Ctrl + A. Zkopírujte všechny objekty do schránky pomocí Ctrl + C nebo výběrem možnosti „Copy“ v menu „Edit“. Přepněte zpět na nový prázdný dokument a vložte všechny objekty pomocí Ctrl + V nebo výběrem možnosti „Past“ v menu „Edit“.

Upravte velikost grafiky pomocí nástrojů ovládacího panelu. Ujistěte se, že jste vybrali vrstvy, nikoli jednotlivé objekty, a ujistěte se, že je při změně velikosti povoleno „Constrain Width and Height proportions“.

Jakmile je dokument připraven, uložte jej výběrem “Save as” v nabídce “File”. Přejděte do cílové složky a nastavte formát souboru v části „Save at type“ na „SVG“ (ne SVG compressed). Nezapomeňte zaškrtnout políčko „Use Artboards“.

V dalším kroku se zobrazí dialogové okno možností SVG. V části SVG Profiles vyberte SVG Tiny 1.2, protože je to formát nejbližší SVG pro BIMI. Další možnosti lze zobrazit kliknutím na tlačítko “More Options”. Jednou z možností, kterou bude možná nutné upravit, jsou desetinná místa (“Decimal Places”). V závislosti na tom, jak složité je vaše logo, můžete chtít počet desetinných míst zvýšit. U většiny exportů bude stačit výchozí hodnota 1, ale v některých případech možná budete potřebovat zvýšit desetinná místa na 2 nebo možná dokonce na 3, abyste zachovali potřebné detaily.

Kliknutím na tlačítko „SVG code“ kód zkontrolujete. Otevře se soubor v editoru souborů (obvykle v Poznámkovém bloku). Ujistěte se, že řádek začínající <svg obsahuje version=”1.2” a baseProfile=”tiny”. Zkontrolujte také, že v obsahu nikde není base64, protože by to znamenalo, že Adobe Illustrator nemohl vytvořit pouze vektorovou reprezentaci vašeho loga. Pokud je vše v pořádku, můžete editor zavřít a soubor uložit v dialogovém okně kliknutím na tlačítko „OK“.

Dvojitým kliknutím otevřete soubor v prohlížeči a vizuálně zkontrolujte, zda logo splňuje vaše očekávání. Někdy je dobré si logo v prohlížeči zvětšit, abyste viděli jeho detaily. Pokud v detailech narazíte na nějaké problémy, vraťte se do aplikace Adobe Illustrator a opakujte export se zvýšeným množstvím desetinných míst.

Očištění kódu

Nyní, když máte SVG soubor vyexportovaný, je potřeba udělat ruční očištění. Protože SVG je textový soubor, můžete k tomu použít libovolný textový editor. Nejprve se ujistěte, že soubor byl exportován jako vektorová grafika a neobsahuje žádné obrázky. Některé malé bitmapové prvky mohly proklouznout vizuální kontrolou, takže musíte v souboru vyhledat přítomnost obrazového prvku a obsahu base64. Můžete to udělat jednoduše pomocí příkazu “Find” nebo pomocí Ctrl + F (ve většině textových editorů) a vyhledáním „image“ a „base64“. Dále vyhledejte externí reference hledáním „href“. Pokud jste nenašli nic z výše uvedeného, máte dobrou výchozí pozici pro zahájení čištění.

Začněte tím, že odstraníte zvýrazněnou část s informacemi o použité verzi aplikace Adobe Illustratoru. Dále najděte x=”0px” y=”0px” na řádku, který začíná <svg, jak je vidět na obrázku. Tento element také často obsahuje atribut overflow=”visible”, který je třeba odstranit. To je velmi důležité, protože atributy souřadnice a overflow nejsou ve standardu BIMI SVG povoleny. Dále najděte baseProfile=”tiny“ a nahraďte “tiny“ slovem “tiny-ps“, tzn. zápis bude vypadat takto: baseProfile=”tiny-ps“. Posledním krokem je přidání požadovaného tagu <title> do vašeho SVG pod <svg ...>. Účelem názvu je zajistit přístupnost pro nevidomé, aby odrážel vaši značku. V našem případě bude řádek číst <title>Mailkit</title> a váš by měl obsahovat název vaší značky.

Uložte soubor a použijte náš validátor, abyste se ujistili, že se váš SVG soubor správně ověřuje. Věříme, že ano, a tak vám nic nebrání v nasazení BIMI záznamu.