草庐IT

FinClip小程序里如何安全使用SVG

speedoooo 2023-03-28 原文
​

在小程序中使用SVG，和在普通网页中不太一样。SVG也并不仅是另一种图片格式这么简单。它是代码，需要有额外的安全考量。在小程序里成功使用SVG的诀窍在于（1）结合CSS background image，（2）采用inline方式，（3）用对Data URI scheme，（4）把内容转换为base64。经本文整理，向读者提供最完整的介绍。

网上零零散散有一些关于在小程序中如何使用SVG的内容，但不是语焉不详，就是信息不完整。在此整理一下，供哪怕是此前从来没有接触过SVG的开发者也可以参考，迅速利用。首先SVG可以被视为一种DSL（Domain Specific Language），也就是说它并不仅仅是JPEG、PNG、GIF之外的又一种图片格式，它还是一种“代码”；也因此，它既有无比的潜力让开发者发挥创意作出有意思的应用，它也有潜在安全风险。在小程序中，起码至目前为止，它的使用方式和在普通网页并不完全一样。

什么是SVG

SVG是Scalable Vector Graphics的缩写。它：

  • 用于定义矢量图
  • 是一种XML文本
  • 所定义的每一个元素（Element）及其属性（Attribute）均可以支持动画
  • 是W3C推荐的开放标准
  • 能与其他W3C标准如DOM、XSL等结合使用
  • 有以下的好处：
    • 文件能用文本编辑器编辑，虽然文件后缀是svg，但和JPG、PNG、GIF等不是一回事，而是一种XML格式的文本
    • SVG图形内容，能被索引、搜索、脚本化操作处理、压缩。例如Google就明确声明，它的网络爬虫会索引SVG图形的文本内容，因此用户可以通过SEO加以利用
    • 矢量图放大缩小不失真

以下的svg描述了一个多边形：

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

SVG图形是如何被引用至网页中的

第一种，也是最简单直观的方式，即把svg后缀的文件视作为和PNG、JPEG、GIF类似的图片：

<img src="image.svg" />

第二种，当嵌入的svg文件需要引用外部资源（例如字体、脚本、其他bitmap类型的二进制图片或者其他svg），或者对内容有一定的交互和处理，<img>标签无法支持，这时可以采用<object>标签:

<object type="image/svg+xml" data="image.svg"></object>

第三种，是直接把svg内容，通过<svg>标签嵌入至网页中，也就是说，svg的数据内容直接是当前网页的一部分，浏览器是在加载当前网页时直接解释渲染的，而前面两种方式，则作为svg文件资源，由浏览器在加载解释当前页面时按文件所在URL进行网络下载。这是所谓的inline svg模式，或者称为内联的svg。例如：

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

第四种，在CSS中作为background image引入，例如：

#id {
  background-image: url(image.svg);
}

这本质上和第一种方式相似。

上述四种方式的使用，各有优劣，例如：

  • inline方式加载速度最快，而<object>方式则比较慢
  • 浏览器可以对<img>方式和<object>方式的svg图片资源作缓存。但inline模式下，浏览器则无法对svg作单独缓存
  • 前二者均可以通过GZip压缩（而且通常能达到75%-85%的压缩率），但inline模式下svg数据和网页融为一体，就没办法单独压缩了
  • inline方式下，svg内容是当前网页里的标签下的数据内容，所以是可以被脚本动态处理的，可以基于用户操作行为作出动态的响应，交互性非常好；<object>方式下，也有一定程度的交互灵活性，但<img>方式则是完全不可能了
  • <img>和<object>方式下，svg数据都是“封装”在各自的文件载体下，不用担心其中数据与当前网页中的其他内容冲突（例如里面的ID、Class和其他svg图形中Element的ID、Class重复），所以它们的svg数据是隔离的，修改维护都容易。但inline方式下，你必须保证每一个svg标签下的内容中的Element的ID、Class都是在当前网页下唯一的，否则渲染就会出问题

什么时候该用哪种方式？正常情况下，<img>方式是最简单直接、容易维护。但当你需要互动能力的时候，inline是最佳选择。

使用SVG是否有安全风险

TL;DR 对于没时间兴趣关注本话题的读者，可以跳到下一节。简短的回答是：有 - 看你怎么用。但观点是：但不能因噎废食，在小程序里我们可以运用。

以下是关于SVG安全相关的详细内容。

首先，如上所述，SVG是可以被脚本化的，例如：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<polygon id="triangle" points="0,0 0,50 50,0" fill="#009900" stroke="#004400"/>
<script type="text/javascript">
alert('This app is probably vulnerable to XSS attacks!');
</script>
</svg>

看到<script>这个标签就全明白了，svg不仅是矢量图，里面可以内嵌脚本。

XSS攻击

这是如何发生的？只要你的Web应用允许用户上传、提交svg文件，内嵌在其中的恶意代码就可以妥妥的操作你应用页面里的DOM，余下的就是“常规”XSS攻击的事情。

HTML注入

