ฉันรู้ว่าภาพสามารถวางใน MD ที่มีไวยากรณ์ MD อย่างใดอย่างหนึ่ง![Alt text](/path/to/img.jpg)หรือ![Alt text](/path/to/img.jpg "Optional title")แต่ฉันมีปัญหาในการวาง SVG ใน MD ที่รหัสโฮสต์บน GitHub

ในที่สุดการใช้ rails3 และการเปลี่ยนรูปแบบบ่อยครั้งในตอนนี้ดังนั้นฉันใช้RailRoadyเพื่อสร้าง SVG ของ schema diagram ของโมเดล ฉันต้องการให้ SVG นั้นถูกวางไว้ใน ReadMe.md และแสดง เมื่อฉันเปิดไฟล์ SVG ในเครื่องมันจะทำงานได้ดังนั้นฉันจะให้เบราว์เซอร์แสดง SVG ในไฟล์ MD ได้อย่างไร ระบุว่ารหัสจะเป็นแบบไดนามิกจนกว่าจะได้รับการสรุป (ดูเหมือนจะไม่มีเลย) โฮสติ้ง SVG ในที่ต่าง ๆ ดูเหมือนจะเกินความจริงและฉันก็ขาดวิธีการในการทำสิ่งนี้ให้สำเร็จ

SVG ที่ฉันพยายามรวมอยู่ที่นี่ใน GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

ฉันได้ลองทำสิ่งต่อไปนี้แล้วโดยใช้รูปภาพจริงเช่นกันเพื่อตรวจสอบว่าไวยากรณ์ทำงานได้หรือไม่เพียงแสดงรหัส SVG:

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

เพื่อรับผลลัพธ์ของ:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "ภาพรวม"

Google Doc :

จุดประสงค์raw.github.comคือเพื่อให้ผู้ใช้สามารถดูเนื้อหาของไฟล์ได้ดังนั้นสำหรับไฟล์ที่เป็นข้อความหมายความว่า (สำหรับบางประเภทเนื้อหา) คุณจะได้รับส่วนหัวที่ไม่ถูกต้องและสิ่งต่าง ๆ ในเบราว์เซอร์

เมื่อคำถามนี้ถูกถาม (ในปี 2012) SVG ไม่ทำงาน ตั้งแต่นั้นมา Github ได้ดำเนินการปรับปรุงต่าง ๆ ตอนนี้ (อย่างน้อยสำหรับ SVG) ส่วนหัวประเภทเนื้อหาที่ถูกต้องจะถูกส่ง

ตัวอย่าง

วิธีการทั้งหมดที่ระบุไว้ด้านล่างจะใช้งานได้

^{ฉันคัดลอกภาพ SVG จากคำถามไปยังrepo บน githubเพื่อสร้างตัวอย่างด้านล่าง}

การลิงก์ไปยังไฟล์โดยใช้พา ธ สัมพัทธ์ (ใช้งานได้ แต่เห็นได้ชัดเฉพาะบน github.com / github.io)

รหัส

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

ผลลัพธ์

ดูตัวอย่างการทำงานใน github.com

การลิงก์ไปยังไฟล์ RAW

รหัส

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

ผลลัพธ์

การลิงก์ไปยังไฟล์ RAW โดยใช้ ?sanitize=true

รหัส

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

ผลลัพธ์

เชื่อมโยงไปยังไฟล์ที่โฮสต์บนgithub.io

รหัส

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

ผลลัพธ์

ความคิดเห็นบางประการเกี่ยวกับการเปลี่ยนแปลงที่เกิดขึ้นระหว่างทาง:

