Unusable, blocked by Content Security Policy

[Grldk]

This is probably more of a feature request than a bug, so I'm putting this here instead of in issues. Would like to use this log viewer, it looks great, but I cannot use it in production because it is blocked by our Content Security Policy.

Our CSP forbids the use of unsafe-eval, and Vue by default uses Function(), which gets blocked by this CSP... There are ways around this, but I'm not really familiar with Vue, so I'm afraid I can't be that much help to solve it.

[arukompas]

Hey @Grldk , thanks a lot for the report!

I'll have a look at it this weekend and hopefully there's an easy and non-breaking solution to this :) After all, assets are already pre-built and come part of the package, so there should be no need for eval use.

[Grldk]

Thanks for your quick reply!

It's an annoying consquence of using Vue.. And of using CSP in the first place, it's not widespread enough for people to take it into account unfortunately..

I've tried to fix it for Laravel Horizon, but failed (PR got reverted), and I'm not sure why. I don't really have any Vue experience, and not enough time or a use case to dive into it to see what the issue is.. Hope you can fix it for this package.. Thanks for your time!

[Grldk]

Hey @arukompas, had any luck with this?

[arukompas]

Hey @Grldk , I tried it for a while but I couldn't figure out how to make it CSP-friendly.

I have another idea, though, just not sure if it would work for your setup.

Would it be possible to override the CSP policy just for Log Viewer? Here's an example:

1. Publish the Log Viewer's layout - php artisan vendor:publish --tag=log-viewer-views
2. Open resources/views/vendor/log-viewer/index.blade.php
3. Add a meta tag to set a different CSP policy for this page

    <!-- ... -->
    <link rel="shortcut icon" href="{{ asset(mix('img/log-viewer-32.png', 'vendor/log-viewer')) }}">
+   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self';">

    <title>Log Viewer{{ config('app.name') ? ' - ' . config('app.name') : '' }}</title>
    <!-- ... -->

This will allow unsafe-evals and, based on my testing, allows Log Viewer to work.

Let me know how it goes!

[Grldk]

Hey @arukompas, thanks again for your time.

Unfortunately that approach will not work. For CSP, stricter rules take precedence. We set those rules at the server level. So laxer rules set in PHP/Laravel (by middleware for example) or in the html do not work.

If I find some time I might try to fix this for this package, but I'm quite short on time, and as I mentioned, earlier attempts to fix this for Laravel Horizon failed, so I'm not sure if I will be succesful..

[Grldk]

I have spent some time on this, have not been able to fix this, keep running into problems (some related to Vue, some to Webpack/mix) I don't understand or cannot figure out how to fix.. Might come back to this later, but for now decided to use something else

[arukompas]

I've also tried to change how Vue is bundled/built, but have been unsuccessful... I'm sorry @Grldk , but as of this moment I don't have any solution to this.

[hackerkok]

Hello!

I ran into the same issue. Is there any update on how to fix it?

some info

[arukompas]

Unfortunately we don't have a solution yet. It's been a long time since we last looked, and not that many users seem affected by this. If you do have any hints or time to give it a try, that'd be most appreciated.

[jkokotinis]

fixed it and submitted a pull request.
thanks for the great plugin!

[arukompas]

@jkokotinis amazing, thank you again! New released tagged v3.17.0 which now uses Vue runtime build.

@hackerkok @Grldk Please update to v3.17.0, should work in CSP environments now.