Content Security Policy

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
• NPM@4.0.5
• vue@2.1.6
• Webpack@2.2.0-rc.1
• vue-chartjs@2.3.0
• vue-loader@10.0.2

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>

[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.

[apertureless]

Should be fixed now in v2.3.1

Would be great if you could test it.