จะหลีกเลี่ยงข้อผิดพลาดนี้ได้อย่างไรเมื่อฉันพยายามใช้ปุ่มลงชื่อเข้าใช้ด้วย Facebook

ฉันเพิ่มปุ่มลงชื่อเข้าใช้ Facebook และใน https://localhost:3000/ ทุกอย่างทำงานได้ดี แต่เมื่อฉันปรับใช้แอปของฉัน มันแสดงข้อผิดพลาดต่อไปนี้ในคอนโซล:

ปฏิเสธที่จะโหลดสคริปต์ 'https://connect.facebook.net/en_US/sdk.js' เนื่องจากละเมิดคำสั่งนโยบายความปลอดภัยของเนื้อหาต่อไปนี้: script-src-elem 'self' 'unsafe-inline' https://apis.google.com/

ฉันพยายามเพิ่มบรรทัดนี้ลงใน manifest.json: "content_security_policy": "script-src 'self' 'unsafe-inline' https://connect.facebook.net 'unsafe-eval'; object-src 'self'" แต่ก็ไม่ได้ช่วยอะไร ใครช่วยอธิบายฉันหน่อยได้ไหมว่าปัญหาคืออะไร


reactjs javascript facebook content-security-policy manifest
person EagleCanFly    schedule 28.01.2021    source แหล่งที่มา

คำตอบ (1)


arrow_upward
0
arrow_downward

เพราะมันละเมิดคำสั่งนโยบายความปลอดภัยของเนื้อหาต่อไปนี้: script-src-elem 'self' 'unsafe-inline'

ข้อความการละเมิดนี้แจ้งว่าคุณใช้คำสั่ง script-src-elem ใน CSP แต่คุณเพิ่มแหล่งที่มา https://connect.facebook.net ลงในคำสั่ง script-src
เบราว์เซอร์ Chrome จะติดตาม script-src-elem หากมีอยู่ และ script-src จะถูกใช้เป็นทางเลือกหากละเว้น script-src-elem เท่านั้น

คุณต้องเพิ่ม https://connect.facebook.net ลงในทั้ง script-src-elem และ script-src

person granty    schedule 28.01.2021
comment
จริงๆ แล้วปัญหานี้เกิดขึ้นที่ส่วนหลัง คำสั่งนี้ใช้งานไม่ได้เนื่องจากการตั้งค่าส่วนหลัง และดูเหมือนว่าฉันไม่สามารถแทนที่การตั้งค่าเหล่านั้นบนไคลเอนต์ได้ ขอบคุณสำหรับคำตอบ การตอบกลับแบ็กเอนด์มีส่วนหัวต่อไปนี้: 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
ใช่ คุณไม่สามารถแทนที่ CSP ของไคลเอ็นต์ที่เผยแพร่จากส่วนหลังได้ (ทั้งผ่านเมตาและผ่านส่วนหัว) บนไคลเอนต์ คุณสามารถเพิ่ม CSP ที่สองได้ผ่านทางเมตาแท็กเท่านั้น แต่นั่นทำให้ CSP สรุปมีข้อจำกัดมากขึ้น - person granty; 29.01.2021