sunnysideup / silverstripe-svg-images

该包的最新版本(3.0.0)没有提供许可证信息。

为Silverstripe(Assets/Uploads)提供基本的SVG图像支持

安装量:1,216

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 19

类型:silverstripe-vendormodule

3.0.0 2021-04-01 23:37 UTC

This package is auto-updated.

Last update: 2024-09-11 08:28:09 UTC


README

该模块可以与通过AssetAdmin添加的任何文件以及许多与'File/Image(/SVGImage)'的多对多关系一起正常工作。

如果安装了stevie-mayhew/silverstripe-svg模块(由composer推荐),则此模块会公开该模块的SVG模板助手/方法。请参阅“使用说明”。

SVG安全

SVG可能会暴露大量的潜在攻击向量,其中大多数是广为人知且未修补的。基本上,你应该将SVG视为与HTML/JS类似的浏览器可执行格式,但浏览器中几乎没有内置的利用保护。在某些情况下,例如在服务器端解析XML时,SVG也可能带来服务器端风险,如文件包含(XML外部实体攻击)、fork bombs(亿笑攻击)等。请参阅“安全考虑”。

一般来说,仅与可信的SVG(由可信用户创建和上传)一起工作。通过img标签加载的SVG提供比内联SVG代码更多的安全性(例如,没有脚本执行)。

安装

在config.yml中将svg允许为'File'的扩展

File:
  allowed_extensions:
    - svg

接下来,将svg添加到assets文件夹中htaccess文件的允许扩展列表中。

新代码库

最佳选项是使用具有UploadField::setAllowedMaxFileNumber(1)的many_manys,因为File/Upload会尝试为has_ones实例化指定的类名,因此会回退到Image而不是SVGImage。

或者简单地告诉注入器使用SVGImage类而不是Image,请参阅下面的Yaml配置(对于常规图像回退到Image类)。

或者(可能不理想)将has_one关系设置为'SVGImage'子类。

现有代码库/网站(或模块)的选项

如果可能,您可以将关系更改为指向SVGImage类(现有的关系可能需要重新添加?)

或者添加以下配置,以使has_one的UploadFields指向'Image'在加载.svg文件时作为SVGImage(这是另一种方法,而不是使用many_manys,这可能会干扰其他模块,如也使用注入器的FocusedImage)。

Injector:
  Image:
    class: SVGImage
  Image_Cached:
    class: SVGImage_Cached

允许在scaffolded UploadFields中启用SVG

需要告诉scaffolded UploadFields到'Image'允许SVG图像(目前已在master中修复)。

$field->setAllowedFileCategories('image');

还可以暂时修改框架/Framework/model/fieldtypes/ForeignKey的大约第33行,以使scaffolded has_one UploadFields对Image关系允许SVG(暂时因为目前已在master中修复)。

    ...
    if($hasOneClass && singleton($hasOneClass) instanceof Image) {
        $field = new UploadField($relationName, $title);
        // CHANGE:
        //$field->getValidator()->setAllowedExtensions(array('jpg', 'jpeg', 'png', 'gif'));
        // TO:
        $field->setAllowedFileCategories('image');
    } else ...

使用说明

在SilverStripe模板中,只需像处理普通图像一样处理即可(不包括格式化/缩放功能)。对于缩放/添加类等,此模块集成了SVG模板助手(需要stevie-mayhew/silverstripe-svg模块)。

<!-- add svg as image -->
<img src="$Image.URL" />

<!-- or, for example when using Foundation interchange to have separate/responsive versions: -->
<img src="$Image_Mobile.URL" data-interchange="[$Image_Desktop.URL, medium]" />
<!-- add inline svg (the raw SVG file will be inserted, see the .SVG helper for more subtle inlining) -->
{$Image.SVG_RAW_Inline}

<!-- Test for SVG and fallback to regular image methods, for example when the image may be multiple formats (eg SVG/PNG/JPG) -->
<% if $Image.IsSVG %> {$Image.SVG_RAW_Inline} <% else %> $Image.SetWidth(1200) <% end_if %>

通过'.SVG'方法公开了宽度、高度、大小、填充和添加额外类的辅助函数。 (需要额外的模块:stevie-mayhew/silverstripe-svg

<!-- add inline svg (slightly sanitized) -->
{$Image.SVG}

<!-- add a part of an SVG by ID inline -->
{$Image.SVG.LimitID('ParticularID')}
<!-- change width -->
{$Image.SVG.width(200)}

<!-- change height -->
{$Image.SVG.height(200)}

<!-- change size (width and height) -->
{$Image.SVG.size(100,100)}

<!-- change fill -->
{$Image.SVG.fill('#FF9933')}

<!-- add class -->
{$Image.SVG.extraClass('awesome-svg')}

这些选项也可以链式使用。

{$SVG('name').fill('#45FABD').width(200).height(100).extraClass('awesome-svg')}

安全考虑

目前我还没有找到一种完全清理不受信任的 SVG 的方法。正则表达式不适合这项工作,任何 PHP XML 解析器都容易受到至少一些攻击向量(如文件包含)的攻击。以下是一个已知攻击向量的详细列表

DOMPurify 是一个基于浏览器/JS 的库,似乎做得相当不错(但它使用的是 JS/NodeJS,而不是 PHP)。基于 PHP 的库提供了一些保护,但使用(可能是危险的)XML 解析的有 svg-sanitizerSVG Sanitizer

SVG 裁剪及额外操作(将添加到本模块中)

http://www.silverstrip.es/blog/svg-in-the-silverstripe-backend/

裁剪基本上可以使用 viewBox 来完成,结合 svg 的宽度和高度属性(所有属性都是可选的),PHP SVG 类(Imagemagick):https://github.com/oscarotero/imagecow 简单渲染 SVG 至 JPG/PNG:http://stackoverflow.com/questions/10289686/rendering-an-svg-file-to-a-png-or-jpeg-in-php

PHP Cairo(PECL,实际上不是一个选项):https://php.ac.cn/manual/en/class.cairosvgsurface.php

PHP SVG Iconizr(CLI CSS/SVG/PNG sprite 生成器):https://github.com/jkphl/iconizr