เมื่อฉันพยายามเปลี่ยนการอ้างอิงที่เชื่อมโยงของไฟล์ JavaScript ท้องถิ่นเป็น GitHub เวอร์ชันดิบไฟล์ทดสอบของฉันจะหยุดทำงาน ข้อผิดพลาดคือ:

ปฏิเสธที่จะเรียกใช้สคริปต์จาก ... เนื่องจากประเภท MIME ( text/plain) ไม่สามารถใช้งานได้และการตรวจสอบประเภท MIME ที่เข้มงวดเปิดใช้งาน

มีวิธีปิดใช้งานลักษณะการทำงานนี้หรือมีบริการที่อนุญาตให้เชื่อมโยงไปยังไฟล์ดิบ GitHub หรือไม่

รหัสการทำงาน:

<script src="bootstrap-wysiwyg.js"></script>

รหัสที่ไม่ทำงาน:

<script src="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js"></script>

มีเป็นวิธีแก้ปัญหาที่ดีสำหรับตอนนี้โดยใช้jsdelivr.net

ขั้นตอน :

1. ค้นหาลิงก์ของคุณบน GitHub และคลิกเพื่อรุ่น "ดิบ"
2. คัดลอก URL
3. เปลี่ยนraw.githubusercontent.comเป็นcdn.jsdelivr.net
4. ใส่/gh/ก่อนชื่อผู้ใช้ของคุณ
5. ลบbranchชื่อ
6. (ไม่บังคับ) ใส่รุ่นที่คุณต้องการลิงค์ไปเป็น@version(หากคุณไม่ทำเช่นนี้คุณจะได้รับเวอร์ชั่นล่าสุด - ซึ่งอาจทำให้แคชในระยะยาว)

ตัวอย่าง :

http://raw.githubusercontent.com/<username>/<repo>/<branch>/path/to/file.js

ใช้ URL นี้เพื่อรับเวอร์ชันล่าสุด:

http://cdn.jsdelivr.net/gh/<username>/<repo>/path/to/file.js

ใช้ URL นี้เพื่อรับรุ่นที่เฉพาะเจาะจงหรือกระทำการแฮช:

http://cdn.jsdelivr.net/gh/<username>/<repo>@<version or hash>/path/to/file.js

สำหรับสภาพแวดล้อมการผลิตให้พิจารณากำหนดเป้าหมายแท็กเฉพาะหรือการกระทำแฮชมากกว่าที่สาขา การใช้ลิงค์ล่าสุดอาจส่งผลให้มีการแคชไฟล์ในระยะยาวทำให้ลิงค์ของคุณไม่ได้รับการอัพเดตเมื่อคุณส่งเวอร์ชั่นใหม่ การลิงก์ไปยังไฟล์โดย commit-hash หรือ tag ทำให้ลิงค์นั้นไม่ซ้ำกับเวอร์ชั่น

ทำไมถึงจำเป็น

ในปี 2013 GitHub เริ่มใช้X-Content-Type-Options: nosniffซึ่งแนะนำเบราว์เซอร์ที่ทันสมัยกว่าเพื่อบังคับใช้การตรวจสอบประเภท MIME อย่างเข้มงวด จากนั้นจะส่งคืนไฟล์ raw ในรูปแบบ MIME ที่ส่งคืนโดยเซิร์ฟเวอร์เพื่อป้องกันไม่ให้เบราว์เซอร์ใช้ไฟล์ตามที่ตั้งใจไว้ (หากเบราว์เซอร์ให้เกียรติการตั้งค่า)

สำหรับพื้นหลังในหัวข้อนี้โปรดอ้างอิงหัวข้อการสนทนานี้

สิ่งนี้ไม่สามารถทำได้อีกต่อไป GitHub ได้ปิดการใช้งาน hotlinking JavaScript อย่างชัดเจนและเบราว์เซอร์เวอร์ชันใหม่ที่เกี่ยวข้องกับการตั้งค่านั้น

หัวขึ้น: การสนับสนุนส่วนหัว nosniff ที่มาถึง Chrome และ Firefox

