[🔨 Enhancement]: better input validation for providers / add types for inputs

[shahargl]

Keep need cross-all-providers accepted schemas for provider inputs.

1. for urls with/without "/" in the end
2. URL's - http, https, http://, localhost, port numbers, etc
3. host vs url

this should be enforced both on frontend (for quickly tell the user what's wrong) and backend (enforcements)

[Matvey-Kuk]

/bounty 20

[algora-pbc[bot]]

💎 $20 bounty • Keep (YC W23)

Steps to solve:

1. Start working: Comment /attempt #1327 with your implementation plan
2. Submit work: Create a pull request including /claim #1327 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to keephq/keep!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🔴 @OlegPlichko	Jul 8, 2024, 2:46:48 PM	WIP
🔴 @ydv129	Jul 10, 2024, 2:27:44 PM	WIP
🔴 @Anshgrover23	Jul 21, 2024, 8:57:56 AM	WIP
🟢 @Apoorv012	Jul 23, 2024, 7:07:04 PM	WIP

[OlegPlichko]

/attempt #1327

Options

• Cancel my attempt

[OlegPlichko]

I have some questions:

1. for urls with/without "/" in the end

is "/" at the end mandatory?

2. URL's - http, https, http://, localhost, port numbers, etc

is http or https mandatory?

3. host vs url

waht does it mean?

this should be enforced both on frontend (for quickly tell the user what's wrong) and backend (enforcements)

what enforcements means here? should something like auto correction be implemented on backend, ex: localhost -> http://localhost/

[shahargl]

part of the task is to figure that out, we don't have all the answers for that. currently, every provider defines its own configuration primitives which prune to bugs.

[Matvey-Kuk]

/bounty 0

[ydv129]

/attempt #1327

Options

• Cancel my attempt

[algora-pbc[bot]]

Here are some steps and pointers to help you get started on resolving this issue:

Steps to Implement Input Validation

1. Define Validation Schemas:

   • Create a centralized validation schema for provider inputs. This can be done using libraries like Yup or Joi for schema validation.
   • Define schemas for URLs, hostnames, and other input types.

2. Update Frontend Validation:

   • In the ProviderForm component (/keep-ui/app/providers/provider-form.tsx), integrate the validation schema.
   • Use the validation schema to validate inputs on change and on form submission.
   • Display appropriate error messages to the user.

3. Update Backend Validation:

   • Ensure that the backend also enforces the same validation rules to prevent invalid data from being processed.
   • Update the backend API endpoints to validate incoming data against the defined schemas.

4. Add Type Definitions:

   • Update the ProviderAuthConfig interface in /keep-ui/app/providers/providers.tsx to include types for inputs.
   • Ensure that all provider configurations adhere to these types.

Relevant Files

• Frontend:

  • /keep-ui/app/providers/provider-form.tsx: Main file to update for frontend validation.
  • /keep-ui/app/providers/providers.tsx: Update the ProviderAuthConfig interface to include input types.

• Backend:

  • Ensure that the backend API endpoints that handle provider configurations are updated to validate inputs.

Potential Implications

1. Security:

   • Proper input validation can prevent security vulnerabilities such as injection attacks.
   • Ensure that URLs and hostnames are validated to prevent malicious inputs.

2. Stability:

   • Consistent validation across frontend and backend will improve the stability of the application by ensuring that only valid data is processed.

3. Potential Bugs:

   • Be cautious of edge cases where valid inputs might be incorrectly flagged as invalid.
   • Thoroughly test the validation logic to ensure it handles all expected input formats.

Reference Similar Code

• Provider Configuration:
  • Refer to the ProviderAuthConfig interface in /keep-ui/app/providers/providers.tsx for existing configurations.
  • Ensure that new validation logic aligns with the existing structure.

Example Validation Schema

Here's an example of how you might define a validation schema using Yup:

import * as Yup from 'yup';

const providerInputSchema = Yup.object().shape({
  provider_name: Yup.string().required('Provider name is required'),
  url: Yup.string().url('Invalid URL format').required('URL is required'),
  host: Yup.string().matches(/^[a-zA-Z0-9.-]+$/, 'Invalid host format').required('Host is required'),
  port: Yup.number().min(1).max(65535, 'Invalid port number'),
  // Add other fields as necessary
});

Integrating Validation in ProviderForm

Update the validateForm function in ProviderForm to use the schema:

const validateForm = (updatedFormValues) => {
  try {
    providerInputSchema.validateSync(updatedFormValues, { abortEarly: false });
    setInputErrors({});
    return {};
  } catch (validationErrors) {
    const errors = validationErrors.inner.reduce((acc, error) => {
      acc[error.path] = error.message;
      return acc;
    }, {});
    setInputErrors(errors);
    return errors;
  }
};

[Anshgrover23]

/attempt #1327

Algora profile	Completed bounties	Tech	Active attempts	Options
@Anshgrover23	1 bounty from 1 project	JavaScript		Cancel attempt

[Apoorv012]

/attempt #1327

Options

• Cancel my attempt