2

I'm using Google Drive to upload my images, so my images' URL in my website are like this:

<img src="https://drive.google.com/uc?export=view&id=1SJcEZndPKl7DxU1K8Iit" />

In my local computer it's working well, but in my VPS it's not working, I'm getting this error:

Refused to load the image 'https://drive.google.com/uc?export=view&id=1SJcEZndPKl7DxU1K8Iit' because it violates the following Content Security Policy directive: "img-src 'self' data:".

I researched it and tried this code in dist/index.html

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';">

But still I'm getting the same error event when I write that to the head, and I'm starting to get a new error:

Refused to load the font 'data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAz0AAsAAAAAGOAAAAymAAEAAAAAA...' because it violates the following Content Security Policy directive: "default-src * 'unsafe-inline' 'unsafe-eval'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'data:' must be added explicitly.

After that I tried:

<meta http-equiv="Content-Security-Policy" content="default-src *;img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *; font-src 'self' data:">

And my second error (Refused to load the font) was solved, but I'm still getting the same main error.

What should I do?

2
  • Did you change the option for the image link to "Everyone"? Inspecting the source of the tutorial here seems to indicate that it's possible (the image at the bottom is from Google Drive), so perhaps you can start from scratch and follow the directions there.
    – dan
    Aug 8, 2022 at 23:36
  • 2
    It appears you also posted this question on Stack Overflow here and included some added details such as using Vue.js and your backend code, which may impact answers here. In the future, please post questions only to one Stack Exchange site and then flag it to request migration if you feel it better fits on another one.
    – dan
    Aug 9, 2022 at 0:01

1 Answer 1

1

The meta code you put is correct, it seems that you are running your site page under a script that is configured with a primary file, e,g : config.php or something.php, especially if the php files are calling pages using include and require where this meta might not work because there is another one above it, you might wanna find that and comment it out. Since info about that is limited, I suggest the following solution :

  1. Keep the meta code you put but add this under it :

    <meta http-equiv="Content-Security-Policy" content="default-src https://drive.google.com; child-src 'none'; object-src 'none'">

Keep in mind that with a more open content policy comes more vulnerability to XSS hacking attempts which you might not be worried about now, but maybe in the future.

Would like to know more about your script.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.