Resource diblokir karena ketidakcocokan jenis MIME (X-Content-Type-Options: nosniff)

90

Saya mengembangkan halaman web menggunakan JavaScript dan HTML, semuanya bekerja dengan baik ketika saya menerima daftar kesalahan ini dari halaman HTML saya:

The resource from “https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Kesalahan ini muncul setelah pembaruan browser otomatis (Mozilla Firefox), mungkin ada sesuatu yang telah diubah dalam pengaturan. Apakah Anda tahu cara untuk mengatasi masalah ini?

javascript  mime 
— Sim81
sumber
10
Jangan memuat file dari GitHub. Sebagai gantinya, gunakan CDN.
— SLaks

Jawaban:

72

Periksa apakah jalur file sudah benar dan file tersebut ada - dalam kasus saya itulah masalahnya - saat saya memperbaikinya, kesalahan tersebut menghilang

— dav
sumber
Saya juga menghadapi masalah yang sama dan file juga tidak ada di direktori pub. Apa yang harus saya lakukan? Ini adalah file tema khusus.
— saiid
@SaiidatRLTSquare jika file tidak ada sebaiknya cari dari suatu tempat dan letakkan disana - atau jika file itu tidak penting - hapus saja baris yang memuatnya (atau buat file kosong) agar tidak memberikan error
— dav
Menggunakan Penumpang dengan Node membuang jalur build saya, memperbarui jalur memperbaikinya. Terima kasih!
— Aaron Belchamber
28

Ini dapat diperbaiki dengan mengubah URL Anda, contoh buruk:

https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8

Contoh yang baik:

https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8

rawgit.com adalah layanan proxy caching untuk github. Anda juga dapat pergi ke sana dan secara interaktif mendapatkan URL yang sesuai untuk URL raw.githubusercontent.com asli Anda . Lihat FAQ -nya

— Steven Penny
sumber
3
Di addess raw.githubusercontent.comdiganti dengan cdn.rawgit.comyang akan merespon dengan tipe mime yang benar.
— Axel Guilmin
menyelamatkan hidupku. Terima kasih!!
— Megan Byers
rawgit dimatikan. Anda dapat menggunakan jsdeliver seperti yang dijelaskan dalam jawaban berikut - stackoverflow.com/a/64456518/9640177
— mayank1513
14

Kami mulai menghadapi kesalahan ini dalam produksi setelah tim pengembang kami mengubah konfigurasi server web dengan menambahkan X-Content-Type-Options: nosniff. Sekarang, karena ini, browser terpaksa menafsirkan sumber daya seperti yang disebutkan dalam content-typeparameter header respons.

Sekarang, dari awal, server aplikasi kami secara eksplisit mengatur tipe konten dari file js sebagai text/plain. Karena, X-Content-Type-Options: nosnifftidak disetel di server web, browser secara otomatis menafsirkan file js sebagai file JavaScript meskipun tipe konten disebutkan sebagai teks / biasa. Ini disebut sebagai MIME-sniffing. Sekarang, setelah menyetel X-Content-Type-Options: nosniff, browser dipaksa untuk tidak melakukan MIME-sniffing dan mengambil jenis konten seperti yang disebutkan di header respon. Karena ini, itu menafsirkan file js sebagai file teks biasa dan menolak untuk mengeksekusinya atau memblokirnya. Hal yang sama ditampilkan dalam kesalahan Anda.

Solusi: adalah membuat server Anda menetapkan content-typefile JS sebagai

application/javascript;charset=utf-8

Dengan cara ini, ini akan memuat semua file JS secara normal dan masalah akan teratasi.

— Manish Bansal
sumber
Di mana saya perlu mengatur jenis konten server, maksud saya file mana yang perlu saya simpan, saya menggunakan server tomcat 8.5
— Bhaskara Arani
Itu semua tergantung pada arsitektur aplikasi. Dalam kasus kami, itu adalah aplikasi monolit berbasis servlet tua biasa. Oleh karena itu, itu sedang diatur di sana dalam metode layanan.
— Manish Bansal
Bagaimana dengan mengubah HTML?
— Aaron Franke
Maaf. Aku tidak mengerti kamu. Di sini, tidak ada html. Kami memiliki aplikasi berbasis servlet. Perubahan apa yang Anda sarankan pada html?
— Manish Bansal
12

periksa jalur Anda, kesalahan ini akan datang jika file tidak ada di jalur yang diberikan.

— Priyanka Acharya
sumber
6

