web-dev-qa-db-ja.com

SVG画像のアップロードが機能しなくなりました

SVGのMIMEタイプのサポートが機能ファイルに追加されたクライアントWebサイトがあります。私たちは1年以上svgをアップロードしてきました。突然動作しなくなり、「セキュリティ上の理由からこのファイルは許可されていません」と表示されています。

svg
3
motleydev

デフォルトでは、WPはSVGのアップロードを許可していないので、このエラーが発生するはずです。 SVGのアップロードを防ぐことはセキュリティ機能です（これについては後で説明します）。私はあなたがあなたの関数をデバッグするのを手伝うことはできません、それは私の専門知識を超えているので、私は回避策を提案することができます。

SVGを有効にするには、SafeSVG（ https://wordpress.org/plugins/safe-svg/ ）のようなプラグインを使用できますが、注意が必要です。危険にさらされる可能性があります。 SVGファイルはあなたのサイトの制御を引き継ぐ方法として使用することができます。プラグインをインストールしてSVGアップロードを有効にすると、SVGをアップロードする機能を回復できるはずです。ただし、セキュリティ上の理由から、functions.phpファイルでプラグインへのアクセスを管理者に制限することをお勧めします。アップロード容量のあるユーザーがいる場合、彼らはあなたのサイトをSVGSでハッキング/破損/侵害する可能性があるので注意してください。

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/

3
CoderScissorhands

あなたのテーマのfunctions.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' );

assets/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
    });


});

assets/css/svg.cssファイル

img[src*='.svg'] {
    width: 100%;
    height: auto;
}
0
Abdo-Host