Как отзывы пользователей повысили безопасность моего приложения

Публикация в Медиуме freeCodeCamp была очень захватывающей.

На неделе мой пост был принят, я был занят на работе и уехал на выходные за город, поэтому у меня не было возможности проверить Medium в течение нескольких дней. Я получил несколько уведомлений по электронной почте и был очень рад узнать ответы на мою статью, когда у меня появилась такая возможность.

Отлично! Этот большой зеленый кружок означал хлопки! Новые подписчики! Люди читают мои слова и проверяют мое приложение для создания историй! Это было потрясающе!

Затем я прочитал сообщения.

Ой, спагетти.

Нет буэно.

Хм, имеет смысл.

Ой!

По правде говоря, я никогда не проверял вкладку «Сеть» в инструментах разработчика Chrome ¯ \ _ (ツ) _ / ¯.

Я провожу кучу времени в консоли браузера, читая журналы, предупреждения и ошибки, но не так много времени с другими параметрами инструментов разработчика.

Эти комментарии были очень полезны и заставили меня понять, что у меня есть над чем поработать.

Подведем итог:

Хорошие новости: WordNerds набирает новых пользователей! :)
Плохие новости. Плохие парни по-прежнему могут видеть список всех моих пользователей и их адреса электронной почты: /

Все, что нужно было сделать, чтобы найти адреса электронной почты всех моих пользователей, - это зайти на wordnerds.co, открыть консоль, нажать Сеть и перейти по адресу: https://word-nerds-api.herokuapp.com/users

Они увидят это:

Примечание. У моих первых нескольких пользователей не было адресов электронной почты, хранящихся в базе данных, потому что они подписались на WordNerds до того, как я сделал адреса электронной почты обязательными атрибутами с помощью аутентификации внешнего интерфейса.

Прокручивая эту конечную точку API, я также заметил еще одну проблему, которую необходимо исправить:

Ой. У моего атрибута имени пользователя не было ограничения на длину строки. Или, если это так, этот предел был чертовски высок. Ни у кого не должно быть такого длинного имени пользователя.

Например:

Боже Луиза. Как бы кто-нибудь не забыл вставить Копипасту морской печати, чтобы войти в WordNerds ?!

Какая неприятность. Я не хотел создавать неудобства для пользователей, ожидая, что они не забудут скопировать и вставить всю эту копипасту.

Поля ввода имени пользователя подобны детям: они жаждут ограничений.

Так что мне нужно было поработать.

Мне пришлось защитить адреса электронной почты моего пользователя. Еще раз. Я думал, что исправил это в прошлый раз, но, черт возьми, я ошибался.
Мне пришлось ограничить количество символов в имени пользователя.
Как отмечали мои полезные комментаторы, я должен получать только абсолютно необходимые данные из серверной части из каждой конечной точки API. Я возвращал слишком много данных, что было плохо как с точки зрения безопасности, так и с точки зрения производительности. Мне пришлось защитить свои пользовательские данные и ограничить объем данных, возвращаемых при каждом вызове API.

Классно круто круто. Работа Работа работа. Пора на работу.

Защита пользовательских данных

Моя первая и самая насущная проблема: убедиться, что я не записываю все имена пользователей и адреса электронной почты в конечную точку API / users в формате JSON.

Было несколько способов исправить это, и после некоторого размышления я решил выбрать наиболее очевидный и простой подход, настолько очевидный и легкий, что я был удивлен, что не понял этого раньше. Мне вообще не нужна была конечная точка API для всех пользователей. Поэтому я мог просто удалить этот вызов API из внешнего интерфейса и соответствующий метод Rails из внутреннего интерфейса.

Однако мне понравилось показывать общее количество пользователей в компоненте метаданных моего приложения. Это было простое число, но мне нравилось наблюдать, как оно медленно увеличивается в размерах по мере того, как все больше людей регистрируются на моем сайте.

Поэтому я решил оставить это число, и исключить все пользовательские данные, отображаемые в конечной точке API.

Я оставил вызов API точно таким же во внешнем интерфейсе, а в бэкэнде Ruby on Rails я изменил метод индекса в UserController следующим образом:

def index
   users = User.all
   render json: users
end

к этому:

def index
   users = User.all.size
   render json: users
end

Примечание: я мог бы использовать length или count вместо size, но size - лучший выбор, согласно этому сообщению StackOverflow.

Теперь вместо того, чтобы возвращать массив, полный пользовательских объектов, содержащий имена пользователей и адреса электронной почты, мой бэкэнд просто возвращает число.

ДО:

ПОСЛЕ:

Ого! Какая потрясающая трансформация!

После этого изменения в бэкэнде у меня были небольшие изменения во фронтенде. Вместо рендеринга props.users.length в моем компоненте метаданных я мог бы просто рендерить props.users. И я мог бы изменить это имя в состоянии контейнера с this.state.users на this.state.userCount. Легкие обновления.

Больше никаких пользовательских данных в моей общедоступной конечной точке API!

Что ж, мои имена пользователей и адреса электронной почты все еще были доступны через конечную точку / stories, так что мне все еще нужно было это исправить. Но скоро с этим можно будет разобраться.

