✕
필터
티켓 제출Branch 대시보드Branch University

콘텐츠 보안 프로토콜 (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.

Add CSP through <meta> tag under HTML Page

CSP directive could be added on page level by using <meta> tag. Here is an example to add a CSP policy in your HTML page

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

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

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

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

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

If customers want to wrap and store the branch related JavaScript codes into a javascript file under the server where the website is hosted, they could use the script-src 'self' policy as ‘self’ matches the current origin and JavaScript files loaded from the same origin will be allowed..

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

Here is an example about adding a proper CSP policy with <meta> tag when integrating Branch webSDK using local javascript files. In the following script, the branch.js file is stored locally and &lt;meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.branch.io https://app.link> defines the CSP policy.

<!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 해시를 생성하는 방법에 대한 스크린 샷입니다.

2418

옵션 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>

📘

Note

The nonce should be generated per request, and it should be random.

In the above provided example, we explicitly added script-src because some javascript files are loaded from these two domains when executing the branch webSDK

Updated 8 months ago