Moderación de la entrada del usuario en SAP Build Apps

Al desarrollar una aplicación o crear un sitio web, es importante moderar el comportamiento del usuario no solo para evitar entradas potencialmente incorrectas, sino también para mejorar la usabilidad. En este blog, exploremos varias formas en que esto se puede lograr en SAP Build Apps. Los métodos incluirán la configuración ver componentesusando funciones de fórmula y de paso AI.

La mayoría de los componentes orientados a la entrada están equipados con propiedades que le permiten filtrar la entrada del usuario. Por ejemplo, el campo de entrada se puede configurar para escribir en mayúscula automáticamente cada palabra:

De esa manera, puede hacer cumplir el requisito de poner cada palabra en mayúscula sin agregar instrucciones adicionales para el usuario. Otra gran característica del campo de entrada es la capacidad de definir el tipo de teclado, lo que introduce un gran nivel de experiencia de usuario. Como usuario, estaré satisfecho de ver un teclado numérico cuando necesite ingresar mi número de teléfono, en lugar del teclado normal.

Es cierto que eso podría no ser suficiente, ya que los usuarios aún pueden ingresar lo que quieran en el campo de entrada. Si sus requisitos de entrada son estrictos, considere proporcionar una parte o incluso la entrada completa al usuario, mitigando posibles errores. Un campo desplegable es una opción perfecta. Como ejemplo, puede proporcionar un código de número de teléfono en un menú desplegable para eliminar la confusión con el formato, ya que diferentes usuarios pueden tener una forma diferente de escribir su número. Vea una inspiración a continuación:

Si bien definir las propiedades de los componentes puede ser suficiente para algunos casos de uso, en la mayoría de los casos queremos moderar aún más la entrada del usuario. Aquí, Funciones de fórmula entrar en juego Con una variedad de funciones, no solo podemos verificar si la entrada es correcta, sino también modificarla para evitar contenido prohibido.

Para el primer caso de uso, ampliemos las capacidades de una entrada con la propiedad «Entrada de contraseña» establecida en verdadero. Con la fórmula, hagamos cumplir las siguientes reglas de contraseña:

– Al menos 8 carácteres.
– Debe contener al menos 1 letra mayúscula, 1 letra minúscula y 1 número.
– Puede contener caracteres especiales.

Aquí está la fórmula que hace precisamente eso:

MATCHES_REGEX(" ", "/^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm")

Coloque el texto que desea hacer coincidir entre las primeras comillas, o sustitúyalas con la variable. La fórmula volverá verdadero si la contraseña coincide con los criterios anteriores, y falsa en caso contrario. Puede poner esta fórmula en una función de flujo IF para interrumpir la ejecución de más lógica en caso de que la contraseña no coincida:

A continuación, protejamos a nuestros usuarios contra Cross Site Scripting (XSS). En resumen, es una vulnerabilidad web que permite a un usuario malicioso inyectar scripts personalizados en su sitio web, dirigidos a los usuarios o al servidor. El ejemplo más común de XSS es poner un <script>...</script> etiqueta en un campo de entrada, con ... sustituido por una carga útil. Esto es particularmente peligroso si permite que los usuarios publiquen públicamente, lo que potencialmente puede permitir que un pirata informático ejecute esta carga útil contra cientos de personas.

Afortunadamente, hay formas de mitigar eso, y las fórmulas, nuevamente, nos ayudarán. Nosotros podemos usar REPLACE_ALL_REGEX para reemplazar la etiqueta del script con una expresión regular:

REPLACE_ALL_REGEX("Hello <script>alert(1)</script>", "<.*?script.*\/?>", "")

Observe cómo desaparece la etiqueta del script con la carga útil, sin dejar ningún rastro malicioso. Alternativamente, podría, nuevamente, usar MATCHES_REGEX para incluso rechazar la entrada con una etiqueta de secuencia de comandos.

Pero, ¿qué pasa si un usuario decide usar XSS de una manera menos maliciosa, por ejemplo, para formatear su texto con el <h1> ¿etiqueta? Para eso, tenemos un STRIP_HTML_TAGS fórmula. Devuelve un texto dado con todas las etiquetas HTML eliminadas, evitando cualquier intento de formateo:

STRIP_HTML_TAGS("<h1>Hi everyone!</h1><span style="color:red"> My text is red</span>")

Observe, nuevamente, cómo las etiquetas HTML no se incluyen en el resultado final.

Todos los métodos descritos anteriormente son altamente técnicos y se basan en predicciones realizadas sobre el comportamiento potencial del usuario. Aunque, dado que nuestros usuarios son humanos como nosotros, pueden ser muy imprevisibles. Afortunadamente, con el uso de la inteligencia artificial, podemos detectar malicia potencial en la entrada del usuario y mitigarla incluso antes de que la envíe. Una vez más, no podemos poner todas las palabras dañinas en una lista de denegación, ya que las personas encontrarán la manera de sortearlas, pero con la moderación de la IA podemos al menos aumentar el alcance del abuso detectable.

Para tu propósito, vamos a utilizar API de moderación de OpenAI. Echa un vistazo a mi blog anterior para obtener una guía más detallada sobre el uso de OpenAI en SAP Build Apps. Como se puede ver en el ejemplo de uso:

curl https://api.openai.com/v1/moderations \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer YOUR_API_KEY' \
  -d '{
  "input": "I don't like this post"
}'

Necesitamos proporcionar dos encabezados HTTP: Content-Type y Authorization. Y el cuerpo de una solicitud es un objeto JSON, con un solo input llave adentro.

Cree un nuevo recurso de datos de la API REST y establezca la «URL del recurso» en https://api.openai.com/v1/. Vaya a la pestaña «Crear registro (POST)» y agregue moderations hasta el final de la URL. Luego cree dos encabezados HTTP como se describe en la solicitud anterior, sustituyendo YOUR_API_KEY con una clave obtenida de OpenAI:

Vaya a la pestaña Esquema y elija Custom schema para «Crear esquema de solicitud de registro (POST)». Agregar una propiedad llamada input, teclee el texto. A continuación, vaya a la pestaña Prueba, abra las propiedades del Registro y coloque cualquier cosa en el campo de entrada para probar su conexión. Haga clic en «Ejecutar prueba» y una vez que obtenga una respuesta, elija «Establecer esquema de respuesta». La pestaña Esquema debería verse de la siguiente manera:

Su integración ya está lista y puede comenzar a usarla en su aplicación. Aunque tenga en cuenta que el uso de variables de datos no es una gran opción, ya que, de forma predeterminada, enviarán esta solicitud cada 5 segundos.

La IA comparará la entrada con una serie de temas potencialmente dañinos, con un valor para cada uno entre 0 y 1, donde los valores más altos indican una mayor confianza.

Este blog podría haber ido mucho más lejos y ser tan largo como un libro, ya que hay muchas formas de mejorar su aplicación moderando la entrada. Con eso, lo animo a que trate las instrucciones presentadas como una inspiración y las amplíe.

Si conoce algún otro método que otros puedan encontrar beneficioso, siéntase libre de agregarlos a los comentarios 👇