SVG用XML语法和格式描述矢量，在XML中无法直接引用HTML。为了满足这方面的应用需求，SVG提供了一个叫foreignObject的元素，以便于开发者引入外部XML namespace下的元素。例如：

<?xml version= 1.0" standalone="no"?>
<!DOCTYPE SVg PUBLIC "-//WBC//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" >
    ‹rect x="10" y="1©" width="100" height="100" stroke="red" stroke-width="10" fill="white" />
    <foreignObject class="node" x="46" y="22" width="200" height="300">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <style>
                h1 {color: blue}
            </style›
            <a-href="https://fortiguard.com">-Click-Here</a>
            <h1>HTML - Injection for phishing</hi>
        </body>
    </foreignObject>
</svg>

<body>标签下可以引入一个XHTML的namespace，在标签下的的内容，都会被浏览器解析执行。此时，phishing（钓鱼）、CSRF（伪造跨站请求）、same-origin bypass（绕过同源限制）的骚操作都可以逐一发生。

恶意递归XML Entity - “亿笑攻击”

所谓"Billion Laughs Attack"，又称之为“XML炸弹”（XML Bomb）或者“实体指数扩张攻击”（Entity Exponential Expansion Attack），是通过创建一系列递归的XML定义，在内存中产生上十亿的特定字符串，从而导致DoS攻击。原理是构造恶意的XML实体文件以耗尽服务器可用内存，因为许多XML解析器在解析XML文档时倾向于将它的整个结构保留在内存中，上亿的特定字符串占用巨量内存，使得解析器解析非常慢，并使得可用资源耗尽，从而造成拒绝服务攻击。

制作这些"lol"(Lots of Laugh)的tricks在这里：

//声明一个内部实体 -
<!ENTITY entity-name "entity-value">

//声明一个外部实体 -
<!ENTITY entity-name SYSTEM "URI/URL">

写一个制造“笑气弹”的svg：

<?xml version="1.0"?>
<!DOCTYPE lolz [
 <!ENTITY lol "lol">
 <!ENTITY lol1 "&lol;&lol;&lol;&lol;&lol;&lol;&lol;&lol;&lol;&lol;">
 <!ENTITY lol2 "&lol1;&lol1;&lol1;&lol1;&lol1;&lol1;&lol1;&lol1;&lol1;&lol1;">
 <!ENTITY lol3 "&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;&lol2;">
 <!ENTITY lol4 "&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;&lol3;">
 <!ENTITY lol5 "&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;&lol4;">
 <!ENTITY lol6 "&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;&lol5;">
 <!ENTITY lol7 "&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;&lol6;">
 <!ENTITY lol8 "&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;&lol7;">
 <!ENTITY lol9 "&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;&lol8;">
]>
<svg xmlns="http://www.w3.org/2000/svg">
    <text x="0" y="10" font-size="20">&lol9;</text>
</svg>

加载它，你的机器将“狂笑”一阵 - 大概4到5秒。原因？现在的浏览器都能处理这类攻击，自动“制止”继续lol，但是通常需要4-5秒反应时间去判断和处理。

新型DoS攻击

所谓“道高一尺魔高一丈”，浏览器厂商有防，攻击者又有新的攻。这次是利用了svg中的这俩：xlink:href这个Attribute和<use>这个Element：

<defs>
    <g id="a0">
        <circle stroke="#000000" fill="#ffffff" fill-opacity="0.1" r="10 />
    </g>
</defs>
<defs>
<g id="a1">
<use x="0" y="10" xlink:href="#a0"/>
<use x="10" y="10" xlink:href="#a0"/>
<use x="20" y="10" xlink:href="#a0"/>
<use x="30" y="10" xlink:href="#a0"/>
<use x="40" y="10" xlink:href="#a0"/>
<g id="a2">
<use x="0" y="10" xlink:href="#a1"/>
<use x="10" y="10" xlink:href="#a1"/>
<use x="20" y="10" xlink:href="#a1"/>
<use x="30" y="10" xlink:href="#a1"/>
<use x="40" y="10" xlink:href="#a2"/>
<g id="a3">
<use ...>
...

层层递归的套路，直到浏览器崩溃。

小结

SVG类型的内容资源，与其说是图片，还不如说是HTML的延伸扩展。所以，HTML所能被利用的攻击手段，也可能都适用于SVG。为了安全起见，原则上：

  • svg资源不能以object甚至iframe的方式引入、加载
  • 禁止用户上传svg
  • 管控通过未授权信任的链接加载外部的svg资源
  • 慎用<script>、<foreignObject>等比较强大但也有风险的标签

在FinClip小程序中能放心使用SVG吗

FinClip SDK是一个让任何App“瞬间”获得运行小程序能力的安全沙箱。运行其中的小程序，相比一般的网页应用，获得更强的安全防护。

沙箱环境