rawgithub.comเปลี่ยนเส้นทางไปที่rawgit.comดังนั้นตัวอย่างข้างต้นจะเป็น

http://rawgit.com/user/package/master/link.min.js

GitHub Pagesเป็นวิธีแก้ปัญหาอย่างเป็นทางการของ GitHub

raw.githubusercontentทำให้ไฟล์ทั้งหมดใช้text/plainประเภท MIME แม้ว่าไฟล์นั้นเป็นไฟล์ CSS หรือ JavaScript ดังนั้นhttps://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath›จะไม่เป็นประเภท MIME ที่ถูกต้อง แต่แทนที่จะเป็นไฟล์ธรรมดาและเชื่อมโยงมันผ่าน<link href="..."/>หรือ<script src="..."></script>ไม่ทำงาน CSS จะไม่ใช้งาน / JS จะไม่ทำงาน

GitHub Pagesโฮสต์ repo ของคุณใน URL พิเศษดังนั้นสิ่งที่คุณต้องทำคือเช็คอินไฟล์และกด โปรดทราบว่าในกรณีส่วนใหญ่หน้า GitHub ต้องการให้คุณยอมรับสาขาพิเศษ, gh-pages.

ในไซต์ใหม่ของคุณซึ่งโดยปกติhttps://‹user›.github.io/‹repo›แล้วทุกไฟล์ที่ส่งไปยังgh-pagesสาขา (การคอมมิทล่าสุด) จะปรากฏที่ URL นี้ ดังนั้นคุณสามารถลิงก์ไปยังไฟล์ js ของคุณผ่าน<script src="https://‹user›.github.io/‹repo›/file.js"></script>และนี่จะเป็นประเภท MIME ที่ถูกต้อง

คุณมีไฟล์บิลด์หรือไม่?

masterส่วนตัวแนะนำของฉันคือการทำงานแบบขนานสาขานี้ ในgh-pagesสาขาคุณสามารถแก้ไข.gitignoreไฟล์ของคุณเพื่อตรวจสอบไฟล์dist / build ทั้งหมดที่คุณต้องการสำหรับเว็บไซต์ของคุณ (เช่นหากคุณมีไฟล์ที่ย่อเล็กสุด / เรียบเรียง) ในขณะที่ทำให้พวกเขาถูกละเว้นในmasterสาขาของคุณ สิ่งนี้มีประโยชน์เพราะโดยทั่วไปคุณไม่ต้องการติดตามการเปลี่ยนแปลงในไฟล์บิลด์ใน repo ปกติของคุณ ทุกครั้งที่คุณต้องการที่จะปรับปรุงแฟ้มโฮสต์ของคุณเพียงแค่ผสานmasterเข้าgh-pages, สร้างกระทำแล้วผลักดัน

(protip: คุณสามารถผสานและสร้างใหม่ในการคอมมิทเดียวกันด้วยขั้นตอนเหล่านี้ :)

$ git checkout gh-pages
$ git merge --no-ff --no-commit master  # prepare the merge but don’t commit it (as if there were a merge conflict)
$ npm run build                         # (or whatever your build process is)
$ git add .                             # stage the newly built files
$ git merge --continue                  # commit the merge
$ git push origin gh-pages

คำตอบข้างต้นตอบคำถามอย่างชัดเจน แต่ฉันต้องการให้ทางเลือกอื่น - มุมมอง / แนวทางที่แตกต่างเพื่อแก้ไขปัญหาที่คล้ายกัน

คุณยังสามารถใช้ส่วนขยายเบราว์เซอร์เพื่อลบX-Content-Type-Optionsส่วนหัวการตอบกลับสำหรับraw.githubusercontent.comไฟล์ มีส่วนขยายเบราว์เซอร์สองสามตัวเพื่อแก้ไขส่วนหัวการตอบกลับ

1. ขอ: Chrome + Firefox
2. แก้ไขส่วนหัว: Firefox

หากคุณใช้ Requestly ฉันสามารถแนะนำวิธีแก้ไขปัญหาสองข้อ

