[Web] Content Security Policy - Chrome 오류

Cordova를 이용해 하이브리드 앱을 개발 도중

갑자기 Javascript 소스가 먹통이 되는 일이 발생하였습니다.

"Javascript not working in cordova" 를 구글링을 해서 찾던 도중에

문제점을 발견 했습니다.

문제는 HTML5 Meta 태그에 다음과 같은 설정 정보가 추가가 되어있었습니다.

Chrome의 Content-Security-Policy 메타 태그가 포함되어 있을 경우,

HTML파일에 "<script>자바스크립스 소스</script>"와 같이 <script>태그를 이용하여 직접 자바스크립트 소스 코딩이 불가능 합니다.

이유는 크롬브라우저에서 ctrl + shift + i 를 이용해 개발자 도구를 보면 예시 소스에는 없지만

HTML파일에 <script></script>태그를 이용하여 코딩을 할 경우 외부에 코드가 노출이 되기 때문입니다.

               개발자도구 예시)

따라서 Content-Security-Policy 메타 태그가 포함되어 있을 경우,

첫번째 방법 :

   올바르지 못한 예)  <script></script>태그를 이용하여 직접 코딩하기

   올바른 예)  외부 js파일 불러오기

두번째 방법 : Content-Security-Policy 메타 태그 삭제

세번째 방법 : Content-Security-Policy 메타 태그 아래의 

그림과 같이 수정

https://developer.chrome.com/extensions/contentSecurityPolicy - 출처

-이상 끝-