Chrome menolak untuk mengeksekusi file JavaScript ini

Di bagian atas halaman HTML saya, saya punya:

<script src="https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js"></script>

Ketika saya memuat halaman di browser saya (Google Chrome v 27.0.1453.116) dan mengaktifkan alat pengembang, ia mengatakan:

Menolak untuk menjalankan skrip dari ' https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js ' karena jenis MIME-nya ('teks / polos') tidak dapat dieksekusi, dan pengecekan tipe MIME ketat diaktifkan.

Memang, skrip tidak akan berjalan. Mengapa Chrome berpikir ini adalah file teks biasa? Jelas memiliki .jsekstensi file.

Karena saya menggunakan HTML5, saya menghilangkan typeatributnya, jadi saya pikir itu mungkin yang menyebabkan masalah. Jadi saya menambahkan type="text/javascript"ke <script>tag, dan mendapat hasil yang sama. Saya bahkan mencoba type="application/javascript"dan masih mendapat kesalahan yang sama.

Kemudian saya mencoba mengubahnya type="text/plain"hanya karena penasaran. Peramban tidak mengembalikan kesalahan, tapi tentu saja JavaScript juga tidak berjalan.

Akhirnya saya pikir periode dalam nama file mungkin membuang browser. Jadi dalam kode HTML saya, saya mengubah semua periode menjadi karakter URL escape %2E:

<script src="https://raw.github.com/cloudhead/less%2Ejs/master/dist/less-1%2E3%2E3.js"></script>

Ini masih tidak berhasil. Satu-satunya hal yang benar-benar berfungsi (yaitu browser tidak memberikan kesalahan dan JS berhasil berjalan) adalah jika saya mengunduh file, mengunggahnya ke direktori lokal, dan kemudian mengubah srcnilainya ke file lokal. Saya lebih suka tidak melakukan ini karena saya mencoba menghemat ruang di situs web saya sendiri.

Bagaimana cara saya membuat Chrome mengenali bahwa file yang ditautkan sebenarnya adalah tipe JavaScript?

Masalah yang Anda miliki adalah di luar kendali Anda karena ini adalah bagaimana hosting diatur di Github di jalan yang telah Anda sebutkan, Jenis ekstensi bukan hanya faktor ketika datang untuk mengeksekusi file karena web hosting dapat mengesampingkan bagaimana suatu browser membuat file.

Anda dapat memiliki rendering file .zip sebagai file .html jika host telah diatur untuk melakukannya, Anda dapat memeriksanya sendiri dengan menggunakan pembakar dan melihat respons header terhadap apa yang diminta .... jadi jika Anda meminta file JS tetapi respons tajuk mengembalikan nilai yang diharapkan yang berbeda maka browser akan menghormati tanggapan tajuk dan bukan apa yang diminta ...

Hosting github pada subdomain mentah kembali Content-Type text/plain; charset=utf-8sebagai tipe MIME yang berarti tidak akan berfungsi sebagai JS melainkan sebagai teks mentah, di bawah ini adalah contoh apa yang Anda perlukan server untuk kembali untuk membuat file, dan selanjutnya adalah kode yang dikembalikan oleh github.

Server yang mendukung tipe JS MIME akan terlihat seperti:

Accept-Ranges   bytes
Connection  Keep-Alive
Content-Encoding    gzip
Content-Length  31097
Content-Type    application/javascript
Vary    Accept-Encoding
Request Headersview source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Dan inilah yang https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.jsditanggapi sebagai tajuk sebagai (LIHAT RAW).

Accept-Ranges   bytes
Connection  Keep-Alive
Content-Disposition inline
Content-Encoding    gzip
Content-Length  41354
Content-Transfer-Encoding   binary
Content-Type    text/plain; charset=utf-8

Sunting 2018 Desember

RawGit sekarang berjemur karena penggunaan berbahaya, jadi mereka merekomendasikan untuk menggunakan salah satu layanan berikut:

• jsDelivr
• Halaman GitHub
• CodeSandbox
• unpkg

Pos asli

Rawgithub.com memungkinkan pengguna untuk mengambil versi "Raw" dari Git dan mengubahnya menjadi URL yang dapat digunakan dalam <script>tag. Ini cukup mudah digunakan, cukup hapus yang pertama .dari URL mentah. Sebagai contoh, ini:

https://raw.github.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

akan berubah menjadi ini

https://rawgithub.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

dan kemudian Anda memasukkannya ke dalam <script>tag dengan tipe yang sesuai. Sesederhana itu!

Mereka membatasi jumlah permintaan karena itu dimaksudkan untuk tujuan pengembangan saja, bukan produksi.

Sunting 2014

Seperti yang disebutkan Reinderien, rawgithub sekarang hanya rawgit, jadi tautan skrip baru akan seperti itu

https://rawgit.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

Ekstensi file tidak relevan, itu header Jenis-Konten yang penting, dan file itu disajikan dengan text/plaintipe konten (yang merupakan tujuan dari tampilan "mentah" Github).

Anda harus benar-benar mengunduh salinan file secara lokal ke situs Anda dan memasukkannya dari sana. Bahkan jika itu berhasil dari Github, karena Anda tidak memuat file JS secara tidak sinkron, menempatkan <script>tag itu di header halaman Anda membuat situs Anda bergantung pada ketersediaan Github.

Ini adalah fitur yang disengaja yang dirancang untuk mencegah serangan XSS tertentu .

Seperti yang dijelaskan Mike West , jangan gunakan raw.github.comsebagai CDN; gunakan GitHub Pages sebagai gantinya.

Juga, penyandian karakter tanpa pagu secara eksplisit tidak akan mengubah cara URL diperlakukan.

Seperti yang ditunjukkan oleh, masalahnya adalah bahwa hampir semua konten yang disajikan oleh raw.github.com dikirim sebagai file teks - dengan cara itu konten ditampilkan dalam teks biasa di browser Anda tanpa ada aplikasi lain atau masalah yang menghalangi. Kalau tidak, Anda akan masuk ke situasi di mana mencoba untuk melihat file .js dapat menyebabkan browser mencoba untuk menjalankannya daripada menunjukkan kepada Anda.

Lebih dari itu, baik github maupun pages.github tidak mencoba menjadi CDN. Anda harus benar-benar:

1. Host file sendiri, tidak terlalu besar.
2. Gunakan CDN khusus untuk ini dan file statis lainnya di situs Anda.
3. Gunakan sesuatu seperti cdnjs.com yang memiliki berbagai versi lessjs tersedia .