Vue-chartjs: Content Security Policy

[syxolk]

Expected Behavior

Displays line chart.

Actual Behavior

Fails to render the line chart with the following errors:

[Vue warn]: 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.

[Vue warn]: failed to compile template:


    <div>
      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>


- invalid expression: :id="chartId"
- invalid expression: :width="width"
- invalid expression: :height="height"

TypeError: Cannot read property 'getContext' of undefined

Environment

• OS: Ubuntu 14.04.
• Node v7.2.1
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

I'm using this Content-Security-Policy: Content-Security-Policy:base-uri 'self'; default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src *; connect-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'

All other parts of my application work as expected until I try to render a chart for the first time.

My LineChart component looks like this:

<script>
import { Line } from "vue-chartjs";

export default Line.extend({
    props: ["data", "options"],
    mounted () {
        this.renderChart(this.data, this.options);
    }
});
</script>

[apertureless]

Hi @syxolk ,

well this is not really a bug in vue-chartjs.

With vue 2 there was a split into a runtime-only and standalone build. The standalone build got the template compiler included, which is needed for the template function / option.

If you're using *.vue files you can also use the runetime-only build because all template options get compiled into render functions. However I am utilizing the extend functions of vue and the base charts are *.js files.

That is why vue-chartjs is using the standalone build of vue. (alias for vue.common.js is set in webpack.conf)

Generally there is no issue with that, however if you are in a CSP environment like chrome apps the standalone build will not work.

https://vuejs.org/v2/guide/installation.html#CSP-environments

The only way to get around, would be to use render functions in the base charts instead template.
I will see if I can rewrite it on the weekend.

[syxolk]

Thanks for your quick answer.

I'm using the runtime-only build of vue and precompile my *.vue files with webpack/vue-loader. Therefore I added a restrictive CSP header that disallows eval. It's a pity that vue-chartjs relies on the standalone build of vue.

Would be really nice if you can make it work with the runtime-only build as well.

However, I don't want to spoil your Christmas Eve :christmas_tree: Enjoy your holidays :smile:

[apertureless]

Hey,

well its not a big deal I pushed the rewrite to https://github.com/apertureless/vue-chartjs/tree/feature/runtimebuild

Need only to rewrite the tests a bit and replace the template option with the render function. And do some testing in external projects, go be sure that I didn't break anything.

[apertureless]

Should be fixed now in v2.3.1

Would be great if you could test it.

[syxolk]

Works great for my LineChart component, tested with the same CSP header in Chrome 55 and Firefox 50.

Thanks for fixing that so fast.