Image in svg from external url not loaded because it violates the following Content Security Policy directive: “default-src 'none'”
Question
So I'm trying to create an svg that contains an image from the external url https://i.stack.imgur.com/4iGwt.jpg :
<svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" rx="5" ry="5" width="300" height="86" fill="red" ></rect> <svg x="11" y="11" width="auto"> <image transform="translate(0,0)" width="64" height="64" ry="30" href="https://i.stack.imgur.com/4iGwt.jpg" /> </svg> </svg>
The problem that if I host this svg on GitHub for example the image is not loaded and I got this error message:
Refused to load the image 'https://i.stack.imgur.com/4iGwt.jpg' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
You can see it live on https://github.com/johannchopin/poc-svg/blob/main/svg.svg .
I read on this answer that I have to add some meta tag like:
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">
However when I add it at the top of my svg nothing change. Has anyone an idea how I could see my avatar in the svg on GitHub?
1 answers
solution1
2 ACCPTED 2021-05-08 18:50:36
The <meta http-equiv="Content-Security-Policy"...> works only if placed in the <head> section.
And unfortunately Github publishes its own CSP via HTTP header:
This header disallows images therefore blocks SVG. There is no way to relax this CSP if you are not Github admin, of course.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.