Vue-js Content Security Policy

Question

I am trying to upload my vuejs app to heroku and it wasn't wprking so I used this tutorial. I added the tag below to the head of my index.html

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://localhost:5000 'unsafe-inline' 'unsafe-eval'; script-src 'self' http://localhost:5000 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *">

And it still doesn't work. I get the error below in my console:

Refused to load the image 'data:image/svg+xml;base64,_IMAGE_DATA' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

How do I resolve this please? I've checked other cordova related answers on stack overflow but none of them seem to work for me.

pea3nut pea3nut · Accepted Answer · 2018-07-22T12:10:21

Let's try this way.

Have you used the url-loader in Webpack?

If the answer is Yes, it's will work when you remove the code that looks like:

module: {
    rules: [
        {// remove the block
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
    ]
}

It's will not refer the image use base64 when use file-loader to replace url-loader.

Vue-js Content Security Policy

1 Answers