Apakah Anda menggunakan ekspres?

Periksa jalur Anda (perhatikan " /" setelah / publik /):

app.use(express.static(__dirname + "/public/"));

// note: Anda tidak memerlukan "/" sebelum "css" karena sudah termasuk di atas:

rel="stylesheet" href="css/style.css

Semoga ini membantu

— JPaulino
sumber
5

Untuk Wordpress

Dalam kasus saya, saya baru saja melewatkan garis miring "/" setelah get_template_directory_uri () sehingga jalur yang dihasilkan / dihasilkan salah:

Kode saya salah:

wp_enqueue_script( 'retina-js', get_template_directory_uri().'js/retina.min.js' );

Kode Koreksi Saya:

wp_enqueue_script( 'retina-js', get_template_directory_uri().'/js/retina.min.js' );
— Sabir Hussain
sumber
3

Ini mungkin karena browser tidak dapat mengakses file. Saya tersandung dengan jenis kesalahan ini saat membuat aplikasi dengan node.js. Anda dapat mencoba untuk meminta file skrip secara langsung (menyalin dan menempelkan url) dan melihat apakah Anda dapat mengambilnya. Anda bisa melihat apa masalah sebenarnya. Bisa jadi karena izin folder tempat file tersebut berada, atau browser tidak dapat menemukannya karena jalur yang salah. Di node.js, setelah menentukan rute ke file, semuanya berfungsi.

— Vadi
sumber
Menurut halaman MS ini , tampaknya ini adalah masalah tipe MIME. Tapi bagaimana cara menentukan MIMEtipe di Node.js? (Seseorang tidak harus menentukan jalur lengkap ke semua file, tetapi hanya ke direktori aset, bukan?)
— not2qubit
3

Ini mungkin jalan yang salah. Pastikan dalam file aplikasi utama Anda memiliki:

app.use(express.static(path.join(__dirname,"public")));

Contoh tautan ke css Anda sebagai:

<link href="/css/clean-blog.min.css" rel="stylesheet">

serupa untuk tautan ke file js:

<script src="/js/clean-blog.min.js"></script>
— Mwongera808
sumber
2

Saya telah memecahkan masalah ini dengan mengubah charset di js-files dari UTF-8 tanpa BOM ke UTF-8 sederhana di Notepad ++

— Sergey
sumber
1

Saya mengalami kesalahan ini ketika saya menggunakan penyimpanan azure sebagai situs web statis, file js yang disalin memiliki tipe konten seperti text/plain; charset=utf-8dan saya mengubah tipe konten menjadiapplication/javascript

Ini mulai bekerja.

— Karthikeyan VK
sumber
0

Lihat protokol HTTPS dan HTTP

Kadang-kadang jika Anda menggunakan protokol campuran [ini kebanyakan terjadi dengan panggilan balik JSONP] Anda bisa berakhir di ERROR ini.

Pastikan halaman web dan halaman sumber memiliki protokol HTTP yang sama.

— Clain Dsilva
sumber
0

Saya juga menghadapi masalah yang sama di server django. Jadi saya mengubah DEBUG = True di file settings.py itu berfungsi

— sathish kumar
sumber
0

Itu terjadi pada saya karena tag salah. Secara tidak sengaja saya menambahkan file js di linktag.

Contoh: (The Wrong One)

<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.js">

Ini diselesaikan dengan menggunakan tag yang benar untuk javascript. Contoh:

<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
— smartrahat
sumber
0

https://cdn.rawgit.com dimatikan. Dengan demikian, salah satu opsi alternatif dapat digunakan. JSDeliver adalah cdn gratis yang dapat digunakan.

// muat rilis, komit, atau cabang GitHub apa pun

// note: kami merekomendasikan penggunaan npm untuk proyek yang mendukungnya

https://cdn.jsdelivr.net/gh/user/repo@version/file

// muat jQuery v3.2.1

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

// gunakan rentang versi, bukan versi tertentu

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// hilangkan versi sepenuhnya untuk mendapatkan yang terbaru

// Anda TIDAK boleh menggunakan ini dalam produksi

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// tambahkan ".min" ke file JS / CSS mana pun untuk mendapatkan versi yang diperkecil

// jika tidak ada, kami akan membuatnya untuk Anda

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// tambahkan / di akhir untuk mendapatkan daftar direktori

https://cdn.jsdelivr.net/gh/jquery/jquery/

ref - https://www.jsdelivr.com/?docs=gh

— mayank1513
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.