Bagaimana cara menghindari kesalahan ini ketika saya mencoba menerapkan tombol masuk dengan facebook?

Saya menambahkan tombol masuk Facebook dan di https://localhost:3000/ semuanya berfungsi dengan baik tetapi ketika saya menerapkan aplikasi saya, muncul kesalahan berikut di konsol:

Menolak memuat skrip 'https://connect.facebook.net/en_US/sdk.js' karena melanggar arahan Kebijakan Keamanan Konten berikut: script-src-elem 'self' 'unsafe-inline' https://apis.google.com/ .

Saya mencoba menambahkan baris ini ke manifest.json saya: "content_security_policy": "script-src 'self' 'unsafe-inline' https://connect.facebook.net 'unsafe-eval'; object-src 'self'" Tapi tidak membantu. Bisakah seseorang menjelaskan kepada saya apa masalahnya?


reactjs javascript facebook content-security-policy manifest
person EagleCanFly    schedule 28.01.2021    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

karena melanggar arahan Kebijakan Keamanan Konten berikut: script-src-elem 'self' 'unsafe-inline'

Pesan pelanggaran ini mengatakan bahwa Anda menggunakan direktif script-src-elem di CSP. Namun Anda menambahkan sumber https://connect.facebook.net ke dalam arahan script-src.
Browser Chrome mengikuti script-src-elem jika ada, dan script-src digunakan sebagai cadangan hanya jika script-src-elem dihilangkan.

Anda harus menambahkan https://connect.facebook.net ke dalam script-src-elem dan script-src.

person granty    schedule 28.01.2021
comment
masalah ini sebenarnya ada di sisi belakang. Arahan ini tidak berfungsi karena pengaturan back end dan sepertinya saya tidak dapat menimpanya di klien. Terima kasih atas jawabannya. Respons backend adalah dengan header berikut: content-security-policy: script-src-elem 'self' 'unsafe-inline' https://apis.google.com/ style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/ https://cdnjs.cloudflare.com/ajax/ - person EagleCanFly; 29.01.2021
comment
Ya, Anda tidak dapat mengganti klien CSP yang diterbitkan dari back-end (baik melalui meta dan melalui header). Di klien, Anda hanya dapat menambahkan CSP kedua melalui tag meta, tetapi hal itu membuat ringkasan CSP lebih ketat. - person granty; 29.01.2021