[TIL] PhoneGap : CSP를 사용하여 외부 컨텐츠를 허용해보자

Content-Security-Policy 메타 태그를 사용하여 외부 컨텐츠를 허용해보자

도대체.
왜 이런.
TIL을 작성하나?

• 이왕에 폰갭으로 Hello World를 찍은 김에 기존 React Project 중 하나를 폰갭으로 이식해보자! 라는 원대한 꿈을 가짐.
• 이식해보려는 프로젝트는 Serverless Architecture를 준비하면서 만들었던 Pure React Web App형태의 웹 페이지였음. (해당 React App을 구동하는데 필요한 서버가 없음, 필요한 데이터 작업은 API 콜을 사용함)
• 해당 React 프로젝트를 npm run build 후 나온 html과 css, js 파일을 폰갭 프로젝트의 www에 집어넣고 phonegap serve !!
• 안드로이드 테스트 앱으로 확인해보니 이미지 리소스가 전혀 뜨지 않음. 그리고 콘솔에는 다음과 같은 Warning이 출력됨.

  [phonegap] [console.warn] Content Security Policy has been added:
  <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;img-src 'self' data: content:;style-src 'self' 'unsafe-inline' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">

도대체.
이 문제가.
왜 발생하였나?

• Weinre라는 원격 디버깅 툴로 체크해봤지만 아무것도 뜨지 않았음.
• 해당 React 프로젝트는 대부분의 Static Resource(Image, Font 등)를 CDN에 넣어두고 필요할 때만 Http GET Request를 통해 가져오고 있었음.
• 대충 구글을 훓어보니 XSS Injection을 방지하기 위해 Github Issue에서 다양한 논의가 오고갔으며 결국 Content-Security-Policy(이하 CSP) 메타 태그로 허가 되지 않은 URL에서 Static Resource를 가져오는 것이 막히게 되었음.

그렇다면.
우리는.
이것을.
어떻게.
대처해야하나??

• 영어에는 취약하지만 왠지 위 Warning에 나온 meta 태그를 추가해줘야 할 것만 같다..!
• 그래서 index.html에 다음 메타 태그를 추가해주었다.

  <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com; style-src * 'unsafe-inline' data: blob: 'self' ;script-src * 'unsafe-inline' 'unsafe-eval' * data: blob: ;img-src https://당신이허가하려는URL data: content: * 'self';">

  • https://ssl.gstatic.com : 외부의 gap과 ws와 관련된 리소스들을 가져올 수 있도록 Default로 포함된듯 하다.
  • 나의 경우 현재 이미지 리소스를 가져오는 것이 문제였으므로 img-src 다음에 허가 해주려는 URL을 추가해주었다.
• 이제 이미지 리소스가 잘 뜬다.  

실제 PhoneGap으로 구동한 React App

사진 잘 뜬다.. 배고파진다..

기타사항

• PhoneGap (Adobe) 말고 부모 프로젝트 격인 Cordova (Apache)의 경우 cordova-plugin-whitelist 라는 친구가 있다. 이 친구가 폰갭에도 적용될런지는 아직 모르지만 현재 단계에서는 필요하지 않아 사용을 하지 않았다.
  • 혹시나 싶어 폰갭 프로젝트 루트 디렉토리의 config.xml에 <allow-navigation href="*://*.내가허가하려는URL/*" />를 추가해봤었지만 쓸모가 없었다.
• 안드로이드의 경우 CSP에 관련된 기능을 4.4 (Kitkat) 부터 지원한다고 함.
• React App 내에서 사용한 node-fetch와 같은 XHRHttpRequest 친구들은 CSP 없이도 Call이 잘 되었음...? (이젠 나도 뭐가 뭔지 모르겠다.)
• 아직 apk 파일로 빌드해본 것이 아니니 방심할 수는 없다..
• 맞다. 사실 플레이팅 간접 홍보다. (플레이팅x스페이스클라우드 기사)
• 참고 URL
  • content security policy(CSP) - 소개
  • (W3C) Content Security Policy Level 3
  • cordova-plugin-whitelist Document

Origin TIL : https://github.com/uyu423/TIL