يمكنك تنقية ما يلتقطه OpenReplay على المستويين العام و/أو الدقيق. لن يتم التقاط أي بيانات محجوبة أو متجاهَلة عند المصدر. بعبارة أخرى، لن تغادر تلك البيانات متصفح المستخدم أبدًا.

يمكن تنقية البيانات على مستوى الـ tracker، عند إعداد OpenReplay.

1. انقر على Tracking Code الخاص بمشروعك ضمن ‘Preferences > Projects’.
2. من المفترض أن تظهر خيارات تسجيل البيانات قبل مقتطف الكود مباشرةً:

• Inputs: لتجاهل قيم إدخال المستخدمين لديك أو حجبها أو تسجيلها جميعًا.
• Do not record any numeric text: لتجاهل القيم الرقمية الموجودة في العناصر النصية.
• Do not record email addresses: بشكل افتراضي، يتم حجب جميع عناوين البريد الإلكتروني الموجودة في العناصر النصية ولن تظهر في عمليات إعادة التشغيل. يمكنك تعطيل ذلك بإلغاء تحديد المربع.

3. يؤثر تغيير خيارات تسجيل البيانات على مقتطف الكود. تأكد من نسخ السكربت المحدّث ولصقه في تطبيق الويب لديك.

هناك مجموعة من الخيارات المتعلقة بالخصوصية يمكنك تمريرها إلى المُنشئ (constructor):

• obscureTextEmails?: boolean حجب عناوين البريد الإلكتروني في العناصر النصية. سيتم تحويل عناوين البريد الإلكتروني إلى سلسلة عشوائية من علامات النجمة. القيمة الافتراضية: true.
• obscureTextNumbers?: boolean حجب الأرقام في العناصر النصية. سيتم تحويل الأرقام إلى سلسلة عشوائية من علامات النجمة. القيمة الافتراضية: false.
• obscureInputEmails?: boolean حجب عناوين البريد الإلكتروني في حقول الإدخال. سيتم تحويل قيم البريد الإلكتروني إلى سلسلة عشوائية من علامات النجمة. القيمة الافتراضية: true.
• obscureInputDates?: boolean حجب التواريخ في حقول الإدخال. سيتم تحويل قيم التاريخ إلى سلسلة عشوائية من علامات النجمة. القيمة الافتراضية: false.
• defaultInputMode?: 0 | 1 | 2 وضع الالتقاط الافتراضي لقيم الإدخال. على التوالي: عادي، محجوب أو متجاهَل. القيمة الافتراضية: 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>. تتم إزالة محتوى العنصر (بما في ذلك مكوّناته الفرعية)، لكن يتم الاحتفاظ بخصائصه ومعطياته، كما في هذا المثال:

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

سيؤدي هذا إلى تسجيل الـ tracker للـ DOM التالي:

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

• دالة domSanitizer: (node: Element) => SanitizeLevel لتجنّب الحاجة إلى تجهيز كل مكوّن HTML يحتاج إلى التنقية. يمكن أن يكون SanitizeLevel إما Plain (0) أو Obscured (1) أو Hidden (2). تُمرَّر هذه الدالة إلى مُنشئ الـ tracker. فيما يلي مثال على إزالة جميع عناصر HTML التي تحمل اسم فئة CSS محدّدًا:

// 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()

ملاحظة: يتم حجب/إزالة جميع العناصر المنقّاة على مستوى المصدر (tracker) بحيث لا تصل البيانات الحساسة إلى نسخة OpenReplay أبدًا.

يمكنك استخدام OpenReplay SDK لتنقية بيانات الشبكة وحالة التطبيق.

قد يؤدي التقاط الطلبات/الاستجابات إلى تسجيل معلومات حساسة أو خاصة للغاية قد يرسلها/يتلقاها تطبيقك. تأكد من إزالة بيانات الشبكة لديك بشكل صحيح.

استخدم الخيار sanitizer لإزالة البيانات الحساسة من طلب/استجابة Fetch/XHR. راجع خيارات الشبكة لمزيد من التفاصيل.

تحقق أيضًا من هذا الدرس خطوة بخطوة حول كيفية التقاط طلبات الشبكة وتنقيتها.

لتنقية بيانات GraphQL، تحتاج إلى استنساخ المتغيرات الرئيسية ونتائج العملية قبل استدعاء الـ tracker. اطّلع على كيفية تنقية البيانات المسجّلة في GraphQL لمزيد من التفاصيل.

نقِّ البيانات الحساسة من مخزن حالة الواجهة الأمامية لديك باستخدام OpenReplay SDK.

استخدم الخيارات actionFilter وactionTransformer وstateTransformer لإزالة الإجراءات والأشجار الفرعية الحساسة من مخزنك. راجع توثيق إضافة redux لمزيد من التفاصيل.

استخدم الخيارات filter وtransformer وmutationTransformer لإزالة الطفرات (mutations) والأشجار الفرعية الحساسة من مخزنك. راجع توثيق إضافة vuex لمزيد من التفاصيل.

استخدم الخيارات filter وtransformer وmutationTransformer لإزالة الطفرات (mutations) والأشجار الفرعية الحساسة من مخزنك. راجع توثيق إضافة zustand لمزيد من التفاصيل.

استخدم الخيارات filter وtransformer وmutationTransformer لإزالة الطفرات (mutations) والأشجار الفرعية الحساسة من مخزنك. راجع توثيق إضافة pinia لمزيد من التفاصيل.

استخدم الخيارات actionFilter وactionTransformer وstateTransformer لإزالة الإجراءات والأشجار الفرعية الحساسة من مخزنك. راجع توثيق إضافة ngrx لمزيد من التفاصيل.

نحن نعمل باستمرار على تحسين ميزاتنا المتعلقة بالخصوصية، لذا أخبرنا إذا كنت بحاجة إلى شيء لا ندعمه بعد. إذا كنت تواجه صعوبة في تنقية بياناتك، فيرجى التواصل معنا عبر Slack أو زيارة المنتدى والحصول على المساعدة من مجتمعنا.