โซลูชันที่ 1: ใช้กฎการปรับเปลี่ยนส่วนหัวและเอาหัวข้อการตอบสนอง

ขั้นตอน

1. ติดตั้ง Requestly จากhttp://www.requestly.in
2. ไปที่หน้ากฎ
3. คลิกที่ไอคอนเพิ่มเพื่อสร้างกฎ
4. เลือกปรับเปลี่ยนส่วนหัว
5. ให้ชื่อและคำอธิบาย
6. เลือกRemove-> Response->X-Content-Type-Options
7. ในช่อง Source ป้อนUrl-> Contains->raw.githubusercontent.com

โซลูชันที่ 2: ใช้แทนที่กฎโฮสต์

1. ติดตั้ง Requestly จากhttp://www.requestly.in
2. ไปที่หน้ากฎ
3. คลิกที่ไอคอนเพิ่มเพื่อสร้างกฎ
4. แทนที่raw.githubusercontent.comด้วยrawgit.com

ตรวจสอบภาพหน้าจอนี้เพื่อดูรายละเอียดเพิ่มเติม

วิธีทดสอบ

เราได้สร้าง JS Fiddle ง่าย ๆ เพื่อทดสอบว่าเราสามารถใช้ไฟล์ gitHub ดิบเป็นสคริปต์ในรหัสของเรา นี่คือซอที่ มีรหัสต่อไปนี้

<center id="msg"></center>

<script src="https://raw.githubusercontent.com/sachinjain024/practicebook/master/web-extensions-master/storage/background.js"></script>
<script>
try {
  if (typeof BG.Methods !== 'undefoned') {
    document.getElementById('msg').innerHTML = 'Script evaluated successfully!';
  }
} catch (e) {
  document.getElementById('msg').innerHTML = 'Problem evaluating script';
}
</script>

ถ้าคุณเห็นScript evaluated successfully!นั่นหมายความว่าคุณสามารถใช้ไฟล์ raw github ในรหัสของคุณมิฉะนั้นProblem evaluating scriptจะแสดงว่ามีปัญหาบางอย่างในขณะที่เรียกใช้สคริปต์จากแหล่ง raw github

ฉันยังเขียนบทความในบล็อก Requestlyเกี่ยวกับเรื่องนี้ โปรดอ้างอิงรายละเอียดเพิ่มเติม

หวังว่ามันจะช่วย !!

ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้เขียนRequestlyดังนั้นคุณสามารถตำหนิอะไรก็ได้ที่คุณไม่ชอบ

https://raw.githack.com/

พบว่าไซต์นี้จัดหา CDN สำหรับ

• ลบnosniffส่วนหัว http
• แก้ไขmime typeโดยชื่อ ext

และเว็บไซต์นี้:

https://rawgit.com/

หมายเหตุ: RawGit หมดอายุการใช้งานแล้ว

เพื่อทำให้สิ่งต่าง ๆ ชัดเจนและสั้น

//raw.githubusercontent.com -> //rawgit.com

โปรดทราบว่าสิ่งนี้ได้รับการจัดการโดยการพัฒนาโฮสติ้ง rawgit และไม่ใช่ cdn สำหรับการโฮสต์การผลิต

กรณีใช้งานของฉันคือโหลด ' bookmarklets ' จากบัญชี Bitbucket ซึ่งมีข้อ จำกัด เช่นเดียวกับ Github การทำงานรอบตัวฉันขึ้นมาคือ AJAX สำหรับสคริปต์และทำงานevalกับสตริงการตอบกลับด้านล่างตัวอย่างจะขึ้นอยู่กับวิธีการนั้น

<script>
    var sScriptURL ='<script-URL-here>'; 
    var oReq = new XMLHttpRequest(); 
    oReq.addEventListener("load", 
       function fLoad() {eval(this.responseText + '\r\n//# sourceURL=' + sScriptURL)}); 
    oReq.open("GET", sScriptURL); oReq.send(); false;
</script>

โปรดทราบว่าการต่อท้ายsourceURLความคิดเห็นเป็นการอนุญาตให้ debuging สคริปต์ภายในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์

