상황)
카카오map이 연결된 브랜치와 supabase가 연결된 브랜치를 합치는 작업 도중 에러 발생
에러)
버튼을 클릭하여, 데이터 전송하는 함수를 실행시키니
위와 같은 에러가 발생했다
Refused to connect to fetch~~supabse
because it violates the following Content Security Policy directive : "default-src 'self' 'unsafe-inline' "~~kakao".
Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
에러의 원인을 찾고보니 더욱 명백히 보이는 에러메시지
(에러메세지 넌 왜이렇게 친절하고 똑똑하니 바보같은 내가 문제였겠지 ㅠ.ㅠ)
자, 요 에러메세지를 하나씩 뜯어보면
Refused to connect to fetch~~supabse
=> supabase한테 넌 refuse당했어 (나가리 당했어)
왜??
because it violates the following Content Security Policy directive : "default-src 'self' 'unsafe-inline' "~~kakao".
Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
=> 왜냐하면 저 카카오 머시기 default-src 'self' 'unsafe-inline'은 명백하게
index.html에 보면 meta
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; script-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; img-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net;"
/>
.....
Content-Security-Policy가 default-src 'self'로 설정이 되어있음
그래서, Content-Security-Policy가 뭔디요
CSP: connect-src
The HTTP Content-Security-Policy (CSP) connect-src directive restricts the URLs which can be loaded using script interfaces. The APIs that are restricted are:
>> CSP는 URL들에 관한 제한인데, (어떤 URL? script 인터페이스를 사용해서 loaded가 될 수 있는 URL !!)
API는 예를 들어 아래와 같은 것들이 있음
--> 우리 프로젝트는 저 fecth 부분이었겠지!
그렇게 MDN 문서를 읽다가, 아래와 같은 문구를 발견했다
connect-src 'self'는 웹소켓 계획으로 사용할 수 없다고?!
이슈를 클릭해서 타고가보니
mikewest 아쟈찌가 아래와 같이 말을 해주었다.
나의 비루한 영어로 해석해서 정리한 아쟈찌 답변(해석본)
connect-src 'self'로 CSP를 선언해놓으면 웹 소켓이 동일한 origin이 아니므로 동일한 호스트/포트로 다시 돌아갈 수가 없어용한 가지 옵션은 spec에 대한 note를 더해서 이것이 의도한 행동이라는 것을 명백하게 해주거나
다른 방법은 connect-src 'self'에 대한 예외를 만들어 허락을 시켜주라는 것(똑같은 host/post에)
결론
: CSP로는 왔다갔다하는 웹소켓 방식을 쓸 수 없다?
안됐던 이유
: supabse는 "default-src 'self' 'unsafe-inline' 방식을 거부하고 있기 때무니양!!!! (에러메세지 참고)
따라서, index.html에서 저 소통방식(?)을 없애주니 (어차피 통신은 Map에서 useEffect를 통해 카카오api서버에서 데이터를 받아오고 있었기 때문에 에러 x) 해결이 되었던 것
이건 CSP에 대해서 여러 질문을 했던 스텍오버플로우 내용인데, 나중에 필요할까봐 저장 ㅇㅅㅇ
https://stackoverflow.com/questions/30280370/how-does-content-security-policy-csp-work
How does Content Security Policy (CSP) work?
I'm getting a bunch of errors in the developer console: Refused to evaluate a string Refused to execute inline script because it violates the following Content Security Policy directive Refused to...
stackoverflow.com
참고자료)
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src
CSP: connect-src - HTTP | MDN
The HTTP Content-Security-Policy (CSP) connect-src directive restricts the URLs which can be loaded using script interfaces. The APIs that are restricted are:
developer.mozilla.org
https://github.com/w3c/webappsec-csp/issues/7
CSP: connect-src 'self' and websockets · Issue #7 · w3c/webappsec-csp
From @klings on September 28, 2015 19:25 Declaring a CSP with connect-src ‘self’ will not allow websockets back to the same host/port, since they're not same origin. This might come as a surpri...
github.com
'🤪 뜨거운 맛 오류 일기' 카테고리의 다른 글
| Export encountered errors on following paths / next.js 프로젝트 빌드 과정에서 계속 에러를 내뿜던 현상 (0) | 2023.02.01 |
|---|---|
| 브랜치에 push할때 git ignore를 사용해서 필요없는 파일들을 빼내줘야 했구나 (0) | 2023.01.26 |
| Routes 임포트 빨간줄 에러! (0) | 2023.01.20 |
| 터미널로만 깃헙 작업하기중 not a valid object name: 'master' 만나쪙 (0) | 2023.01.15 |
| [파이어베이스] 징챠 너 그러케 할거닁?! / 리액트네이티브로 firebase 연결하면서 onSnapshot으로 todoList 불러오는데 계속 빈배열 뜰때 (0) | 2023.01.02 |
댓글