SDK启动的沙箱，提供一个纯 JavaScript 的解释执行环境，没有浏览器相关接口，无法操作 DOM、跳转。小程序业务逻辑相关的JavaScript代码均由沙箱创建的一个单独的线程去执行。界面渲染相关的任务，交由独立Webview 线程负责，通过逻辑层代码去控制界面渲染。沙箱不支持动态载入脚本，XSS攻击难以进行。

审核上架

FinClip的服务器端提供了对小程序上下架的管控能力。经过审核的小程序才能上架；出现问题时，则可以一键下架。每个FinClip小程序需要事先设置通讯域名，小程序只能跟指定的域名与进行网络通信，包括普通 HTTPS 请求、上传文件、下载文件和 WebSocket 通信，参考框架-网络。这些通讯域名，也都必须要求通过备案。这些种种的限制和管理模式，都进一步保障安全。

开发者在开发小程序时引用的SVG资源，在小程序上架的源头可以进行检测审核。

控制SVG引入加载的方式

如前文所述，在标准浏览器中，起码有四种方式加载SVG资源（加上<iframe>和<embed>的话，实际上有6种可能，但这两种都不推荐使用，可以排除）。

从安全使用的角度看，把svg当作普通的图片资源，通过<img>引入，技术上支持，只要文件是自己或者可信的第三方提供。以<object>方式加载，则是可以引入风险的，因为它能触发对svg中上述一些脚本的执行。

inline（内联）方式，在小程序中是较为安全的方式，svg内容变成了小程序页面代码的一部分，首先是开发者自行负责，而不是一个URL指向网上什么第三方的黑盒子资源，其次小程序审核上架的时候也可以检测其有无涉及上述有安全风险的标签使用方式。

FinClip目前对svg的支持，实际上合并了第三和第四种方式：即通过CSS中的background image加载svg图片，但是图片数据不是来自外部资源，而是inline生成的。

在FinClip小程序中SVG的打开方式

在小程序里成功使用SVG的诀窍在于这几处。

通过CSS background image加载，例如在你的 pages/index.fxml中：

<view style="width:148px;height:148px;background:url('{{ svg_content_data }}') no-repeat center"></view>

其中，svg_content_data自然是由你的 pages/index.js 来负责产生了，它应该是长这个样子：

const svg = "data:image/svg+xml;base64," + [base64_encoding_of_svgdata];

把这个svg数据绑定到所在页面的data对象中。

这里涉及到的两个关键内容：

Data URI scheme
它让我们把当前页面里生成的数据当作资源赋予给页面的标签，从而被浏览器渲染。以一个svg资源为例，

<img src="abc.svg" />

是让渲染引擎在渲染当前的页面时，从同源的服务器上加载并渲染abc.svg图片。

如果abc.svg的内容是在当前页面里产生的呢？如何把生成的内容塞到img标签里去？

<img width="400" class="figure" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+C.....blah_blah_blah............CAgaW5rc2NhcGU6dHJhbnNmb3JtLWNlbnRlci14PSIwLjAxNzcwMzI1OSIKICAgICAgIGlua3NjYXBlOnRyYW5zZm9ybS1jZW50ZXIteT0iLTE5LjU0NzA3NCIgLz4KICA8L2c+Cjwvc3ZnPgo="></img>

其中，"data:image/svg+xml;base64," 是我们用到的data URI。

Base64 Encoding
上面src跟着的一大串字符串，是base64编码的svg内容，它在编码前的本尊应该是这样的：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 37 37" stroke="none">
        <rect width="100%" height="100%" fill="#FFFFFF"/>
        <path d="M4,4h1v1h-1z M5,4h1v1h-1z M6,4h1v1h-1z M7,4h1v1h-1z M8,4h1v1h-1z M9,4h1v1h-1z M10,4h1v1h-1z M14,4h1v1h-1z M15,4h1v1h-1z M18,4h1v1h-1z M23,4h1v1h-1z M26,4h1v1h-1z M27,4h1v1h-1z M28,4h1v1h-1z M29,4h1v1h-1z M30,4h1v1h-1z M31,4h1v1h-1z M32,4h1v1h-1z M4,5h1v1h-1z M10,5h1v1h-1z M13,5h1v1h-1z M17,5h1v1h-1z M19,5h1v1h-1z M22,5.......... fill="#000000"/>
</svg>

这里有一个关键，"xmlns="http://www.w3.org/2000/svg" 的XML namespace的定义是必须的。

如何生成base64编码，在此提供一个函数供参考：

function convertBase64(svgxml) {
    const data_uri = 'data:image/svg+xml;base64,';
    
    svgxml = encodeURIComponent(svgxml);
    const base64_encoded = btoa(unescape(svgxml));
    return data_uri + base64_encoded;
}

实际例子可参考《FinClip小程序+Rust（五）：用内联SVG实现二维码》。该文中，介绍了一个加密钱包的地址如何生成二维码并以svg方式展现。

 
本文首发于凡泰极客博客，作者：F1n0Geek
FinClipSVGwidgetckedata网络安全

有关FinClip小程序里如何安全使用SVG的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  4. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  5. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  6. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  8. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  9. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  10. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

随机推荐