เมื่ออัปโหลดไฟล์ไปยัง GitHub คุณสามารถใช้เป็นแหล่งข้อมูลภายนอกหรือโฮสต์ฟรี Troy Alford ได้อธิบายไว้ข้างต้นแล้ว แต่เพื่อให้ง่ายขึ้นให้ฉันบอกคุณบางขั้นตอนง่าย ๆ จากนั้นคุณสามารถใช้ไฟล์ดิบ github ในเว็บไซต์ของคุณ:

นี่คือลิงค์ไฟล์ของคุณ:

https://raw.githubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

ตอนนี้เพื่อดำเนินการคุณจะต้องลบhttps: //และจุด (.) ระหว่างrawและgithubusercontent

แบบนี้:

rawgithubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

ตอนนี้เมื่อคุณจะไปที่ลิงค์นี้คุณจะได้รับลิงค์ที่สามารถใช้โทรจาวาสคริปต์ของคุณ:

นี่คือลิงค์สุดท้าย:

https://rawgit.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

ในทำนองเดียวกันถ้าคุณโฮสต์ไฟล์ css คุณต้องทำตามที่กล่าวไว้ข้างต้น มันเป็นวิธีที่ง่ายที่สุดในการรับลิงค์ง่าย ๆ ในการโทรหาไฟล์ css หรือ javascript ภายนอกที่โฮสต์บน github

ฉันหวังว่านี้จะเป็นประโยชน์.

URL อ้างอิง: http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html

ฉันพบข้อผิดพลาดที่แสดงเนื่องจากความคิดเห็นที่จุดเริ่มต้นของไฟล์คุณสามารถแก้ปัญหานี้ได้โดยเพียงแค่สร้างไฟล์ของคุณเองโดยไม่ต้องแสดงความคิดเห็นและกดเพื่อคอมไพล์ก็แสดงให้เห็นว่าไม่มีข้อผิดพลาด

เพื่อเป็นการพิสูจน์คุณสามารถลองทั้งสองไฟล์ด้วยรหัสการแบ่งหน้าง่าย:

ไม่มีความคิดเห็น

ด้วยความคิดเห็น

ฉันมีปัญหาแบบเดียวกับคุณสิ่งที่ฉันทำคือเปลี่ยนเป็น

<script type="application/javascript" src="bootstrap-wysiwyg.js"></script>

มันใช้งานได้สำหรับฉัน

วิธีที่ง่ายที่สุด:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
เสิร์ฟโดย GitHub
และ

มาก

raw.github.comไม่ใช่การเข้าถึงไฟล์สินทรัพย์อย่างแท้จริง แต่เป็นมุมมองที่แสดงโดย Rails ดังนั้นการเข้าถึงraw.github.comจึงหนักกว่าที่จำเป็นมาก ฉันไม่รู้ว่าทำไมถึงraw.github.comมีการใช้งานเป็นมุมมองทางรถไฟ แทนที่จะแก้ไขปัญหาเส้นทางนี้ GitHub เพิ่มX-Content-Type-Options: nosniffส่วนหัว

การแก้ปัญหา:

• ใส่สคริปต์เพื่อ user.github.io/repo
• ใช้ CDN บุคคลที่สามเช่น rawgit.com

อีกทางหนึ่งถ้าสร้างมาร์กอัปเซิร์ฟเวอร์ของคุณคุณสามารถดึงและฉีดได้ ตัวอย่างเช่นใน JSTL คุณสามารถทำได้:

<script type="text/javascript">
    <c:import url="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js" />
</script>

พวกเขาไม่อนุญาตให้มีการเชื่อมโยงด้วยเหตุผลบางประการดังนั้นรูปแบบอาจไม่ดีหากคุณต้องการเป็นพลเมืองที่ดี ฉันขอแนะนำให้คุณแคชจาวาสคริปต์นั้นและทำการดึงข้อมูลซ้ำตามความเหมาะสม

ตัวอย่าง

เป็นต้นฉบับ

https://raw.githubusercontent.com/antelove19/qrcodejs/master/qrcode.min.js

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js