Нарушение CSP в React Native Web с динамическими встроенными стилями во время аудита безопасности ⇐ CSS

[Anonymous]

Я разрабатываю веб-проект React Native, и мне нужно, чтобы мое приложение было совместимо с CSP. Проблема возникает при использовании динамических стилей.
Перемещение стилей в статические классы таблицы стилей работает для статических стилей, но ограничивает полностью динамические стили (например, адаптивную ширину).
Пример:
Динамический стиль для:

Код: Выделить всё

или динамически используя StyleSheet.create:

Код: Выделить всё

const dynamicStyle = StyleSheet.create({ dynamicWidth: { minWidth: props.width } });

динамические стили текста, зависящие от реквизита:

Код: Выделить всё

const styles = StyleSheet.create({
text: {
color: props.color,
fontSize: responsiveFontSize(props.fontSize),
fontWeight: props.fontWeight,
fontFamily: 'outfit',
paddingLeft: 5,
paddingRight: 1,
zIndex: +1,
textAlign: props.textAlign || 'left'
},
asterisk: {
color: 'red',
fontSize: responsiveFontSize(props.fontSize),
}
});

Это отлично работает при развертывании.
Аудит безопасности ZAP отмечает нарушения CSP, поскольку встроенные/динамические стили внедряются в DOM.
Что я пробовал

• Встроенный стиль объекты

Код: Выделить всё

Правильно работает при развертывании в Интернете, iOS и Android.
ZAP помечает нарушения CSP из-за встроенных стилей.
Динамические стили с помощью StyleSheet.create

Код: Выделить всё

const dynamicStyle = StyleSheet.create({
dynamicWidth: { minWidth: props.width }
});

По-прежнему помечается ZAP как нарушение CSP.

• Предопределенные статические стили/корзины

Код: Выделить всё

const styles = StyleSheet.create({
containerSmall: { minWidth: 200 },
containerMedium: { minWidth: 320 },
containerLarge: { minWidth: 480 },
containerXL: { minWidth: 500 }
});

const getWidthStyle = (screenWidth?: number) => {
if (!screenWidth) return styles.containerMedium;
if (screenWidth >= 500) return styles.containerXL;
if (screenWidth >= 480) return styles.containerLarge;
if (screenWidth >= 320) return styles.containerMedium;
return styles.containerSmall;
};

CSP-безопасен, поскольку не используются объекты встроенного стиля.
Не допускает полностью динамическую ширину, только предопределенные сегменты.

• Встроенные стили перенесены в StyleSheet.create.
  Устранены нарушения CSP для статических стили.
• Пыталась использовать атрибуты nonce для встроенных стилей.

Нарушение CSP для динамических встроенных стилей не устранено.
Требования
Поддержка действительно динамических значений (не только предопределенные сегменты)
Проходить аудит безопасности OWASP ZAP со строгим CSP
Поддерживать кросс-платформенную совместимость (Интернет, iOS, Android)
Обрабатывать адаптивные макеты с динамической шириной, цветами, размерами шрифтов и т. д.
Чего я ожидаю

• Динамическая ширина и другое свойства стиля (такие как отступы, минимальная ширина, цвета) должны применяться без пометки ZAP о нарушениях CSP.
• Проверки безопасности проходят, даже если стили рассчитываются во время выполнения на основе реквизитов или ширины экрана.
• Полностью адаптивный макет без ограничения предопределенными сегментами.

Вопросы
Как я могу безопасно применять динамические стили в React Native Web, такие как ширина, отступы, цвета и размеры шрифта, не вызывая нарушений CSP, сохраняя при этом полную отзывчивость?
Существуют ли передовые методы или методы для обработки динамических стилей в соответствии с CSP-совместимым способом для React Native Web?
Пожалуйста, помогите мне устранить это нарушение CSP для динамических стилей. Потому что для нашего проекта важен динамичный стиль.

Подробнее здесь: https://stackoverflow.com/questions/797 ... urity-audi