Utilizando DRF y React para Formulario de contacto

No he visto a nadie aceptar el formulario así usando DRF. Estoy prácticamente enumerando todos los campos para el método POST. ¿Es seguro hacerlo?

class ContactForm(generics.ListCreateAPIView):
queryset = Contact.objects.all()
serializer_class = ContactSerializer

@action(methods=['GET'], detail=True)
def testing_env(self):
    return Response({'Works': 'ayyy'})

@action(methods=['POST'], detail=True)
def create_contact(self, request):
    data = request.data
    print(data)
    contact = Contact.objects.create(name=data['name'], email=data['email'], subject=data['subject'], message=data['message'])
    contact.save()
    return Response({'Success': 'it went good'})

Y aquí está el formulario de react:

    handleSubmit(event){
    event.preventDefault();
    let data = this.state
   axios({
       method: 'post',
       url: FormURL(),
       data:{
           name: this.state.name,
           email: this.state.email,
           subject: this.state.subject,
           message: this.state.message,
       }
   })
    
}

Pregunta hecha hace 3 años, 4 meses, 28 días - Por devgeek


2 Respuestas:

  • Para mejorar la seguridad y la eficiencia de tu API utilizando Django Rest Framework (DRF) con React, puedes manejar el envío del formulario de contacto de una manera más segura y limpia.

    En tu vista de Django, en lugar de enumerar todos los campos en el método create_contact, puedes hacer uso de serializers para simplificar el proceso. Con serializers, puedes definir cómo se serializan y deserializan los datos en tu API.

    Aquí te muestro un ejemplo de cómo podrías reorganizar tu vista de Django para utilizar un serializer:

    python
    from rest_framework import generics
    from rest_framework.response import Response
    from rest_framework.decorators import action
    from .serializers import ContactSerializer
    from .models import Contact
    
    class ContactForm(generics.ListCreateAPIView):
        queryset = Contact.objects.all()
        serializer_class = ContactSerializer
    
        @action(methods=['GET'], detail=True)
        def testing_env(self):
            return Response({'Works': 'ayyy'})
    
        @action(methods=['POST'], detail=True)
        def create_contact(self, request):
            serializer = ContactSerializer(data=request.data)
            if serializer.is_valid():
                serializer.save()
                return Response({'Success': 'it went good'})
            else:
                return Response(serializer.errors, status=400)
    

    Y en tu archivo serializers.py, puedes definir un serializer para tu modelo Contact, en este caso, asumiendo que tu modelo se llama Contact:

    python
    from rest_framework import serializers
    from .models import Contact
    
    class ContactSerializer(serializers.ModelSerializer):
        class Meta:
            model = Contact
            fields = ['name', 'email', 'subject', 'message']
    

    Con esta configuración, DRF manejará la validación de los datos y la creación del objeto Contact, simplificando tu vista y haciéndola más segura.

    En cuanto a tu código de React, parece estar en buen camino. Sin embargo, al agregar un manejo para los errores de la solicitud sería una buena práctica. Puedes hacerlo así:

    javascript
    handleSubmit(event){
        event.preventDefault();
        let data = this.state
       axios({
           method: 'post',
           url: FormURL(),
           data:{
               name: this.state.name,
               email: this.state.email,
               subject: this.state.subject,
               message: this.state.message,
           }
       }).then(response => {
           console.log(response.data);
           // Agregar código para manejar la respuesta exitosa
       }).catch(error => {
           console.error(error);
           // Agregar código para manejar errores de la solicitud
       });
    }
    

    Siguiendo estas recomendaciones, estarás optimizando la seguridad y la eficiencia de tu API al manejar los datos del formulario de manera más segura y simplificada.

    Respondida el Dec 19, 2020 a las 19:50 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Sí, es generalmente seguro enumerar todos los campos para el método POST en un formulario de contacto utilizando Django REST Framework (DRF). Sin embargo, hay algunas precauciones de seguridad que debes tener en cuenta:

    Validación de entrada: Asegúrate de validar la entrada correctamente en el serializador para evitar que los usuarios malintencionados envíen datos no deseados o maliciosos. Esto incluye la validación de tipos de datos, longitudes de campo y formatos de correo electrónico. Protección CSRF: Implementa protección CSRF (Cross-Site Request Forgery) para evitar que los sitios web externos envíen solicitudes POST maliciosas a tu formulario. Puedes utilizar el middleware CsrfViewMiddleware de Django para proteger tus vistas. Almacenamiento seguro de datos: Almacena los datos del formulario enviados de forma segura en tu base de datos. Esto implica el uso de un algoritmo de hash seguro para almacenar contraseñas y otros datos sensibles. Limitación de tasa: Implementa la limitación de tasa para evitar que los atacantes envíen spam a tu formulario repetidamente. Puedes utilizar la clase ThrottleMixin de DRF para limitar el número de solicitudes permitidas por usuario o dirección IP en un período de tiempo determinado.

    Además, aquí tienes algunas sugerencias para mejorar tu código:

    Usa un ModelSerializer: En lugar de enumerar manualmente todos los campos en el método create_contact, puedes utilizar un ModelSerializer para serializar y deserializar automáticamente los datos del formulario. Esto simplifica tu código y reduce el riesgo de errores. Maneja los errores correctamente: Asegúrate de manejar los errores correctamente en tus vistas y devuelves respuestas de error apropiadas a los clientes. Considera el uso de un patrón de diseño:* Considera el uso de un patrón de diseño como RESTful API Blueprint para diseñar tu API de forma coherente y fácil de mantener.

    Siguiendo estas prácticas, puedes crear un formulario de contacto seguro y protegido utilizando DRF y React.

    Respondida el Dec 19, 2020 a las 20:01 - por Gemini

    Votos positivos: 0 | Votos negativos: 0