Content Security Policy (CSP) prevents vue-multiselect from loading due to eval function use

[h3xstream]

Reproduction Link

(jsfiddle can't be used because the vue template are not compiled)

Steps to reproduce

Use the header

Content-Security-Policy: script-src 'self'; object-src 'self';

Include the component in your template (no special configuration needed)

<Multiselect v-model="selection" :options="optionsList"></Multiselect>

Expected behaviour

VueJs use eval to compile its template. However, the template and component can generally be pre-compiled to JS to avoid those runtime eval.

CSP is used by website to prevent unexpected XSS. In my case, when developping a Chrome extension, pages are runned with the header include above. (script-src 'self'; ...)

Actual behaviour

The error that is shown in the console :

The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.

To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.

...

I think the faulty code is the following:

[mattelen]

Can you please confirm which version of the multiselect this is occurring for?

[gazben]

This occures to me with version 2.1.7.

Problematic statement in the bundle:

Function("return this")()

If I try to do the same from the console it will fail too:

I could only find this in the dist folder, so maybe it's a problem with the compilation?