SVG image tag doesn't work on github README-CodePudding

I wrote sipmple server with golang witch should return a SVG with stats from stack-overflow. Everything works fine as long as it tests the response from my server in a browser or Postman, but when I try to pin this response as an image in the github README.md the image I provided from the Stack API does not display properly. This is a example how it's look like:

Via browser:

And result on README.md file (this red line is only for emphasize)

Does Github block images from other sources? In my case the image URL indicates that the photo is hosted on a Facebook server href="https://graph.facebook.com/1432867793574670/picture?type=large But does it really matter?

Is there any way to get around this and display this image correctly? Maybe there is some svg image tag attribute that will help to fix this problem?

Link to the repository where this problem occurs: https://github.com/kubo550/stack-stats

This is the exact svg code i get in response from the server:

<svg data-testUserId="14513625" width="158" height="47" viewBox="0 0 158 47" fill="none"
     xmlns="http://www.w3.org/2000/svg">
    <rect width="158" height="47" fill="#2D2D2D"/>

        <!-- this is the problematic line -->
    <image x="16" y="10" href="https://graph.facebook.com/1432867793574670/picture?type=large" height="24" width="24"/>
    
    <text x="64" y="23" font-weight="bold" fill="#C4CCBC" font-family="Arial" font-size="12"
          text-anchor="middle" dominant-baseline="middle">1,707
    </text>
    <circle text-anchor="middle" dominant-baseline="middle" cx="90" cy="23" r="3" fill="#F0B400"/>
    <text x="100" y="23" font-size="12" font-family="Arial" font-weight="bold"
          text-anchor="middle" dominant-baseline="middle" fill="#F0B400">1
    </text>
    <circle text-anchor="middle" dominant-baseline="middle" cx="112" cy="23" r="3" fill="#999C9F"/>
    <text x="122" y="23" font-size="12" font-family="Arial" font-weight="bold"
          text-anchor="middle" dominant-baseline="middle" fill="#999C9F">7
    </text>
    <circle text-anchor="middle" dominant-baseline="middle" cx="134" cy="23" r="3" fill="#AB8A5F"/>
    <text x="146" y="23" font-size="12" font-family="Arial" font-weight="bold"
          text-anchor="middle" dominant-baseline="middle" fill="#AB8A5F">11
    </text>
</svg>

CodePudding user response：

GitHub serves your SVG through its own domain camo.githubusercontent.com and does not directly refer to your image.

<img src="https://camo.githubusercontent.com/f9e51abbda49dfb31243a3642e1f4a2f7b31371cf61e23c103c584c189a0791f/68747470733a2f2f737461636b2d73746174732e6865726f6b756170702e636f6d2f73746174733f69643d3134353133363235" alt="stack stats" data-canonical-src="https://stack-stats.herokuapp.com/stats?id=14513625" style="max-width: 100%;">

camo.githubusercontent.com gets served with the content-security-policy img-src data:. This tells your browser from which sources it is allowed to request additional resources, which are only inlined images.

When opening your image in the browser, it gives this error in the console:

Refused to load the image 'https://graph.facebook.com/1432867793574670/picture?type=large' because it violates the following Content Security Policy directive: "img-src data:".

You need to inline the image into the svg instead of referencing an external url.