Horizon doesn't work when using content security policy headers

[tomgrohl]

• Horizon Version: 3.1.1
• Laravel Version: 5.8.11
• PHP Version: 7.2
• Redis Driver & Version: predis 1.1.1
• Database Driver & Version: Mysql 5.7.25

Description:

Horizon doesn't work when using content security policy headers. Because of the changes to the view files between versions 1 and 3. i.e going from an empty app:

<div id="root"></div>

to a div with html elements and a Vue component inside it,

<div id="horizon" v-cloak>
...
</div>

This causes Vue to use eval which is unsafe and not allow by CSP.

Steps To Reproduce:

1. Add a middleware for content security policy and register in app.php:

<?php

namespace App\Http\Middleware;

use Closure;
use Symfony\Component\HttpFoundation\Response;

/**
 * Class ContentSecurityPolicy
 *
 * @package App\Http\Middleware
 */
class ContentSecurityPolicy
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $policy = [
            'default-src' => [
            ],
            'script-src' => [
                '\'unsafe-inline\'',
                'data:',
                '*.googleapis.com',
                '*.twitter.com',
                '*.facebook.net',
                'www.googleadservices.com',
                'www.gstatic.com',
                'www.google.com',
                'google.com',
                'google.co.uk',
                'use.fontawesome.com',
            ],
            'style-src' => [
                '\'unsafe-inline\'',
                'fonts.googleapis.com',
                'tagmanager.google.com',
                'maxcdn.bootstrapcdn.com',
                'cdn-images.mailchimp.com',
                'use.fontawesome.com',
            ],
            'img-src' => [
                '*',
                'data:',
            ],
            'font-src' => [
                'data:',
                'fonts.googleapis.com',
                'fonts.gstatic.com',
                'use.fontawesome.com',
            ],
            'connect-src' => [
                'fonts.googleapis.com',
            ],
            'frame-src' => [
                'www.google.com',
            ],
        ];


        /** @var Response $response */
        $response = $next($request);

        if ('local' === app()->environment()) {
            $policy['script-src'][] = '\'unsafe-eval\'';
        }
        
        array_walk($policy, function(&$item, $key) {
            $item = $key . ' \'self\' ' . implode(' ', $item) . ';';
        });

        if ($response instanceof Response) {
            $response->headers->set('Content-Security-Policy', implode('', array_values($policy)));
        }

        return $response;
    }
}

2. Try and access the Horizon dashboard. You should get a white screen. i.e horizon not loading.

The only workaround I'be found for now is by replacing the line:

if ('local' === app()->environment()) {
    $policy['script-src'][] = '\'unsafe-eval\'';
}

with:

if ('local' === app()->environment() || $request->routeIs('horizon.*')) {
    $policy['script-src'][] = '\'unsafe-eval\'';
}

But I'm not sure if this is ideal.

[driesvints]

I'm not really sure if it's necessary to support this tbh. This is just the way it works now and I don't know too much of view myself to know if this would at all be possible.

[themsaid]

Horizon is meant to be accessible only by app developers, we don’t really consider it to be accessible to the public and thus these extra checks weren’t in mind while working on it. You need to ignore horizon routes as shared in your example.

[tomgrohl]

@driesvints a fix would be to move the contents inside the horizon div to a Vue component i.e App, much like Horizon did in version 1.0+.

What @themsaid makes sense though. We have access controlled by a staff permission so its only accessible by developers.

I opened this in case this wasn't meant to be an issue.

[driesvints]

Yeah, the horizon dashboard should only be accessible by your dev team.

[francoism90]

I'm having the same issue using nginx secure headers:

# security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;

They are recommend by https://nginxconfig.io/

Any solutions? Thanks.

Edit: it seems this is only in Firefox.

[ultrono]

As this page is ranked highly in Google there is a workaround for this if using the excellent https://github.com/spatie/laravel-csp.

In the shouldBeApplied() method simply add a check to determine if you're viewing the Horizon dashboard (which should be locked down to auth'd users only):

if (request()->segment(index: 1) === config(key: 'horizon.path')) {
   return false;
}