Bir görüntünün MD sözdizimiyle MD'ye yerleştirilebileceğini ![Alt text](/path/to/img.jpg)veya![Alt text](/path/to/img.jpg "Optional title") ama kod GitHub'dan barındırılan MD bir SVG verme konusunda zorluk yaşıyorum.

Nihayetinde rails3 kullanarak ve şu anda modeli sık sık değiştirme, bu yüzden modellerin şema diyagramının bir SVG oluşturmak için RailRoady kullanıyorum . Bu SVG'nin ReadMe.md dosyasına yerleştirilmesini ve görüntülenmesini istiyorum. SVG dosyasını yerel olarak açtığımda, işe yarıyor, bu yüzden tarayıcının SVG'yi MD dosyasında oluşturmasını nasıl sağlayabilirim? Kodun sonlandırılıncaya kadar dinamik olacağı göz önüne alındığında (görünüşte asla), SVG'yi ayrı bir yerde barındırmak aşırı görünüyor ve bunu başarmak için bir yaklaşım eksik.

Dahil etmeye çalıştığım SVG burada GitHub'da:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

Ben sadece SVG kodu işlenmiyor sözdizimi çalıştığını doğrulamak için gerçek bir görüntü ile, aşağıdaki denedim:

![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">

sonuçlarını almak için:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Genel Bakış"

Google Dokümanı :

Amacı, raw.github.comkullanıcıların bir dosyanın içeriğini görüntülemesine izin vermektir, bu nedenle metin tabanlı dosyalar için (belirli içerik türleri için) yanlış üstbilgiler alabilirsiniz ve tarayıcıda bazı şeyler bozulabilir.

Bu soru sorulduğunda (2012'de) SVG'ler işe yaramadı. O zamandan beri Github çeşitli iyileştirmeler yaptı. Şimdi (en azından SVG için), doğru İçerik Türü başlıkları gönderilir.

Örnekler

Aşağıda belirtilen tüm yollar işe yarayacaktır.

^{SVG resmini sorudan github'daki bir repoya kopyaladımAşağıdaki örnekleri oluşturmak için}

Göreli yolları kullanarak dosyalara bağlanma (Çalışır, ancak açıkça yalnızca github.com / github.io adresinde)

kod

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

Sonuç

Github.com adresindeki çalışma örneğine bakın .

RAW dosyalarına bağlanma

kod

![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">

Sonuç

Kullanarak RAW dosyalarına bağlanma ?sanitize=true

kod

![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">

Sonuç

Github.io'da barındırılan dosyalara bağlantı verme

kod

![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">

Sonuç

Yolda meydana gelen değişikliklerle ilgili bazı yorumlar:

• Github, SVG'lerin Markdown görüntü sözdizimi ile kullanılmasını mümkün kılan bir özellik uygulamıştır. SVG görüntüsü dezenfekte edilecek ve doğru HTTP üstbilgisiyle görüntülenecektir. Bazı etiketler (gibi <script>) kaldırılır.

  Sterilize edilmiş SVG'yi görüntülemek veya bu etkiyi başka yerlerden elde etmek için (örneğin, http://github.com/ adresindeki depolarda barındırılmayan işaretleme dosyalarından ) ?sanitize=trueSVG'nin ham URL'sine eklemeniz yeterlidir .

• AdamKatz'ın yorumlarda belirttiği gibi, github.io dışında bir kaynak kullanmak potansiyel olarak gizlilik ve güvenlik riskleri getirebilir. Bkz CiroSantilli tarafından cevap ve DavidChambers tarafından cevap daha fazla ayrıntı için.

• Bu sorunu çözme sorunu Github'da 13 Ekim 2015'te açıldı ve 31 Ağustos 2017'de çözüldü

Github.io tarafından barındırılan SVG'lerin artık GitHub README'lerde görüntülenmediğini söylemek için GitHub ile iletişim kurdum. Bu yanıtı aldım:

Siteler arası komut dosyası oluşturma güvenlik açıkları nedeniyle GitHub.com'da svg resim oluşturmayı devre dışı bırakmak zorunda kaldık.

rawgit.com bu sorunu güzelce çözüyor. Her istek için uygun belgeyi GitHub'dan alır ve en önemlisi de doğru Content-Type üstbilgisiyle sunar.

Bu çalışacak. Aşağıdaki kalıbı kullanarak SVG'nize bağlanın:

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

Olumsuz yol sahibi ve repo hardcoding, yani bunlardan biri yeniden adlandırılırsa svg kırılacağı anlamına gelir.

2020 Güncellemesi

GitHub iki güvenlik yaklaşımı kullanıyor gibi görünüyor, bu iyi bir makale: https://digi.ninja/blog/svg_xss.php ayrıca bkz: /security/148507/how-to-prevent- xss-in-svg-dosya yükleme

• <imgkomut dosyalarının, örneğin README'lerde çalışmasını engelleyen SVG etiketinin içinde göster : https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a

• kullanın Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox. Bu, betiğin bile içinde çalışmasını önlerraw dosyasının ham SVG dosyasını içeren : https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svg

  Başlığı ile görebilirsiniz curl -vvv. Normal github.comsayfalarda da a vardır content-security-policy, ancak çok daha büyüktür.

2017 Güncellemesi

Bir GitHub geliştiricisi şu anda bunu araştırıyor: https://github.com/github/markup/issues/556#issuecomment-306103203

Güncelleme 2014-12 : GitHub artık SVG'yi blob şovunda oluşturuyor, bu yüzden README render'larında neden görüntülenmemek için bir neden görmüyorum:

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

Ayrıca SVG'nin XSS girişimi olduğunu, ancak çalışmadığını unutmayın: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Milyar kahkaha SVG, Firefox 44 Freeze yapıyor, ancak Chromium 48 tamam: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah , lekelerin iyi olduğunu belirtti çünkü SVG biriframe .

GitHub için SVG görüntüleri sunmama olasılığı

• genel XML güvenlik açıkları. Örneğin bir milyar gülme sömürüsü açmak Firefox'u sistemime çökertti. İstismar eklenmiş Firefox hatası: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Chromium'da aynı: https://code.google.com/p/chromium/issues/detail?id=231562

• SVG XSS komut dosyası oluşturma: SVG gömülü olduğunda tarayıcıların çoğu komut dosyası çalıştırmaz img , bunun standartlar için gerekli olmadığı görülüyor, bu nedenle GitHub güvenli bir şekilde oynuyor.

  Tarayıcılar, SVG'yi doğrudan açarsanız (ancak GitHub'ın görüntüleri doğrudan github.cometki alanında göstermediği) veya satır içi (şu anda GitHub tarafından tamamen kaldırılmışsa) görünüyorsa, bu durumda bir güvenlik sorunu olmamalıdır. İlgili bağlantılar:

  • spec: http://www.w3.org/TR/SVG/script.html
  • etkileşimli SVG demosu: http://www.w3.org/TR/SVG/images/script/script01.svg

Aşağıdaki sorular genel olarak SVG'nin risklerini sormaktadır: /security/11384/exploits-or-other-security-risks-with-svg-upload

İmg etiketli çalışan bir örneğim var, ancak resimleriniz görüntülenmiyor. Gördüğüm fark içerik türüdür.

Github resmini yazınızdan kontrol ettim (google doc görüntüleri bağlantı hataları nedeniyle hiç yüklenmiyor). Github'dan alınan resim, tarayıcınız tarafından bir resim olarak görüntülenmeyecek olan içerik türü: metin / düz olarak sunulur.

Svg için doğru içerik türü değeri image / svg + xml'dir. Yani svg dosyalarının doğru mime türünü ayarladığından emin olmalısınız, ancak bu bir sunucu sorunu.

Http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg ile deneyin ve etikette genişlik ve yükseklik belirtmeyi unutmayın.

Bu siteyi kullanın: https://rawgit.com , svg dosyasında izin sorunu olmadığından benim için çalışıyor.
Lütfen RawGit'in Rawgit SSS bölümünde belirtildiği gibi bir github servisi olmadığına dikkat edin :

RawGit, GitHub ile hiçbir şekilde ilişkilendirilmez. Lütfen GitHub ile RawGit konusunda yardım istemeyin

İhtiyacınız olan svg'nin URL'sini girin, örneğin:

https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg

Ardından, görüntülemek için kullanılabilecek url feryatını alabilirsiniz:

https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg

Tıpkı bunun benim için Github'da işe yaradığı gibi.

![Imgae Caption](ImageAddressOnGitHub.svg)

veya

<img src="ImageAddressOnGitHub.svg">