• Github ได้ใช้คุณสมบัติที่ทำให้ SVG สามารถใช้กับไวยากรณ์ภาพ Markdown ได้ ภาพ SVG จะถูกทำให้สะอาดและแสดงด้วยส่วนหัว HTTP ที่ถูกต้อง แท็กบางอย่าง (เหมือน<script>) จะถูกลบ

  หากต้องการดู SVG ที่ถูกสุขลักษณะหรือเพื่อให้ได้ผลนี้จากที่อื่น (เช่นจากไฟล์มาร์กอัปที่ไม่ได้โฮสต์ใน repos บนhttp://github.com/ ) เพียงต่อท้าย?sanitize=trueURL ดิบของ SVG

• ตามที่AdamKatzระบุไว้ในความคิดเห็นการใช้แหล่งข้อมูลอื่นนอกเหนือจาก github.io สามารถแนะนำความเสี่ยงด้านความเป็นส่วนตัวและความปลอดภัยที่อาจเกิดขึ้นได้ ดูคำตอบของ CiroSantilliและคำตอบของ DavidChambersสำหรับรายละเอียดเพิ่มเติม

• ปัญหาในการแก้ไขปัญหานี้เปิดใน Github เมื่อวันที่ 13 ตุลาคม 2558 และได้รับการแก้ไขในวันที่ 31 สิงหาคม 2017

ฉันติดต่อ GitHub เพื่อบอกว่า SVG ที่โฮสต์โดย github.io จะไม่ปรากฏใน README ของ GitHub อีกต่อไป ฉันได้รับคำตอบนี้:

เราต้องปิดการใช้งานการแสดงรูปภาพ svg บน GitHub.com เนื่องจากช่องโหว่การเขียนสคริปต์ข้ามไซต์ที่อาจเกิดขึ้น

rawgit.comแก้ปัญหานี้ได้ดี สำหรับแต่ละคำขอจะดึงเอกสารที่เหมาะสมจาก GitHub และให้บริการกับส่วนหัว Content-Type ที่ถูกต้อง

สิ่งนี้จะได้ผล เชื่อมโยง SVG ของคุณโดยใช้รูปแบบต่อไปนี้:

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

ข้อเสียคือการเข้ารหัส hardcoding เจ้าของและ repo ในเส้นทางซึ่งหมายความว่า svg จะแตกถ้าทั้งสองถูกเปลี่ยนชื่อ

อัพเดท 2020

GitHub ดูเหมือนจะใช้วิธีการรักษาความปลอดภัยสองวิธีนี้เป็นบทความที่ดี: https://digi.ninja/blog/svg_xss.phpดูเพิ่มเติมที่: /security/148507/how-to-prevent- XSS ใน SVG ไฟล์อัปโหลด

• แสดง SVG ภายใน<imgแท็กซึ่งป้องกันไม่ให้สคริปต์ทำงานเช่นใน READMEs: https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a

• Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandboxใช้ วิธีนี้จะป้องกันไม่ให้สคริปต์ทำงานแม้ในrawที่มีไฟล์ SVG แบบดิบ: https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svg

  curl -vvvคุณสามารถมองเห็นส่วนหัวที่มี github.comหน้าปกติยังมีcontent-security-policyแต่มันใหญ่กว่ามาก

อัปเดต 2017

GitHub dev กำลังดูสิ่งนี้: https://github.com/github/markup/issues/556#issuecomment-306103203

อัปเดต 2014-12 : ตอนนี้ GitHub แสดงผล SVG ในรายการ blob ดังนั้นฉันไม่เห็นเหตุผลที่จะไม่แสดงในการเรนเดอร์ README:

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

โปรดทราบด้วยว่า SVG มีความพยายาม XSS แต่ไม่ได้ทำงาน: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

SVG พันล้านหัวเราะทำให้ Firefox 44 หยุดทำงาน แต่ Chromium 48 นั้นใช้ได้: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

เปตาห์กล่าวถึง blobs ว่าจะมีการปรับเพราะ SVG iframeเป็นภายใน

เหตุผลที่เป็นไปได้สำหรับ GitHub ไม่ให้บริการภาพ SVG

• ช่องโหว่ XML ทั่วไป เช่นการเปิดใช้ประโยชน์จากเสียงหัวเราะนับพันล้านครั้งทำให้ Firefox ขัดข้องระบบของฉัน ข้อผิดพลาดของ Firefox ที่มีประโยชน์ที่แนบมา: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html เช่นเดียวกันกับ Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• การเขียนสคริปต์ SVG XSS: แม้ว่าเบราว์เซอร์ส่วนใหญ่จะไม่เรียกใช้สคริปต์เมื่อฝัง SVG ด้วยimgดูเหมือนว่านี่ไม่ได้มาตรฐานตามที่กำหนดดังนั้น GitHub จึงอาจเล่นได้อย่างปลอดภัย

  เบราว์เซอร์จะรันหากคุณเปิด SVG โดยตรง (แต่ปรากฏว่า GitHub ไม่เคยแสดงภาพโดยตรงในgithub.comโดเมน) หรือเป็นแบบอินไลน์ (ซึ่งปัจจุบันถูกลบโดย GitHub) ดังนั้นกรณีเหล่านี้จึงไม่ควรกังวลด้านความปลอดภัย ลิงค์ที่เกี่ยวข้อง:

  • spec: http://www.w3.org/TR/SVG/script.html
  • ตัวอย่าง SVG เชิงโต้ตอบ: http://www.w3.org/TR/SVG/images/script/script01.svg

คำถามต่อไปนี้ถามเกี่ยวกับความเสี่ยงของ SVG โดยทั่วไป: /security/11384/exploits-or-other-security-risks-with-svg-upload

ฉันมีตัวอย่างการทำงานกับแท็ก img แต่ภาพของคุณจะไม่ปรากฏ ความแตกต่างที่ฉันเห็นคือประเภทเนื้อหา

ฉันตรวจสอบรูปภาพ github จากโพสต์ของคุณ (รูปภาพ google doc ไม่โหลดเลยเนื่องจากการเชื่อมต่อล้มเหลว) ภาพจาก GitHub ถูกส่งเป็นเนื้อหาประเภท: ข้อความ / ธรรมดาซึ่งจะไม่ได้รับการแสดงผลเป็นภาพโดยเบราว์เซอร์ของคุณ

ค่าประเภทเนื้อหาที่ถูกต้องสำหรับ svg คือ image / svg + xml ดังนั้นคุณต้องตรวจสอบให้แน่ใจว่าไฟล์ svg ตั้งค่าประเภท mime ที่ถูกต้อง แต่นั่นเป็นปัญหาของเซิร์ฟเวอร์

ลองใช้กับhttp://svg.tutorial.aptico.de/grafik_svg/dummy3.svgและอย่าลืมระบุความกว้างและความสูงในแท็ก

ใช้เว็บไซต์นี้: https://rawgit.comใช้ได้กับฉันเนื่องจากฉันไม่มีปัญหาสิทธิ์ใช้งานไฟล์ svg
โปรดทราบว่า RawGit ไม่ใช่บริการของ GitHub ดังที่ได้กล่าวไว้ในRawgit คำถามที่พบบ่อย :

RawGit ไม่เกี่ยวข้องกับ GitHub แต่อย่างใด โปรดอย่าติดต่อ GitHub เพื่อขอความช่วยเหลือเกี่ยวกับ RawGit

ป้อน URL ของ svg ที่คุณต้องการเช่น:

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

จากนั้นคุณจะได้รับเสียงร้อง URL ซึ่งสามารถใช้แสดง:

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

แบบนี้ใช้ได้กับฉันใน Github

![Imgae Caption](ImageAddressOnGitHub.svg)

หรือ

<img src="ImageAddressOnGitHub.svg">