SVG图像上传停止工作

时间:2017-01-12 作者:motleydev

我有一个客户端网站,它在函数文件中添加了对SVG的mime类型支持。我们上传svg已经一年多了。突然,它停止了工作,并显示“出于安全原因,此文件是不允许的”-我不知道接下来要检查什么来尝试和调试它。

2 个回复
最合适的回答,由SO网友:CoderScissorhands 整理而成

默认情况下,WP不允许SVG上传,您应该会遇到这个错误。防止SVG上传是一种安全特性(我将在下面解释)。我无法帮助您调试功能,因为这超出了我的专业知识范围,但我可以建议一种解决方法。

您可以使用SafeSVG之类的插件(https://wordpress.org/plugins/safe-svg/) 要启用SVG,请注意:它会给您带来风险。SVG文件可以作为接管站点控制权的一种方式。如果安装插件并启用SVG上载,则应该能够恢复上载SVG的能力。但是,出于安全原因,我建议您在功能中限制管理员对插件的访问。php文件。如果你的用户有上传能力,他们可能会用SVG攻击/破坏/破坏你的网站,所以要小心!

UPDATE 1: 因为你的问题,我刚刚发现即使是safeSVG(我一直在使用)也停止了工作。最近的WP 4.7.1更新似乎破坏了SVG上传(甚至可能是其他一些文件类型的上传)。这里有一个关于它的讨论:https://wordpress.org/support/topic/wp-4-7-1-kills-svg/

在这场讨论中有许多解决方案,其中一些似乎比其他更安全。但我还没有测试它们。这是一个开始。很高兴我无意中发现了你的问题。谢谢

UPDATE 2: 以下是一个插件,下面的一位评论者建议暂时允许此操作,但我不能保证其安全性:https://wordpress.org/plugins/disable-real-mime-check/

SO网友:Abdo-Host

在主题函数中。php文件:

/**
 * Add svg MIME type support
 *
 * @param $mimes
 *
 * @author fadupla
 * @return mixed
 */
function fadupla_mime_types( $mimes ) {
    $mimes[\'svg\'] = \'image/svg+xml\';

    return $mimes;
}

add_filter( \'upload_mimes\', \'fadupla_mime_types\' );

/**
 * Enqueue SVG javascript and stylesheet in admin
 * @author fadupla
 */

function fadupla_svg_enqueue_scripts( $hook ) {
    wp_enqueue_style( \'fadupla-svg-style\', get_theme_file_uri( \'/assets/css/svg.css\' ) );
    wp_enqueue_script( \'fadupla-svg-script\', get_theme_file_uri( \'/assets/js/svg.js\' ), \'jquery\' );
    wp_localize_script( \'fadupla-svg-script\', \'script_vars\',
        array( \'AJAXurl\' => admin_url( \'admin-ajax.php\' ) ) );
}

add_action( \'admin_enqueue_scripts\', \'fadupla_svg_enqueue_scripts\' );


/**
 * Ajax get_attachment_url_media_library
 * @author fadupla
 */
function fadupla_get_attachment_url_media_library() {

    $url          = \'\';
    $attachmentID = isset( $_REQUEST[\'attachmentID\'] ) ? $_REQUEST[\'attachmentID\'] : \'\';
    if ( $attachmentID ) {
        $url = wp_get_attachment_url( $attachmentID );
    }

    echo $url;

    die();
}

add_action( \'wp_ajax_svg_get_attachment_url\', \'fadupla_get_attachment_url_media_library\' );
资产/js/svg。js文件:

var mediaGridObserver = new MutationObserver(function (mutations) {

    for (var i = 0; i < mutations.length; i++)
    {

        for (var j = 0; j < mutations[i].addedNodes.length; j++)
        {
            element = $(mutations[i].addedNodes[j]);

            if (element.attr(\'class\'))
            {
                elementClass = element.attr(\'class\');
                if (element.attr(\'class\').indexOf(\'attachment\') != -1)
                {

                    attachmentPreview = element.children(\'.attachment-preview\');
                    if (attachmentPreview.length != 0)
                    {
                        if (attachmentPreview.attr(\'class\').indexOf(\'subtype-svg+xml\') != -1)
                        {
                            var handler = function (element) {

                                jQuery.ajax({

                                    url: script_vars.AJAXurl,
                                    type: "POST",
                                    dataType: \'html\',
                                    data: {
                                        \'action\': \'svg_get_attachment_url\',
                                        \'attachmentID\': element.attr(\'data-id\')
                                    },
                                    success: function (data) {
                                        if (data)
                                        {
                                            element.find(\'img\').attr(\'src\', data);
                                            element.find(\'.filename\').text(\'SVG Image\');
                                        }
                                    }
                                });

                            }(element);

                        }
                    }
                }
            }
        }
    }
});

var attachmentPreviewObserver = new MutationObserver(function (mutations) {
    for (var i = 0; i < mutations.length; i++)
    {
        for (var j = 0; j < mutations[i].addedNodes.length; j++)
        {
            var element = $(mutations[i].addedNodes[j]);
            var onAttachmentPage = false;
            if ((element.hasClass(\'attachment-details\')) || element.find(\'.attachment-details\').length != 0)
            {
                onAttachmentPage = true;
            }

            if (onAttachmentPage == true)
            {
                var urlLabel = element.find(\'label[data-setting="url"]\');
                if (urlLabel.length != 0)
                {
                    var value = urlLabel.find(\'input\').val();
                    element.find(\'.details-image\').attr(\'src\', value);
                }
            }
        }
    }
});

$(document).ready(function () {

    mediaGridObserver.observe(document.body, {
        childList: true,
        subtree: true
    });

    attachmentPreviewObserver.observe(document.body, {
        childList: true,
        subtree: true
    });


});
资产/css/svg。css文件:

img[src*=\'.svg\'] {
    width: 100%;
    height: auto;
}

相关推荐

如何实现我自己的图标而不是使用SVG图标系统

在WordPress 4.9.2中,我为2017年创建了一个儿童主题。我注意到它在页面底部带有自己的SVG图标系统,用于社交媒体图标。我看到一些代码是在site-info.php 文件,在wp_nav_menu().<nav class=\"social-navigation\" role=\"navigation\" aria-label=\"<?php esc_attr_e( \'Footer Social Links Menu\', \'twentyseventeen\' ); ?>