[Error] CSP(Content Security Policy) 문제 해결

CSP?

• Content Security Policy (CSP)는 웹사이트의 보안을 강화하기 위한 보안 표준입니다.
• CSP를 통해 웹사이트의 콘텐츠가 불필요한 위험에 노출되지 않도록 관리할 수 있습니다.
• 특히 XSS(Cross-Site Scripting) 공격과 같은 웹 보안 위협으로부터 보호할 수 있습니다.

문제점

문제가 발생하는 이유는 Content Security Policy (CSP) 설정이 http://localhost:5000으로의 요청을 허용하지 않기 때문입니다.
connect-src 디렉티브가 CSP 설정에서 명시적으로 설정되지 않아서, 기본적으로 default-src가 적용되고 있습니다.

해결방안

HTML 문서의 태그에서 CSP(Content Security Policy) 설정을 통해 http://localhost:5000에 대한 접근을 허용하도록 수정하여 문제를 해결.

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net http://localhost:5000; script-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net https://unpkg.com https://accounts.google.com; style-src 'self' 'unsafe-inline' https://accounts.google.com; img-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; frame-src 'self' https://accounts.google.com;">
  <meta http-equiv="X-Content-Security-Policy" content="default-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net http://localhost:5000; script-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net https://unpkg.com https://accounts.google.com; style-src 'self' 'unsafe-inline' https://accounts.google.com; img-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; frame-src 'self' https://accounts.google.com;">

요약

• CSP 설정 추가: default-src, script-src, style-src, img-src, frame-src 등에서 http://localhost:5000을 명시하여 CSP가 로컬 서버와의 연결을 허용하도록 했습니다.
• HTML 문서 수정:

  <meta http-equiv="Content-Security-Policy">와 <meta http-equiv="X-Content-Security-Policy">

태그를 수정하여 필요한 출처를 추가했습니다.