콘텐츠 보안 프로토콜 (CSP) 구현

배경

Branch는 고객의 개인 정보와 보안을 매우 중요하게 생각합니다. 다음 문서는 고객이 Branch webSDK와 함께 콘텐츠 보안 정책(CSP)을 웹사이트에 구현할 수 있도록 권장 사항을 제공합니다.

CSP는 어떻게 작동합니까?

CSP(콘텐츠 보안 정책)는 신뢰할 수 있는 웹 페이지의 컨텍스트에서 악성 콘텐츠를 실행하는 데 의존하는 XSS (Cross-Site Scripting), 클릭 재킹 및 기타 코드 인젝션 공격에 대한 추가 보호 레이어를 제공하는 컴퓨터 보안 표준입니다. HTTP 응답 헤더에 적절한 CSP 지시문을 사용하여 웹 애플리케이션에서 허용해야 하는 데이터 source를 선택적으로 지정할 수 있습니다.

서버 사이드의 HTTP 응답 헤더에 CSP 추가

모든 서버 사이드 프로그래밍 환경에서는 커스텀 HTTP 응답 헤더를 다시 보낼 수 있어야 합니다. Apache 웹 서버에 CSP 헤더를 추가하는 예시는 다음과 같습니다.

httpd.conf 또는 .htaccess 파일에 추가되어 원본의 콘텐츠만 허용하도록 기본 정책을 설정합니다.

Header set Content-Security-Policy "default-src 'self';"

Please refer to https://content-security-policy.com/ for different servers configuration.

HTML 페이지 아래 <meta> 태그를 통해 CSP 추가

<meta> 태그를 사용하여 페이지 레벨에서 CSP 지시문을 추가할 수 있습니다. 다음은 HTML 페이지에 CSP 정책을 추가할 경우의 예시입니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

두 방법 모두 웹에서 널리 채택됩니다. 웹사이트가 단일 페이지 애플리케이션이거나 특정 페이지에만 CSP를 적용하려는 경우 <meta> 헤더를 통해 CSP를 추가하는 것이 더 빠르고 구현 및 변경이 쉽기 때문에 보다 나은 옵션이 될 수 있습니다.

CSP 정책과 함께 Branch Web SDK를 연동합니다.

웹사이트에 CSP 정책이 구현되어 있거나 Branch webSDK를 연동할 때 CSP 정책을 추가하려는 고객을 위해 권장되는 몇 가지 옵션 및 권장 사항은 다음과 같습니다.

Branch 관련 코드를 로컬 자바스크립트 파일로 래핑

고객이 웹사이트가 호스트되는 서버 아래의 자바스크립트 파일에 Branch 관련 자바스크립트 코드를 랩핑하고 저장하려는 경우, script-src 'self' 정책을 'self' 로 사용하면 동일한 오리진에서 로드되는 현재 오리진 및 자바스크립트 파일이 허용됩니다.

Content-Security-Policy: script-src 'self' https://cdn.branch.io https://app.link;

다음은 로컬 자바스크립트 파일을 사용하여 Branch webSDK를 연동시 <meta> 태그로 적절한 CSP 정책을 추가할 경우의 예시입니다. 다음 스크립트에서 branch.js 파일은 로컬에 저장되고 &lt;meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.branch.io https://app.link>는 CSP 정책을 정의합니다.

<!doctype html>
<html><head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.branch.io https://app.link">
  <title>Branch Demo</title>
  <script src="branch.js"></script>
</head><body>Branch Journey Demo</body>
</html>

인라인 Branch 관련 자바스크립트 코드 사용

Some customers prefer to use inline javascript code when integrating with branchWebSDK. For example, our demo page https://cdn.branch.io/example.html is using the inline script when calling functions defined in branchWebSDK.

CSP 정책을 사용할 때 안전하게 인라인 자바스크립트 코드를 실행할 수 있도록 hashes 또는 nonces라는 두 가지 널리 사용되는 옵션이 있습니다.

옵션 1 : 인라인 스크립트 보안을 위해 CSP 해시 정책 사용

해시 사용은 콘텐츠 보안 정책에서 인라인 스크립트 실행을 허용하는 한 가지 방법입니다. 이는 단순한 화이트리스트이며 브라우저는 원본 스크립트 블록을 발견하면 이를 해시하고 CSP와 비교한 뒤 매치되는 경우 실행합니다. 기본적으로 클라이언트는 인라인 자바스크립트 코드를 해시하고 SHA256 해시를 가져와 CSP 정책에 추가했습니다.

Content-Security-Policy: script-src 'sha256-Ci5HNPYwBSR4VHU9hJh95ZFVy6fOb+k1oj6ZuaHln/g=' https://cdn.branch.io https://app.link;

다음은 인라인 자바스크립트를 사용할 때 CSP 해시를 사용하는 예입니다.

https://codepen.io/BranchWebSDK/pen/RwRqLmv

코드에서 <meta> 태그를 통해 CSP 해시를 정의합니다.

…..
<meta http-equiv="Content-Security-Policy" content="script-src  'sha256-Ci5HNPYwBSR4VHU9hJh95ZFVy6fOb+k1oj6ZuaHln/g=' https://cdn.branch.io https://app.link">
  <title>BranchWebSDK Demo</title>
  <script>
    // load Branch
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";
……
</script>

SHA256 해시는 인라인 자바스크립트 코드를 기반으로 생성됩니다. 가장 쉬운 생성 방법은 브라우저의 개발자 도구 콘솔을 여는 것입니다. 그러면 콘솔 오류 메시지에 예상되는 스크립트 해시가 출력됩니다. 아래는 브라우저 콘솔이 CSP 해시를 생성하는 방법에 대한 스크린 샷입니다.

24182418

옵션 2 : 인라인 스크립트 보안을 위해 CSP nonce 정책 사용

해시 사용의 가장 큰 문제는 스크립트 변경시 해시를 다시 생성해야 한다는 것입니다. 즉, 인라인 자바스크립트 코드가 동적이면 이 방법이 유용하지 않습니다. CSP nonce은 이를 처리하는 또 다른 방법을 제공합니다.

nonce는 "한 번 사용된" 유사 난수입니다. 해시처럼 정확한 스크립트 블록을 흰색으로 나열하는 대신, 전체 스크립트 블록에 포함된 내용과 상관없이 화이트리스트를 만들 수 있습니다.

Content-Security-Policy: script-src 'nonce-4AEemGb0xJptoIGFP3Nd' https://cdn.branch.io https://app.link;

Here is an example of https://codepen.io/BranchWebSDK/pen/LYZBqao using nonce in CSP policy. In the codes, It consists of both a <meta> header with CSP policy defined and an attribute on the script tag

<head>
  <meta http-equiv="Content-Security-Policy" content="script-src  'nonce-4AEemGb0xJptoIGFP3Nd' https://cdn.branch.io https://app.link">
  <title>BranchWebSDK Demo</title>
  <script nonce="4AEemGb0xJptoIGFP3Nd">
    // load Branch
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r)
……
 </script>

참고 : nonce는 요청마다 무작위로 생성되어야 합니다.

위에 제공된 예에서는 Branch webSDK를 실행할 때 일부 자바스크립트 파일이 이 두 도메인에서 로드되기 때문에 script-src 를 명시적으로 추가했습니다.


이 페이지가 도움이 되었습니까?