Ограничение длины имени пользователя

Мне не нравилось видеть, что имя пользователя может быть таким же длинным, как и Navy Seal Copypasta, и хотя это безумие, что кто-то даже пытается сделать свое имя таким длинным, я рад, что они сделали это, потому что теперь я могу исправить эту проблему!

Спасибо, кто сделал ваше имя пользователя WordNerds безумно длинным. Я смотрю на вас, Лорем Ипсум и Военно-морской флот Копипаста.

У меня уже было несколько проверок в моем интерфейсе, чтобы убедиться, что пользователи, входящие в систему или подписывающиеся на WordNerds, имеют имена пользователей и пароли, которые не были пустыми.

Моя SignUpForm - это компонент с отслеживанием состояния, который вызывает проверку в моей функции рендеринга, а также в моей функции canBeSubmitted.

Я получил эту функцию проверки из этого сообщения в блоге freeCodeCamp, вероятно, около года назад.

Моя первоначальная функция проверки выглядела так:

validate(name, password) {
   return {
      name: name.length === 0, //true if username is empty
      password: password.length === 0 //true if password is empty
   }
}

Я решил реорганизовать эту функцию, сделав ее менее лаконичной, но также более понятной, чтобы я понял это сейчас и в будущем:

validateFormInputs(name, password) {
   let nameIsInvalid = (name.length === 0) //true if empty
   let passwordIsInvalid = (password.length === 0) //true if empty
   let errorObject = {
      name: nameIsInvalid,
      password: passwordIsInvalid
   }
   return errorObject
}

Я слышу, как некоторые из вас стонут: «Угу, ты сделал эту лаконичную функцию такой долгой и уродливой! Вы добавили имена переменных без всякой причины! »

Конечно, я добавляю здесь несколько строк, но теперь я могу быстрее понять, что происходит в этой функции.

Теперь я просто добавляю еще несколько условий, которые нужно выполнить. Помимо того, что действительное имя пользователя не является пустым, я также подтверждаю, что оно не может быть длиннее 15 символов.

Я выбрал число 15, потому что это то, что Twitter позволяет использовать свои имена пользователей, и если этого достаточно для Twitter, то для WordNerds вполне достаточно.

С моим новым условием для имен пользователей моя функция выглядит так:

validateFormInputs(name, password) {
   let nameIsInvalid = (name.length < 2 || name.length > 15)
   let passwordIsInvalid = (password.length === 0)
   let errorObject = {
      name: nameIsInvalid,
      password: passwordIsInvalid
   }
   return errorObject
}

Отлично! Теперь Копипаста морского котика больше не может использоваться в качестве имени пользователя в WordNerds.

Извините, любители копипасты! С этого момента ваши имена пользователей должны содержать не более 15 символов.

Я понял, что это хорошая практика - не допускать пробелов в именах пользователей. Боб Смит будет плохим именем пользователя, как и ». Я подумал о добавлении простого регулярного выражения в свою функцию, когда узнал об «атрибуте шаблона ввода в HTML5. Прохладный! Не нужно ничего добавлять к моей функции, я могу просто обновить поле формы JSX для имени пользователя.

Поле формы имени пользователя в моем интерфейсе React теперь выглядит так:

Что приводит к этому предупреждению в браузере:

Я сделал такие же обновления в своей SignUpForm, как и в LoginForm, и включил некоторые проверки для адресов электронной почты.

Отлично, теперь мне просто нужно было убедиться, что в моей конечной точке API / stories не отображаются какие-либо адреса электронной почты. На бэкэнд!

Ограничение данных, возвращаемых для каждого вызова API

Бла-бла-бла, куча всякой всячины на бэкэнде.

Я плохо справился и не записал все это, потому что я пытался сделать это быстро, а когда это не удалось, я пытался сделать это.

Я продолжаю придумывать способы улучшить данные, возвращаемые с моих конечных точек API, чтобы сделать мое приложение более безопасным и масштабируемым.

Но подведем итог: адреса электронной почты больше не отображаются в конечной точке API my / stories!

Теперь у каждой истории есть атрибут user_name в дополнение к атрибуту user_id, но адреса электронной почты больше недоступны через API.

Можно было бы привести аргумент, что я все еще раскрываю имена пользователей своего приложения и не должен этого делать. Но я рассматриваю эти имена пользователей как общедоступную информацию. Пользователи могут выбирать свои имена пользователей, поэтому им решать, насколько откровенными они хотят быть при выборе имени пользователя. Это может быть RichAt123FakeSt или batman6669. Кто я такой, чтобы судить, какие имена выбирают пользователи моего приложения? Не то чтобы я раскрываю их очень личные адреса электронной почты или что-то в этом роде! Я имею в виду, что больше нет.

Вывод: обратная связь хорошая

После внесения этих обновлений безопасности я также внес еще несколько забавных изменений. Приятно постоянно улучшать свое приложение благодаря полезным отзывам от незнакомцев в Интернете, а также благодаря любой забавной функции, которая, по моему мнению, сделает его лучше.

Ознакомьтесь с WordNerds здесь, на WordNerds.co.

Спасибо за чтение, ботаники!

До следующего раза.