Vue - unsafe eval?

[psiinon]

The HUD isnt working for me any more (Firefox 58.0.2) :(
I'm getting this error in the console: Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src https://zap”). Source: call to eval() or related function blocked by CSP.
And it links to this section of vue.js:

      // detect possible CSP restriction
      try {
        new Function('return 1');
      } catch (e) {
        if (e.toString().match(/unsafe-eval|CSP/)) {
          warn$$1(
            'It seems you are using the standalone build of Vue.js in an ' +
            'environment with Content Security Policy that prohibits unsafe-eval. ' +
            'The template compiler cannot work in this environment. Consider ' +
            'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
            'templates into render functions.'
          );
        }
      }

Is anyone else seeing this?
We really dont want to have to enable unsafe-eval :((

[psiinon]

Maybe we need to use vue.runtime.js instead? laravel-mix/laravel-mix#1052

[psiinon]

Tried with vuw.runtime.js and then got these warnings:

"You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html"

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

@dscrobonia Looks like we need to pre-compile some templates?

[psiinon]

For ref, the HUD comes up fine and I can navigate the target site, but as soon as I click on one of the HUD tools the whole page locks up and I cant do anything.

[thc202]

Yeah, seeing this as well.

[dscrobonia]

Looks like we're going to need to precompile our templates to avoid CSP errors. We could rewrite every html template using render functions instead of building a pre-compile build chain, but that sounds like a painful and ugly way to manage templates. Instead it looks like we should rewrite the html as single file components (SFC) and precompile them by integrating with webpack + vue-loader. I'm new to a lot of this world, but it appears that webpack is a little heavy weight with some upfront configuration, but ultimately we should be able to add it to a build chain and it shouldn't be horrible, though it may take some work to set up. Ultimately it would make our source structure more like this where we have a components directory strictly for reusable vue components, and then add those to vue "apps" for each iframe which would replace the current html + js + css combos of our UI elements.

This is a lot of work and it will make things more complex and less readable (imo) - especially because we aren't using all of this for a traditional SPA, but rather very small, frequently reloaded iframes. BUT it may be not be that bad and ultimately could be worth it to have a more flexilbe and modern UI. And a good UX is important to make sure people appreciate such a badass tool.

[dscrobonia]

Here is a good overview of what switching to a webpack + vue-loader world would look like. It would require us complicatng our directory structure, and we would need to add npm run build to our build pipeline.

[dscrobonia]

Using a modern js build pipeline does allow us to start integrating linters, as well as better handling of environment variables and static resources. But I believe it would only apply to our frontend vue apps, and not to the rest of the source (service worker and tools) which would need a seperate build pipeline. Not that we couldn't do that.

[dscrobonia]

Also here's a google doc where I'm compiling my notes on all this. (I forget way too easily) https://docs.google.com/document/d/1vNJEyuYNWK6FF-9VAGuXhiJXPwFr1iVQ8WL8gD25PGw/edit?usp=sharing

[psiinon]

👍 That all looks good to me :)
We'll need to work out a clean dev route for us and anyone who wants to hack on the HUD (and change templates). Luckily it looks like there are various options for gradle/npm integration.
Ideally we'll provide a good set of templates so that most people wont need to change them.

[dscrobonia]

👍 I'll start working out how to build that out then!

[psiinon]

\o/
FYI today I'm going to try to implement a load of ZAP HUD options, including a Development mode and an option to use Unsafe eval to allow inline template compilation...