Маскировка взаимодействия пользователя с мобильными интерфейсами

Маскировка взаимодействия пользователя с мобильными интерфейсами

Ранний доступ

Взаимодействия пользователя фиксируют имена элементов пользовательского интерфейса, таких как метки кнопок или названия полей ввода. Если эти имена содержат или раскрывают личную информацию, можно скрыть отдельные представления, чтобы имена их элементов пользовательского интерфейса были заменены на *** в зафиксированных взаимодействиях.

В ваши обязанности входит выявление того, какие представления и компоненты вашего приложения могут раскрывать персональные данные, и соответствующее маскирование.

Маскирование отображения в нативных приложениях Android

Установите тег data-dt-mask для представления.

Kotlin

myView.tag = "data-dt-mask"

Java

myView.setTag("data-dt-mask");

В результате взаимодействия имя представления будет заменено на ***.

Маскируемые элементы в Android Jetpack Compose

Примените модификатор dtMask() к составному элементу.

Button(
    onClick = { /* ... */ },
    modifier = Modifier.dtMask()
) {
    Text("Оплатить сейчас")
}

В результате взаимодействия имя составного элемента будет заменено на ***.

Маскирование отображения нативных элементов iOS

Установите для параметра accessibilityIdentifier вида значение data-dt-mask.

Swift

myView.accessibilityIdentifier = "data-dt-mask"

Objective-C

myView.accessibilityIdentifier = @"data-dt-mask";

В результате взаимодействия имя представления будет заменено на ***.

Маскирование представлений в iOS SwiftUI

Используйте модификатор .astromkeyMasked() или установите значение accessibilityIdentifier на data-dt-mask.

Модификатор

Button("Оплатить сейчас") {
    // ...
}
.astromkeyMasked()

Доступность ID

Button("Оплатить сейчас") {
    // ...
}
.accessibilityIdentifier("data-dt-mask")

В результате взаимодействия имя представления будет заменено на ***.

Взаимодействие с масками в React Native

React Native поддерживает два подхода к маскированию: маскирование на основе маркеров с использованием свойства dtMask и маскирование на основе правил через конфигурацию.

Используйте маскирование на основе маркеров

Чтобы скрыть компонент и все его дочерние элементы, добавьте свойство dtMask к любому родительскому представлению.

<View dtMask>
  <Pressable onPress={onPress}>
    <Text>john.doe@example.com</Text>
  </Pressable>
</View>

Любое взаимодействие, разрешаемое через поддерево с предком dtMask, маскируется. Взаимодействие по-прежнему фиксируется, но имя элемента пользовательского интерфейса заменяется на ***.

Используйте маскирование на основе правил

Чтобы скрывать взаимодействия на основе шаблонов testID или длины текстового содержимого, настройте правила маскирования в конфигурации Ключ-АСТРОМ.

const config = {
  mask: {
    replaceWith: '***',
    testID: (id: string) => /email|phone/i.test(id),
    text: (text: string) => text.length > 20,
  },
};

При такой конфигурации:

• Элементы, testID соответствующие заданной функции, маскируются.
• Элементы, обнаруженное текстовое содержимое которых соответствует заданной функции, маскируются.

Оба подхода заменяют конфиденциальную метку значением replaceWith (по умолчанию: ***), сохраняя при этом идентификатор взаимодействия и путь к элементу.

Маскирующие виджеты во Flutter

Оберните виджет в UserInteractionWidget и установите masked значение true.

UserInteractionWidget(
  masked: true,
  child: TextField(
    decoration: InputDecoration(labelText: 'Password'),
  ),
)

В результате взаимодействия имя виджета будет заменено на ***.