นโยบายความปลอดภัยของเนื้อหา: การตั้งค่าของเพจบล็อกการโหลดทรัพยากร

ฉันใช้CAPTCHAในการโหลดหน้าเว็บ แต่ถูกบล็อกเนื่องจากเหตุผลด้านความปลอดภัยบางประการ

ฉันกำลังประสบปัญหานี้:

    นโยบายความปลอดภัยของเนื้อหา: การตั้งค่าของเพจบล็อกการโหลด
    ของทรัพยากรที่
    http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit
    ("script-src http://test.com:8080 'unsafe-inline' 'ไม่ปลอดภัย-eval'")

ฉันใช้ JavaScript และเมตาแท็กต่อไปนี้:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<script src="http://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>

คุณบอกว่าคุณสามารถโหลดสคริปต์ได้จากไซต์ของคุณเองเท่านั้น (ด้วยตนเอง) จากนั้นคุณได้พยายามโหลดสคริปต์จากไซต์อื่น ( www.google.com ) และเนื่องจากคุณได้ จำกัด สิ่งนี้คุณจึงไม่สามารถทำได้ นั่นคือประเด็นทั้งหมดของนโยบายความปลอดภัยของเนื้อหา (CSP)

คุณสามารถเปลี่ยนบรรทัดแรกเป็น:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">

หรืออาจเป็นการดีที่จะลบบรรทัดนั้นออกทั้งหมดจนกว่าคุณจะพบข้อมูลเพิ่มเติมเกี่ยวกับ CSP CSP ปัจจุบันของคุณจะสวยอยู่แล้วหละหลวม (ให้unsafe-inline, unsafe-evalและdefault-srcของ*) ดังนั้นจึงอาจจะไม่เพิ่มมูลค่ามากเกินไปที่จะซื่อสัตย์

ด้วยโครงการASP.NET Core Angularของฉันที่ทำงานใน Visual Studio 2019 บางครั้งฉันได้รับข้อความแสดงข้อผิดพลาดนี้ในคอนโซล Firefox:

นโยบายความปลอดภัยของเนื้อหา: การตั้งค่าของเพจบล็อกการโหลดทรัพยากรแบบอินไลน์ (“ default-src”)

ใน Chrome ข้อความแสดงข้อผิดพลาดแทน:

ไม่สามารถโหลดทรัพยากร: เซิร์ฟเวอร์ตอบสนองด้วยสถานะ 404 ()

ในกรณีของฉันไม่มีส่วนเกี่ยวข้องกับนโยบายการรักษาความปลอดภัยเนื้อหาของฉัน แต่เป็นเพียงผลของข้อผิดพลาด TypeScript ในส่วนของฉัน

ตรวจสอบหน้าต่างเอาต์พุต IDE ของคุณเพื่อหาข้อผิดพลาด TypeScript เช่น:

> ERROR in src/app/shared/models/person.model.ts(8,20): error TS2304: Cannot find name 'bool'.
>
> i ｢wdm｣: Failed to compile.

_{หมายเหตุ: เนื่องจากคำถามนี้เป็นผลลัพธ์แรกใน Google สำหรับข้อความแสดงข้อผิดพลาดนี้}

ฉันมีประเภทข้อผิดพลาดที่คล้ายกัน ขั้นแรกฉันพยายามเพิ่มเมตาแท็กในโค้ด แต่ไม่ได้ผล

ฉันพบว่าบนเว็บเซิร์ฟเวอร์ nginx คุณอาจมีการตั้งค่าความปลอดภัยที่อาจบล็อกโค้ดภายนอกเพื่อเรียกใช้:

# Security directives
server_tokens off;
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'  https://ajax.googleapis.com  https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://assets.zendesk.com; font-src 'self' https://fonts.gstatic.com  https://themes.googleusercontent.com; frame-src https://player.vimeo.com https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";

ตรวจสอบนโยบายเนื้อหา - ความปลอดภัย คุณอาจต้องเพิ่มการอ้างอิงแหล่งที่มา

ฉันจัดการเพื่ออนุญาตไซต์ที่จำเป็นทั้งหมดของฉันด้วยส่วนหัวนี้:

header("Content-Security-Policy: default-src *; style-src 'self' 'unsafe-inline'; font-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' stackexchange.com");                    

ฉันทำได้โดยการอัปเกรดทั้งเวอร์ชันของ Angular ที่ฉันใช้ (จาก v8 -> v9) และเวอร์ชันของ TypeScript (จาก 3.5.3 -> ล่าสุด)

คุณสามารถปิดใช้งานได้ในเบราว์เซอร์ของคุณ

Firefox

พิมพ์about:configในแถบที่อยู่ของ Firefox และพบและตั้งค่าให้security.csp.enablefalse

โครเมียม

คุณสามารถติดตั้งส่วนขยายที่เรียกว่าDisable Content-Security-Policyปิดใช้งาน CSP