Sweetalert: Kompatibilitas Kebijakan Keamanan Konten

Dibuat pada 11 Okt 2018 · 8Komentar · Sumber: t4t5/sweetalert

Dalam proyek saya, saya telah memberikan tag meta berikut (seperti yang ditunjukkan pada tangkapan layar yang diikuti):

<meta http-equiv="Content-Security-Policy" content="default-src http:">

Ketika saya memuat halaman saya mendapatkan kesalahan berikut di konsol saya:

Adakah yang pernah menghadapi masalah ini sebelumnya?

Juga BTW nama file js saya adalah sweetalert.min.js tetapi konten file berisi js yang tidak diminifikasi!

Sumber

adhip94

Komentar yang paling membantu

Solusinya adalah menambahkan hash ke header Content-Security-Policy .

Sesuatu seperti

style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-wTr/bct+DGhJCU0mVZOm9Z1v99oBZrIu4VCMYQJWdfI=';

Tidak ideal tetapi lebih baik daripada unsafe-inline . Masalahnya adalah jika file berubah, hash tidak akan cocok lagi dan browser akan menolaknya.

Situasi yang ideal adalah mengekstrak css ke dalam filenya sendiri dan menyimpannya di CDN. Dengan begitu kita bisa membuat daftar putih file tersebut.

yarrgh pada 8 Jul 2019

👍3

Semua 8 komentar

Anda perlu memperbarui nilai Content-Security-Policy untuk mengakomodasi direktif style-src yang harus berisi 'unsafe-inline' (hati-hati mengutip) untuk mengeksekusi gaya inline yang disuntikkan.

maksbd19 pada 13 Okt 2018

👎1

Jelas tidak ideal untuk memaksa pengembang menggunakan kebijakan unsafe-inline untuk CSS. Kita mungkin harus menemukan cara yang lebih baik untuk menangani ini.

t4t5 pada 27 Okt 2018

Salah satu caranya adalah dengan tidak mengimpor file css di dalam kode Anda dan membuatnya tersedia sebagai file terpisah yang dapat diimpor dalam kode pengembang. sesuatu seperti
import 'sweetalert/sweetalert.css
Dengan cara ini, pengembang bertanggung jawab untuk memastikannya tidak melanggar CSP

kikoanis pada 15 Des 2018

👎2

Itu (hampir) tidak ada hubungannya dengan di mana file CSS berada (selama CSS berada di domain yang sama). Sweetalert _injects_ inline CSS , yang tidak akan diizinkan oleh CSP mana pun kecuali ada nilai nonce/hash. Itu membuatku kesakitan pagi ini; Saya mungkin harus melepasnya dari proyek saya, yang memalukan, karena saya sangat menyukainya.

kvn1234 pada 14 Feb 2019

Apakah ada pembaruan tentang ini? Saya mengalami masalah yang sama; hanya ingin tahu apa cara terbaik untuk menyiasatinya?

sleepingMantis pada 1 Mei 2019

Solusinya adalah menambahkan hash ke header Content-Security-Policy .

Sesuatu seperti

style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-wTr/bct+DGhJCU0mVZOm9Z1v99oBZrIu4VCMYQJWdfI=';

Tidak ideal tetapi lebih baik daripada unsafe-inline . Masalahnya adalah jika file berubah, hash tidak akan cocok lagi dan browser akan menolaknya.

Situasi yang ideal adalah mengekstrak css ke dalam filenya sendiri dan menyimpannya di CDN. Dengan begitu kita bisa membuat daftar putih file tersebut.

yarrgh pada 8 Jul 2019

👍3

Itu (hampir) tidak ada hubungannya dengan di mana file CSS berada (selama CSS berada di domain yang sama). Sweetalert _injects_ inline CSS , yang tidak akan diizinkan oleh CSP mana pun kecuali ada nilai nonce/hash. Itu membuatku kesakitan pagi ini; Saya mungkin harus melepasnya dari proyek saya, yang memalukan, karena saya sangat menyukainya.

sama disini.

rbcabreraUPM pada 15 Okt 2019

Saya bisa mendapatkan dua hash gaya sebaris dari sweetalert.min.js di Chrome. Saat ditambahkan ke header CSP, Chrome tidak mengeluh lagi.
Tetapi Firefox dan Safari masih mengeluh, dan saya tidak dapat menemukan hash yang tepat. Browser ini tidak memberikan petunjuk apa pun.
Firefox: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”)
Safari: Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear in the style-src directive of the Content Security Policy.