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

<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 لحذف الإجراءات والأشجار الفرعية الحساسة من المخزن (store) لديك. راجع توثيق إضافة redux لمزيد من التفاصيل.

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

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

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

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

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