-1

I am trying to deliver an SVG response with the help of NodeJS. This SVG has a small inline JavaScript code that dynamically calculates the width of the SVG. Everything works when the APIs are called directly using the browser. But when I use these APIs in GitHub's readme (to server SVGs in readmes) it's not allowing me to run this inline JavaScript code stored in SVG.

When any SVG is added a link is generated by the github and it looks like :: https://camo.githubusercontent.com/some-unique-id-for-each-content and when I opened this link directly in browser it show the following error in browser's console:

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

But the problem is that I am setting the custom Content-Security-Policy headers before sending the response, which looks like this:

res.setHeader("Content-Type", "image/svg+xml");

res.setHeader("Content-Security-Policy", "default-src 'self'; img-src data:; style-src 'unsafe-inline'; script-src 'self' 'unsafe-inline'");

And it seems that the custom script-src is not working with github readmes. I have also tried to set the hash value, but nothing is affecting the headers.

Can anyone correct me or tell me what's wrong in here?

Rahul
  • 47
  • 8

2 Answers2

1

Github publishes it's own Content-Security-Policy header: enter image description here as you can see it totally restricts javascript usage.

For the svg is published the same headers as above, therefore using javascript is prohibited.

So it's not your CSP locks a javascript, but the github's one.

granty
  • 7,234
  • 1
  • 14
  • 21
  • So is there a way to override this headers? Or any workaround to run JavaScript in SVG? – Rahul Dec 24 '20 at 16:32
  • There is no way to override this headers, because those are under github authority. But after loading images via ` – granty Dec 24 '20 at 17:18
1

GitHub doesn't allow users to execute custom JavaScript when you're viewing an SVG because they set their own Content-Security-Policy header. That's because in general, untrusted JavaScript can do malicious things and GitHub doesn't want people to steal credentials or to become a malware vector.

All user-provided SVGs rendered on GitHub will be subject to this restriction because all images on GitHub are proxied through Camo to prevent malicious JavaScript and tracking, and consequently all images are sent with GitHub's Content-Security-Policy header, not yours. If you want to run JavaScript in SVGs, it will need to be done on your own site only.

bk2204
  • 64,793
  • 6
  • 84
  • 100
  • So one thing I can do is to run that JavaScript on server side and then deliver the calculated width for that SVG. But now question arises how should I run this `svg.setAttribute("width", svg.getBBox().width);` script on server side, because the content in the SVG is dynamically populated. And this SVGs are `Template Literals` on server side. – Rahul Dec 25 '20 at 02:44
  • I'm definitely the wrong person to ask about JavaScript. All I can do is explain why GitHub does what it does. Asking how to do what you want without using JavaScript does seem like a great new question, though. – bk2204 Dec 25 '20 at 19:47
  • Sure I will post a new question on this topic. And thank you for helping me out. – Rahul Dec 26 '20 at 15:16