在`data:`URIs中正确逃避SVG的方法?

时间:2017-06-15 14:51:40

标签: javascript google-chrome svg

Chrome最近开始blocking URLs with new line and < characters

我维护的应用程序在很大程度上依赖于数据URI(require('util.promisify');)中的SVG图像。使用data:image/svg+xml;utf8,<svg>...... URI而不是传统图像或SVG标记的原因是SVG在运行时从较大的JSON文档中的SVG属性加载。

在Chrome 60中进行此更改后,是否可以在data:网址中使用SVG?如果没有,我有什么选择?

更新:用户ÁlvaroGonzález建议使用encodeURIComponent,这确实会使弃用警告消失。

1 个答案:

答案 0 :(得分:2)

数据URI仍然是一个URI,因此encodeURIComponent()应该是正确的工具:

  

encodeURIComponent()函数对统一资源进行编码   标识符(URI)组件通过替换某些特定实例   字符由一个,两个,三个或四个表示的转义序列组成   字符的UTF-8编码(只会四个转义   由两个“代理”字符组成的字符序列。

不要忘记将其应用于图像数据,而不是整个URI。

如果在CSS中使用URI,那就是你需要的全部内容。如果你想用HTML注入它,你也应该在它之上应用HTML编码(这次是完整的URI)。