Refused to connect to fetch~~supabse because it violates the following Content Security Policy directive : "default-src 'self' 'unsafe-inline' // 새롭게 알게된 CSP 보안정책
상황)
카카오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