Inclure un SVG (hébergé sur GitHub) dans MarkDown

Question

Je sais qu'une image peut être placée dans un MD avec la syntaxe MD de l'un ou l'autre des éléments suivants ![Alt text](/path/to/img.jpg) o ![Alt text](/path/to/img.jpg "Optional title") mais j'ai des difficultés à placer un SVG dans le MD où le code est hébergé sur GitHub.

J'utilise finalement rails3, et je change fréquemment le modèle en ce moment, donc j'utilise RailRoady pour générer un SVG du diagramme de schéma des modèles. J'aimerais que ce SVG soit ensuite placé dans le fichier ReadMe.md, puis affiché. Lorsque j'ouvre le fichier SVG localement, il fonctionne, alors comment faire pour que le navigateur rende le SVG dans le fichier MD ? Étant donné que le code sera dynamique jusqu'à ce qu'il soit finalisé (apparemment jamais), héberger le SVG dans un endroit séparé semble excessif et il me manque une approche pour accomplir cela.

Le SVG que j'essaie d'inclure est ici sur GitHub : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

J'ai essayé ce qui suit, avec une image réelle également pour vérifier que la syntaxe fonctionne, mais que le code SVG n'est pas rendu :

![Overview][1]
[1]: https://github.com/specialorange/FDXCM/blob/master/doc/controllers_brief.svg  "Overview"

<img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">

![Alt text](https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg)

[Google Doc](https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit) :

<img src="https://docs.google.com/drawings/pub?id=117XsJ1kDyaY-n8AdPS3_8jTgMyITqaoT3-ah_BSc9YQ&w=960&h=720">

<img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">

<img src="https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit">

pour obtenir les résultats de :

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Aperçu"

---

Google Doc :

Answer 1

Le but de raw.github.com est de permettre aux utilisateurs de visualiser le contenu d'un fichier. Pour les fichiers texte, cela signifie (pour certains types de contenu) que vous pouvez obtenir des en-têtes erronés et que les choses se brisent dans le navigateur.

Lorsque cette question a été posée (en 2012), les SVG ne fonctionnaient pas. Depuis lors, Github a mis en œuvre diverses améliorations. Désormais (au moins pour les SVG), les en-têtes Content-Type corrects sont envoyés.

Exemples

Toutes les méthodes indiquées ci-dessous fonctionnent.

J'ai copié l'image SVG de la question à un repo sur github afin de créer les exemples ci-dessous

Lier des fichiers en utilisant des chemins relatifs (fonctionne, mais évidemment seulement sur github.com / github.io)

Code

![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">

Résultat

Voir l'exemple fonctionnel sur github.com .

Liaison avec les fichiers RAW

Code

![Alt text](https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
<img src="https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">

Résultat

Liaison avec les fichiers RAW à l'aide de ?sanitize=true

Code

![Alt text](https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg?sanitize=true)
<img src="https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg?sanitize=true">

Résultat

Lien vers des fichiers hébergés sur github.io

Code

![Alt text](https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
<img src="https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">

Résultat

---

Quelques commentaires concernant les changements survenus en cours de route :

• Github a mis en place une fonctionnalité qui permet d'utiliser les SVG avec la syntaxe d'image Markdown. L'image SVG sera nettoyée et affichée avec l'en-tête HTTP correct. Certaines balises (comme <script> ) sont supprimés.

  Pour visualiser le SVG assaini ou pour obtenir cet effet à partir d'autres endroits (c'est-à-dire à partir de fichiers markdown qui ne sont pas hébergés dans des dépôts sur http://github.com/ ), il suffit d'ajouter ?sanitize=true à l'URL brute du SVG.

• Comme indiqué par AdamKatz dans les commentaires, l'utilisation d'une source autre que github.io peut introduire des risques potentiels pour la vie privée et la sécurité. Voir le réponse de CiroSantilli y la réponse de DavidChambers pour plus de détails.

• La question à résoudre a été ouvert sur Github le 13 octobre 2015 et a été résolu le 31 août 2017.

Answer 2

J'ai contacté GitHub pour lui signaler que les SVG hébergés sur github.io ne sont plus affichés dans les README de GitHub. J'ai reçu cette réponse :

Nous avons dû désactiver le rendu des images svg sur GitHub.com en raison de vulnérabilités potentielles de type "cross site scripting".

Answer 3

Mise à jour 2020 : comment ils ont fait pour que cela fonctionne tout en évitant Attaques XSS

GitHub semble utiliser deux approches de sécurité, voici un bon article : https://digi.ninja/blog/svg_xss.php voir aussi : https://security.stackexchange.com/questions/148507/how-to-prevent-xss-in-svg-file-upload

• afficher le SVG à l'intérieur <img qui empêche l'exécution de scripts, par exemple sur les README : https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a

• utiliser Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox . Cela empêche le script de s'exécuter même en mode raw qui contient le fichier SVG brut : https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svg

  Vous pouvez voir l'en-tête avec curl -vvv . L'ordinaire github.com Les pages ont également un content-security-policy mais il est beaucoup plus grand.

Mise à jour 2017

Un développeur GitHub se penche actuellement sur ce problème : https://github.com/github/markup/issues/556#issuecomment-306103203

Mise à jour 2014-12 : GitHub effectue désormais le rendu SVG sur le blob show, je ne vois donc pas de raison de ne pas effectuer le rendu sur les rendus README :

• https://github.com/blog/1902-svg-viewing-diffing
• https://github.com/cirosantilli/test/blob/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Notez également que le SVG a une tentative de XSS mais qu'il ne s'exécute pas : https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Le milliard de rire SVG fait geler Firefox 44, mais Chromium 48 est OK : https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah a mentionné que les blobs ne posent pas de problème parce que le SVG est à l'intérieur d'un fichier iframe .

Raison possible pour laquelle GitHub ne sert pas les images SVG

• vulnérabilités générales de XML. Par exemple, l'ouverture d'un exploit d'un milliard de rires a fait planter Firefox sur mon système. Bug de Firefox avec exploit joint : https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Idem sur le chrome : https://code.google.com/p/chromium/issues/detail?id=231562

• Script SVG XSS : alors que la plupart des navigateurs n'exécutent pas de scripts lorsque le SVG est intégré à des fichiers img Il semble que cela ne soit pas exigé par les normes et que GitHub joue la carte de la sécurité.

  Les navigateurs l'exécutent si vous ouvrez le SVG directement (mais il semble que GitHub n'affiche jamais les images directement sur la page d'accueil). github.com ) ou s'il est en ligne (qui sont actuellement complètement supprimés par GitHub), ces cas ne devraient donc pas poser de problème de sécurité. Liens pertinents :

  • spéc : http://www.w3.org/TR/SVG/script.html
  • Démonstration interactive SVG : http://www.w3.org/TR/SVG/images/script/script01.svg

Les questions suivantes portent sur les risques liés au SVG en général : https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload

Answer 4

rawgit.com résout ce problème de manière satisfaisante. Pour chaque requête, il récupère le document approprié sur GitHub et, surtout, le sert avec l'en-tête Content-Type correct.

Answer 5

Ça va marcher. Créez un lien vers votre SVG en utilisant le modèle suivant :

https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg

L'inconvénient est de coder en dur le propriétaire et le dépôt dans le chemin, ce qui signifie que le svg sera cassé si l'un d'eux est renommé.