时间戳

首页 > 解决方案 > 上传到 S3 后 CSP 阻止 Fineuploader 缩略图

amazon-s3 - 上传到 S3 后 CSP 阻止 Fineuploader 缩略图

问题描述

我的Content-Security-Policy有问题，它由bepsvpt/secure-headers包处理。

使用Fineuploader将文件成功上传到 S3 服务器后，插件会尝试加载缩略图，发送如下请求：

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,
        ],
    ],
];

请注意，我将img-src策略的选项 self、data 和 blob 设置为true。

当删除 img-src策略的所有配置并将default-src设置为*我让插件正确显示缩略图但基本上我通过允许所有类型的请求而错过了整点。

当 'self' 和 blob: 属性设置为true时，我的配置有什么问题会阻止我的缩略图加载？

标签： amazon-s3http-headersblobfine-uploadercontent-security-policy

解决方案

在与我的团队测试不同的配置后，我们发现您可以使用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

推荐阅读