배포 2차

배포 한 후 첫 에러

3708.63815dd….js:2 Refused to connect to 
'wss://ws-us3.pusher.com/app/7d55ac9…?protocol=7&client=js&version=7.0.6&flash=false' 
because it violates the following Content Security Policy 
directive: "connect-src 'self' https://테스트.supabase.co 
https://apis.data.go.kr".

https://developer.mozilla.org/ko/docs/Web/HTTP/CSP

Content Security Policy (CSP) 규칙에 의해 특정 웹소켓 연결과 HTTP 요청이 차단되었기 때문에 발생

이라는데 이게 뭔소리람

 

Content Security Policy (CSP)

콘텐츠 보안 정책 이고 공격을 탐지하고 완화 하는데 도움 준다고 함

 

WebSocket

클라이언트와 서버(브라우저와 서버)를 연결하고 실시간으로 통신

 

HTTP 요청 https://developer.mozilla.org/ko/docs/Web/HTTP/Messages

HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식

 

next.config.js 파일 수정

 {
    key: 'Content-Security-Policy',
    value: "connect-src 'self' https://테스트.supabase.co https://apis.data.go.kr https://sockjs-us3.pusher.com wss://ws-us3.pusher.com",
},

정책 위반 했다고 나오는 주소 다 추가 함

 

layout.tsx 파일 수정

 <meta
    http-equiv="Content-Security-Policy"
    content="connect-src 'self' https://테스트.supabase.co https://apis.data.go.kr https://sockjs-us3.pusher.com wss://ws-us3.pusher.com;"
  />

connect-src 사용 한 이유는 외부 Api를 사용 했기 때문

 

배포 후 우선 에러는 안남