CSP блокирует пиктограмму Fineuploader после загрузки на S3 - PullRequest
Новая
       41

CSP блокирует пиктограмму Fineuploader после загрузки на S3

0 голосов
/ 05 июля 2018

У меня проблемы с моей Content-Security-Policy , которая обрабатывается пакетом bepsvpt / secure-headers .

После успешной загрузки файла на сервер S3 с Fineuploader плагин пытается загрузить миниатюрное изображение, отправляя запрос, подобный этому:

blob:http://b2b.local/085a1b81-0513-47a8-a334-fbc4eca4b365

Этот запрос блокируется моим CSP, который не позволяет отображать миниатюру и следующее сообщение в консоли:

отказался загружать изображение 'blob: http://b2b.local/085a1b81-0513-47a8-a334-fbc4eca4b365', потому что он нарушает следующую директиву политики безопасности контента: "img-src 'self' http://*.google -analytics.com http://businessmarketplace.s3.amazonaws.com http://b2b.dev http://placehold.it http://mediaweek.com.au данные: ".

Моя конфигурация CSP выглядит следующим образом: 

<?php
$protocol = 'https://';
if (! isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == 'off') {
    $protocol = 'http://';
}

return [
    'x-content-type-options' => 'nosniff',
    'x-download-options' => 'noopen',
    'x-frame-options' => 'sameorigin',
    'x-permitted-cross-domain-policies' => 'none',
    'x-xss-protection' => '1; mode=block',
    'referrer-policy' => 'unsafe-url',
    'hsts' => [
        'enable' => env('SECURITY_HEADER_HSTS_ENABLE', false),
        'max-age' => 31536000,
        'include-sub-domains' => true,
    ],
    'hpkp' => [
        'hashes' => false,
        'include-sub-domains' => false,
        'max-age' => 15552000,
        'report-only' => false,
        'report-uri' => null,
    ],
    'custom-csp' => env('SECURITY_HEADER_CUSTOM_CSP', null),
    'csp' => [
        'report-only' => false,
        'report-uri' => env('CONTENT_SECURITY_POLICY_REPORT_URI', false),
        'upgrade-insecure-requests' => false,
        'default-src' => [
            'allow' => [
                'player.vimeo.com',
            ],
            'self' => true,
        ],
        'script-src' => [
            'allow' => [
                $protocol.'ajax.googleapis.com',
                $protocol.'code.jquery.com',
                $protocol.'www.googletagmanager.com',
                $protocol.'www.google-analytics.com',
                $protocol.'www.google.com',
                $protocol.'www.gstatic.com',
                $protocol.'sachinchoolur.github.io',
                $protocol.'cdnjs.cloudflare.com',                
                $protocol.'*.addthis.com',
                $protocol.'*.addthisedge.com',
                $protocol.'*.facebook.com',
            ],
            'self' => true,
            'unsafe-inline' => true,
            'unsafe-eval' => true,
            'data' => true,
        ],
        'frame-src' => [
            'allow' => [
                'player.vimeo.com',                
                $protocol.'www.google.com',
                $protocol.'*.addthis.com',
                $protocol.'*.addthisedge.com',
            ]
        ],
        'style-src' => [
            'allow' => [
                $protocol.'fonts.googleapis.com',
                $protocol.'sachinchoolur.github.io',
                $protocol.'code.jquery.com',
                $protocol.'*.addthis.com',
                $protocol.'*.addthisedge.com',
            ],
            'self' => true,
            'unsafe-inline' => true,
        ],
        'img-src' => [
            'allow' => [
                $protocol.'*.google-analytics.com',
                $protocol.'businessmarketplace.s3.amazonaws.com',                
                $protocol.'placehold.it',
                $protocol.'mediaweek.com.au',
            ],
            'self' => true,
            'data' => true,
            'blob' => true,
        ],
        'font-src' => [
            'allow' => [
                $protocol.'fonts.gstatic.com',
            ],
            'self' => true,
            'data' => true,
        ],
        'object-src' => [
            'allow' => [],
            'self' => true,
        ],
    ],
];

Обратите внимание, что я устанавливаю параметры self, data и blob для политики img-src в true .

При удалении всей конфигурации для политики img-src и установке default-src на * я получаю плагин для правильного отображения эскизов, но по сути, я пропускаю весь смысл, разрешая все типы запросов.

Что не так в моей конфигурации, которая препятствует загрузке моих миниатюр, когда атрибуты 'self' и blob: установлены в true ?

1 Ответ

0 голосов
/ 06 июля 2018

После тестирования с моей командой различных конфигураций мы обнаружили, что вы можете использовать массив allow для указания таких директив, как 'self' или blob: поэтому мы устанавливаем директиву img-src на: 

   'img-src' => [
        'allow' => [
            "'self'", 'blob:',
            $protocol.'*.google-analytics.com',
            $protocol.'businessmarketplace.s3.amazonaws.com',                
            $protocol.'placehold.it',
            $protocol.'mediaweek.com.au',
        ],
    ],

А теперь политика разрешает запросы типа blob:http://b2b.local/hash

...