Horizon Dashboard does not work with strict content security policy

[Grldk]

• Horizon Version: 5.7.6
• Laravel Version: 8.41.0
• PHP Version: 7.4
• Redis Driver & Version: predis 1.1.7

Description:

Apparently the Horizon dashboard uses eval, which makes it unusable for us in production. I'm not in a position to disable the CSP for security reasons. And I'm not familiar with Vue, so I'm not sure how to solve this.

Apart from this it also loads an external font from google fonts which is blocked, but I don't think this breaks functionality. Making layout.blade.php publishable and editable would enable us to fix/work around this.

Steps To Reproduce:

Set a CSP which excludes the use of unsafe-eval and external style sources, observe the dashboard not loading and producing errors in the javascript console:

Content Security Policy: The page’s settings blocked the loading of a resource at https://fonts.googleapis.com/css?family=Nunito (“style-src”). Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).

[driesvints]

Apparently the Horizon dashboard uses eval

Hmm, I can't find that. Can you point out where exactly?

google fonts which is blocked

It falls back to the default sans-serif font so this isn't that much of an issue I think.

I don't think we're going to take action here since nothing really is broken. Sorry

[Grldk]

@driesvints

This has been reported before (should have added that, I'm sorry) see https://github.com/laravel/horizon/issues/576

Vue seems to use eval in some cases. I'm not familiar with Vue, so I'm not sure what the best solution to this is. https://forum.vuejs.org/t/csp-problem-with-eval/17581 Seems to suggest using the vue runtime build fixes this. https://github.com/laravel/horizon/issues/576 implies this issue has been introduced into horizon with version 3 and could be fixed in another way, but having never done anything with Vue I'm not sure.

I would say that this is unwanted and should be considered a bug, as setting a strict CSP seems to be more and more common, but that's just my perspective.

In our production environment the CSP headers are set by the webserver, and I'm not in a position to change them for horizon.

[driesvints]

If you can send in a non-breaking pr we could consider it maybe.

[Grldk]

I'll try freeing up some time in the coming week to take a stab at it. Would you consider reopening this so someone with experience with Vue might try to fix this?

[driesvints]

No sorry. Just send in a pr if you're willing.