OpenReplay가 캡처하는 내용을 전역 수준과 세부 수준 중 한쪽 또는 양쪽 모두에서 정제할 수 있습니다. 가려지거나 무시된 데이터는 소스에서 캡처되지 않습니다. 즉, 해당 데이터는 사용자의 브라우저 밖으로 나가지 않습니다.

OpenReplay를 설정할 때 트래커 수준에서 데이터를 정제할 수 있습니다.

1. ‘Preferences > Projects’에서 프로젝트의 Tracking Code를 클릭합니다.
2. 코드 스니펫 바로 위에 데이터 기록 옵션이 표시됩니다:

• Inputs: 사용자의 모든 입력 값을 무시하거나, 가리거나, 그대로 기록합니다.
• Do not record any numeric text: 텍스트 요소에 포함된 숫자 값을 무시합니다.
• Do not record email addresses: 기본적으로 텍스트 요소에 포함된 모든 이메일은 가려져 리플레이에 표시되지 않습니다. 체크 박스를 해제하면 이 동작을 끌 수 있습니다.

3. 데이터 기록 옵션을 변경하면 코드 스니펫이 달라집니다. 업데이트된 스크립트를 웹 앱에 복사하여 붙여넣어야 합니다.

생성자에 전달할 수 있는 개인정보 보호 관련 옵션이 여러 가지 있습니다:

• obscureTextEmails?: boolean 텍스트 요소의 이메일을 가립니다. 이메일은 무작위 별표 문자열로 변환됩니다. 기본값: true.
• obscureTextNumbers?: boolean 텍스트 요소의 숫자를 가립니다. 숫자는 무작위 별표 문자열로 변환됩니다. 기본값: false.
• obscureInputEmails?: boolean 입력 필드의 이메일을 가립니다. 이메일 값은 무작위 별표 문자열로 변환됩니다. 기본값: true.
• obscureInputNumbers?: boolean 입력 필드의 숫자를 가립니다. 숫자 값은 무작위 별표 문자열로 변환됩니다. 기본값: false.
• obscureInputDates?: boolean 입력 필드의 날짜를 가립니다. 날짜 값은 무작위 별표 문자열로 변환됩니다. 기본값: false.
• defaultInputMode?: 0 | 1 | 2 입력 값의 기본 캡처 모드입니다. 각각 일반(plain), 가림(obscured), 무시(ignored)를 의미합니다. 기본값: 1(가림).

정제된 텍스트, 이메일, 숫자는 OpenReplay 서버로 데이터를 전송하기 전에 가려지거나 제거됩니다. 따라서 위 옵션에 적용한 변경 사항은 소급 적용되지 않으며 새로 수집되는 데이터에만 적용됩니다.

더 세밀하게 제어하려면 코드 수준에서 데이터를 정제할 수도 있습니다. DOM 요소와 입력 필드를 가리거나 무시할 때 유용합니다.

• data-openreplay-obscured는 <input> 태그, <img> 및 기타 HTML 요소(예: <div>)의 텍스트 콘텐츠를 마스킹하는 데 사용하며, <svg>와 <canvas>는 예외입니다.

<!--Obscuring input fields-->
<form action="/action_page.php">
  Name: <input type="text" name="fname" data-openreplay-obscured><br>
  <input type="submit" value="Submit">
</form>
<!--Obscuring a div element-->
<div style="background-color:lightblue" data-openreplay-obscured>
  <h3>This is a sensitive information</h3>
  <p>This is an important paragraph</p>
  <img src="important_image.jpg">
</div>

• data-openreplay-hidden은 <input> 태그, <img>, <svg> 및 기타 HTML 요소(예: <div>)의 콘텐츠를 삭제하는 데 사용하며, <canvas>는 예외입니다. 요소의 콘텐츠(자식 컴포넌트 포함)는 제거되지만, 다음 예제처럼 요소의 props와 인수는 그대로 유지됩니다:

<div style="background-color:lightblue" data-openreplay-hidden>
  <div>This is a sensitive information</div>
  <svg>An important chart</svg>
</div>

이렇게 하면 트래커는 다음과 같은 DOM을 기록합니다:

<div style="background-color:lightblue" data-openreplay-hidden>
</div>

• domSanitizer: (node: Element) => SanitizeLevel 함수를 사용하면 정제해야 하는 각 HTML 컴포넌트를 일일이 계측하지 않아도 됩니다. SanitizeLevel은 Plain(0), Obscured(1), Hidden(2) 중 하나일 수 있습니다. 이 함수는 트래커의 생성자에 전달합니다. 아래는 특정 CSS 클래스 이름을 가진 모든 HTML 요소를 삭제하는 예제입니다:

// Import SanitizeLevel enum
import Tracker, { SanitizeLevel } from "@openreplay/tracker";

const tracker = new Tracker({
  projectKey: PROJECT_KEY,
  domSanitizer: (node: Element) => {
    const elementClassNames = node.classList

    if (elementClassNames.contains('to_be_redacted_class')) {
      return SanitizeLevel.Hidden
    }

    if (node.id === 'sensitiveData') {
      return SanitizeLevel.Obscured
    }

    return SanitizeLevel.Plain
  }
})
tracker.start()

참고: 정제된 모든 요소는 소스(트래커) 수준에서 마스킹/삭제되므로 민감한 데이터가 OpenReplay 인스턴스에 도달하지 않습니다.

OpenReplay SDK를 사용하여 네트워크 데이터와 애플리케이션 상태를 정제할 수 있습니다.

요청/응답을 캡처하면 애플리케이션이 주고받는 매우 민감하거나 개인적인 정보가 기록될 수 있습니다. 네트워크 데이터를 반드시 적절히 가려야 합니다.

Fetch/XHR 요청/응답의 민감한 데이터를 가리려면 sanitizer 옵션을 사용하세요. 자세한 내용은 네트워크 옵션을 참고하세요.

또한 네트워크 요청 캡처 및 정제 방법을 단계별로 안내하는 튜토리얼도 확인해 보세요.

GraphQL 데이터를 정제하려면 트래커를 호출하기 전에 작업의 주요 변수와 결과를 복제해야 합니다. 자세한 내용은 GraphQL에서 기록된 데이터 정제 방법을 참고하세요.

OpenReplay SDK를 사용하여 프런트엔드 상태 저장소에서 민감한 데이터를 제거하세요.

actionFilter, actionTransformer, stateTransformer 옵션을 사용하여 저장소에서 민감한 액션과 하위 트리를 가립니다. 자세한 내용은 redux 플러그인 문서를 참고하세요.

filter, transformer, mutationTransformer 옵션을 사용하여 저장소에서 민감한 변경(mutation)과 하위 트리를 가립니다. 자세한 내용은 vuex 플러그인 문서를 참고하세요.

filter, transformer, mutationTransformer 옵션을 사용하여 저장소에서 민감한 변경(mutation)과 하위 트리를 가립니다. 자세한 내용은 zustand 플러그인 문서를 참고하세요.

filter, transformer, mutationTransformer 옵션을 사용하여 저장소에서 민감한 변경(mutation)과 하위 트리를 가립니다. 자세한 내용은 pinia 플러그인 문서를 참고하세요.

actionFilter, actionTransformer, stateTransformer 옵션을 사용하여 저장소에서 민감한 액션과 하위 트리를 가립니다. 자세한 내용은 ngrx 플러그인 문서를 참고하세요.

개인정보 보호 관련 기능을 지속적으로 개선하고 있으니, 아직 지원하지 않는 기능이 필요하다면 알려 주세요. 데이터 정제에 문제가 있다면 Slack에 문의하여 커뮤니티의 도움을 받아 보세요.