Refused to load the script ‘https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js’

다음 카카오 스크립트 오류의 해결방법에 관한 글입니다.

증상

브라우저의 개발자모드 콘솔창에 다음과 같은 오류메세지가 출력됨

Refused to load the script ‘https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-inline’ 기존 허용 도메인들 “. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.

보통 카카오 연동 로그인을 사용하는 경우 다음과 같이 자바스크립트를 임포트할 것이다.
<script src=”//developers.kakao.com/sdk/js/kakao.min.js”>

원인

웹 브라우저에서 //developers.kakao.com/sdk/js/kakao.min.js 주소를 열어보면 CDN의 주소인 https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js 로 열리는 경우가 있다. 오잉? 도메인이 kakao.com에서 kakaocdn.net으로 바뀌네?!

해결방법

보통 써드파티(외부) 스크립트를 임포트 하는 경우 화면쪽 메타테그나 컨트롤러쪽의 응답헤더에 다음과 같은 형식으로 콘텐츠 보안 정책(CSP:Content-Security-Policy)을 설정하여 XSS(크로스사이트스크립팅)공격을 막는다.
카카오 도메인을 가진 스크립트를 허용하려면 기존에 다음과 같이 설정이 되어 있을 것이다.
Content-Security-Policy: default-src ‘self’ *.kakao.com

이 부분에 카카오 CDN의 주소인 *.kakaocdn.net를 아래와 같이 추가하면 더이상 해당 경고메세지를 보지 않아도 된다.
Content-Security-Policy: default-src ‘self’ *.kakao.com *.kakaocdn.net

참고사이트

웹개발을 하다보면 CSP에 대한 이해는 필수이다. 다음 페이지들을 한번 읽어보길 추천한다. example 2가 이 포스팅의 케이스임.

Content Security Policy (CSP) – HTTP | MDN

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft, to site defacement, to malware distribution.

Content security policy

Content Security Policy can significantly reduce the risk and impact of cross-site scripting attacks in modern browsers.

Chrome Extension “Refused to load the script because it violates the following Content Security Policy directive”

i try to encrypt user data by cryptojs library and send to server by ajax but the console shows the error: Refused to load the script ’https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto…

Refused to load the script because it violates the following Content Security Policy directive

When I tried to deploy my app onto devices with Android system above 5.0.0 (Lollipop), I kept getting these kind of error messages: 07-03 18:39:21.621: D/SystemWebChromeClient(9132):
file:///