2.6-csp branch to support inline-templates with CSP enabled

[ragoutje]

What problem does this feature solve?

Using inline-templates when CSP is enabled is currently impossible due to new Function() being used in the compiler in the full build.
In all posts that I could find regarding this issue the runtime only build is suggested. However when you are working on a project where you cannot move all templates to render functions, or precompile to render functions, this is not possible.

To us inline-templates are a very important part of the "progressive framework" idea. This allows us to utilize the full power of Vue while not forcing a refactor upon our entire backend to use API's when we want to upgrade Vue to v2 (even though they ideally should).

For Vue 1.28 there is a specific csp branch which utilises notevil. I want to do the same for Vue 2.6.
I will try to provide a working fork, although I could use some help on this (it's my first time working with the vue source code)

What does the proposed API look like?

1 branch, v2.6.x-csp, will be made where new Function() will be replaced by notevil.Function() to safely eval expressions.
Just like v1.28-csp, notevil will be included in the codebase.

Currently I have found new Function() in src/compiler/to-function.js:15 38 and src/compiler/no-error.js:86 95 which have to be refactored to notevil.Function() calls.

[ragoutje]

I have tried to apply notevil by following this commit 94cf00d which was done in the vue 1.28-csp branch.

I have copied the notevil.js file from the commit above and added the commits from notevil@1.1.0 to it: mmckegg/notevil@939b3f6

This results in an error (with or without the 1.1.0 code): Unexpected expression: WithStatement
Turns out notevil has no support for with statements. I added the following to the walk function switch statement, but I know it should return some more in order to actually achieve something:

case 'WithStatement':
                    return;

With statements are still present in Vue code: I found this issue concerning them: #4115 (comment)
But should not be a problem as commented in the issue by Evan You.

I have tried the following in my dev env which has CSP enabled, but also did not render anything (probably expected behaviour as nothing is returned when with statements are encountered):

function createFunction(code, errors) {
    try {
        // return new Function(code)

        const fn = notevil.Function(code);
        return function() {
            return fn.call(this);
        };
    } catch (err) {
        errors.push({ err, code });
        return noop;
    }
}

As I mentioned there are no visible errors and nothing renders. The DOM is removed but Vue did not replace it with it's own DOM.

When using breakpoints in Firefox I find the following error:
TypeError: toFixed method called on incompatible Object
And a quick google search hints that the "this" context is probably incorrectly set but I am unable to confirm this. Which is also probably related to the fact with statements are not properly handled by notevil.

It would be awesome if someone with a little more knowledge of inner workings of Vue and/or notevil could work out how to fix this.

[ragoutje]

Also opened an issue at the notevil repo: mmckegg/notevil#33

[buddh4]

Did not find any information regarding CSP in the vue3 guide, was this resolved or is this part missing?