Hello Everyone!

I want to prevent Cross-site scripting in my React Native apps with doing some blacklist a special character that too dangerous if that character is inserted to my RealmDB

I do read the Documentation and find some APIs called .disallow(), .not(), and .invalid(), this APIs only validate one character or one word, it's mean if I inserting a value that has the special character in the blacklist like "<script>" the validation will be passed but if I only insert "<" the validation will be error, I can't find another API that blacklists only special character "<", ">", "{", "}" and allow everything else, I really hope Joi has an API like .pattern() but it's Reversed. I hope someone has a cool own method and integrated with Joi, that will be so helpful if sharing in here

I have little example code with Joi Browser, hope will the same with Joi NodeJS too

var dataObj = {
  userNotes: '<script>' // "<" and ">" is on the blacklist
};

var validationSchema = {
  userNotes: Joi.string().trim().required().invalid('<', '>', '{', '}')
};

Joi.validate(dataObj, validationSchema).then(function(success) {
  console.log(success); // Will be success not Error
}).catch(function(error) {
  console.error(error)
});

<script src="/[email protected]/dist/joi-browser.min.js"></script>

Hello Everyone!

I want to prevent Cross-site scripting in my React Native apps with doing some blacklist a special character that too dangerous if that character is inserted to my RealmDB

I do read the Documentation and find some APIs called .disallow(), .not(), and .invalid(), this APIs only validate one character or one word, it's mean if I inserting a value that has the special character in the blacklist like "<script>" the validation will be passed but if I only insert "<" the validation will be error, I can't find another API that blacklists only special character "<", ">", "{", "}" and allow everything else, I really hope Joi has an API like .pattern() but it's Reversed. I hope someone has a cool own method and integrated with Joi, that will be so helpful if sharing in here

I have little example code with Joi Browser, hope will the same with Joi NodeJS too

var dataObj = {
  userNotes: '<script>' // "<" and ">" is on the blacklist
};

var validationSchema = {
  userNotes: Joi.string().trim().required().invalid('<', '>', '{', '}')
};

Joi.validate(dataObj, validationSchema).then(function(success) {
  console.log(success); // Will be success not Error
}).catch(function(error) {
  console.error(error)
});

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/joi-browser.min.js"></script>

• javascript
• react-native
• realm
• xss
• joi

• @mplungjan Sorry, the example has been added now – Firmansyah Commented Sep 17, 2020 at 9:15
• Can you add an example that fails your requirements? Or would you allow <script> but not < – mplungjan Commented Sep 17, 2020 at 9:19
• @mplungjan actually I am trying to prevent a user from inserting an HTML tag or a JSON Syntax to my RealmDB, But also I don't wanna use another module like sanitize-html if it's that Possible with only use Joi – Firmansyah Commented Sep 17, 2020 at 9:30

3 Answers 3

Custom validators are fine, but if you are only testing for a regex, you can make your life easier and use string.pattern

first_name: Joi.string().required().regex(/[$\(\)<>]/, { invert: true }),

this rule will throw an error if you have $,(,),<,> in your first_name.

If you omit { invert: true } option, it will require you to have $,(,),<,> in your first_name, which nobody should. I suspect that would make someone's life very hard in the 21st century and beyond.

Documentation

https://joi.dev/api/?v=17.3.0#stringpatternregex-name--options---aliases-regex

Joi has built-in validators to allow only strings and numbers in string. see the sample schema below for usage example:

 const schema = Joi.object().keys({
   firstname: joi.string().alphanum().required(),
   lastname: joi.string().alphanum(),
  });
});

After reading the documentation for about 2 hours carefully, I found an API it's called .custom() it allows you to create your own validation plus a custom error message too. Remember it's only working for Joi NodeJS NOT joi-browser

Here a little example code

import Joi from 'joi';

/**
 * Blacklist special character
 * "<", ">", "{", "}"
 * you can add more just inside "[]" in myRegexPattern
 */

// I use regex for my own Joi validation
// This regex will find anything character inside "[]" in the string
// I don't know it's good or bad Regex
// PLEASE FIX THIS if it's bad Regex
const myRegexPattern = new RegExp(/^.*[<>{}].*$/s);

// This string is very bad for my React Native apps
const userInputValue = "<Button onPress={() => alert('Whoops!')}></Button>";

// Now test it with Joi
const validationSchema = Joi.string().custom((value, helpers) => {
    // if true Joi will be throw an error with code "any.invalid"
    // The "code" NOT a "message" error
    return myRegexPattern.test(value) ? helpers.error('any.invalid') : value
}).messages({
    // errorCode: errorMessage 
    'any.invalid': "Whooaaa! That's a Bad String"
});

// It will be resulting an error and that's what i wan to
// because that input value is soo bad
validationSchema.validateAsync(userInputValue)
.then(success => {
    console.log(`Success value: ${success}`);
})
.catch(error => {
    console.error(error);
});

If anyone has a better answer just post it, it will be so helpful