Автор оригинала: FreeCodeCamp Community Member.
Этаном Райан
Опубликовано на Средняя публикация FreeCodeCamp был супер захватывающим.
Неделя Мой пост Был принят, я был занят работой и отправился из города на выходные, поэтому у меня не было возможности проверить носитель на несколько дней. Я получил некоторые почтовые уведомления и был взволнован, чтобы догнать ответы на Мой кусок Когда у меня есть шанс.
Хороший! Этот большой зеленый круг означал хлопалки! Новые подписчики! Люди, читающие мои слова и проверка моего приложения Generator! Это было потрясающе!
Затем я прочитал сообщения.
UH-OH Spaghetti-OS.
Нет Буэно.
Хм, имеет смысл.
Ики!
По правде говоря, я никогда не проверил вкладку сети в инструментах разработчика Chrome ¯ \ _ (ツ) _/¯.
Я трачу тонн времени в консоли браузера, читая мои журналы и предупреждения и ошибки, но не так много времени с другими вариантами инструментов разработчиков.
Эти комментарии были очень полезны и заставили меня понять, что у меня есть работа.
Подводя итоги до сих пор:
- Хорошие новости: Wordnerds Получил несколько новых пользователей!:)
- Плохая новость: Плохие парни все еще могут видеть список всех моих пользователей, а их адреса электронной почты:/
Всем, кто должен был сделать, чтобы найти все адреса электронной почты моих пользователей, был перейти к WordNerds.co, откройте консоль, щелкните по сети и перейдите к: https://word-nerds-api.herokuapp.com/users.
Они увидели это:
Прокручивая эту конечную точку API, я также заметил другую проблему, которая должна быть исправлена:
Ой Мой атрибут имени пользователя не было предела длины строки. Или если это сделало, этот предел был слишком чертовски высоким. Никто не должен быть так долго.
Например:
Jeez Louise. Как бы никто не забыл вставить в Военно-морское уплотнение Copypasta Чтобы войти в Wordnerds?!
Что такое хлопот. Я не хотел давать своим пользователям плохой пользовательский опыт, ожидая, что они не забыли копировать и вставлять все это copypasta.
Поля ввода имени пользователя подобны детям: они крепкие ограничения.
Так что у меня была какая-то работа.
- Я должен был защитить почтовые адреса моего пользователя. Опять Отказ Я думал, что я исправил это в прошлый раз, но мальчик я не прав.
- Мне пришлось ограничить, сколько персонажей может быть имена пользователя.
- Как отметили мои полезные комментаторы, я должен быть получен только абсолютно необходимые данные с бэкэнда с каждой конечной точки API. Я возвращал слишком много данных, что было плохо для обеспечения безопасности, так и для поведений о безопасности. Я должен был защитить свои пользовательские данные и Ограничьте количество возвращаемых данных для каждого вызова API.
Прохладное крутое круто. Работа Работа работа. Пора на работу.
Защита пользовательских данных
Моя первая и самая нажавшаяся проблема: убедиться, что я не регистрировал все мои пользователи и адреса электронной почты на конечную точку My/пользователей API API как JSON.
Были несколько способов исправить это, и после того, как некоторые мысли я решаю на самых очевидных, проще всего подхода, поэтому очевидно и легко, я был удивлен, что я не осознавал это раньше. Мне не было необходимости вообще для конечной точки API для всех пользователей. Таким образом, я мог бы просто удалить этот вызов API из интерфейса, а соответствующие рельсы метод на бэкэнде.
Мне понравилось показать общее количество пользователей в компоненте метаданных моего приложения. Это было просто простое число, но мне понравилось, наблюдая, как он медленно расти по размеру, так как больше людей подписались на моем сайте.
Поэтому я решил сохранить этот номер, и Устраните все, что пользовательские данные, отображаемые на конечной точке API.
Я сохранил API, точно так же на передней части, а на рубин на рельсах Backend я изменил метод индекса в UserController из этого:
def index users = User.all render json: usersend
к этому:
def index users = User.all.size render json: usersend
Теперь вместо того, чтобы возвращать массив, полный пользовательских объектов, содержащих имена пользователей и адресов электронной почты, моя бэкэнда просто возвращает номер.
ПЕРЕД:
ПОСЛЕ:
WHOA! Какая удивительная трансформация!
После этого изменения на бэкэнда у меня были незначительные изменения в интерфейсе. Вместо того, чтобы рендеринг Rupp.Users.length В моем компоненте метаданных я мог просто сделать Rupp.Users Отказ И я мог изменить это имя в состоянии контейнера из this.state.users к this.state.usercount Отказ Простые обновления.
Нет дополнительных пользовательских данных в моей общедоступной конечной точке API!
Ну, мои имена пользователей и адрес электронной почты, где все еще доступны через конечную точку/истории, поэтому я все еще имел это исправить. Но это можно было бы рассмотрено скоро.
Ограничение имена пользователя Длина
Мне не понравилось увидеть, что имя пользователя может быть до тех пор, пока Copypasta военно-морского уплотнения, и хотя это Nutso, что кто-то даже попытался сделать их имя, я рад, что они сделали, потому что теперь я мог бы это исправить!
Спасибо, кто бы ни сделал свое имя пользователя Change Dange. Я смотрю на тебя, Лорем Ipsum и Navy Seal Copypasta.
У меня уже были некоторые валидации на моем фабрике, чтобы убедиться, что пользователи входят или подписываются на Wordnerds имели имена пользователей и пароли, которые не были пустыми.
Моя регистрация Formifform – это элемент-компонент, который называемый Validate в моей функции рендеринга, а также в моей функции CANBESUBUBUT.
Я получил эту подтверждение функции из Этот блог FreeCodeCamp Post , вероятно, около года назад.
Моя оригинальная проверка функции выглядела так:
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}Я могу услышать некоторые из вас стонать, «UGG, вы сделали эту краткую функцию так долго и уродливы! Вы добавили имена переменных без причины!»
Конечно, я добавляю некоторые строки здесь, но мне теперь я могу быстро понять, что происходит в этой функции.
Теперь я просто добавляю еще несколько условий для удовлетворения. Кроме действительного имени пользователя, не пустое, я также проверяю, что оно не может быть длиннее 15 символов.
Я выбираю номер 15, потому что это то, что Twitter позволяет своим имена пользователя И если это достаточно хорошо для Twitter, это достаточно хорошо для Wordwards.
С моим новым условием для имени пользователей моя функция выглядит так:
validateFormInputs(name, password) { let nameIsInvalid = (name.length < 2 || name.length > 15) let passwordIsInvalid = (password.length === 0) let errorObject = { name: nameIsInvalid, password: passwordIsInvalid } return errorObject}Хороший! Теперь морское уплотнение Copypasta теперь может использоваться как имя пользователя на Wordnerds.
Извините фанаты Copypasta! Должен держать свои имена пользователей в или до 15 человек отсюда в.
Я понял, что это была хорошая практика, чтобы не допустить пробелов в именах пользователя. «Боб Смит» было бы плохое имя пользователя, как бы «». Я подумал, добавив простое регулярное выражение для моей функции, когда узнал о Атрибут входных шаблонов в HTML5. Прохладный! Не нужно добавлять что-либо к моей функции, я мог бы просто обновить свой поле формы JSX для имени пользователя.
Моя форма username internal frontend useend теперь выглядит следующим образом:
Что приводит к этому предупреждению в браузере:
Я сделал подобные обновления для моей регистрации, так как я сделал с моим логином, и включал некоторые проверки для адресов электронной почты.
Сладкий, теперь мне просто приходилось убедиться, что в конечной точке нет никаких адресов электронной почты. До бэкэнда!
Ограничение данных, возвращенные для каждого вызова API
Бла бла бла, куча вещей на бэкэнде.
Я не делал хорошую работу или писать эти вещи вниз, потому что я пытался сделать это быстро, и когда это не удалось, я пытался это сделать.
Я продолжаю думать о способах улучшения того, какие данные возвращаются с моих конечных точек API, чтобы мое приложение было более безопасным и более масштабируемым.
Но чтобы обобщить, больше нет адресов электронной почты, не видимые в моей конечной точке API API!
Теперь у каждой истории есть user_name атрибут, в дополнение к user_id атрибут, но не доступны дополнительные адреса электронной почты через API.
Аргумент может быть сделан, что я все еще обнаружив имена пользователей моего приложения, и что я не должен этого делать. Но я отношусь к этим имена пользователям как публичную информацию. Пользователи могут выбрать свои имена пользователей, чтобы они были до них, как открытие они хотят быть в своем выборе имени пользователя. Это может быть Richat123fakest, или он может быть Batman6669. Кто я должен судить, что пользователи моего приложения выбирают как их имена пользователей? Это не так, как будто я раскрываю их чрезвычайно личные адреса электронной почты или что-нибудь! Я имею в виду, не больше.
Вывод: обратная связь хорошая
После создания этих обновлений безопасности я также сделал несколько более веселых изменений. Весело постоянно улучшать мое приложение, благодаря полезным отзывам от интернет-незнакомцев, а также независимо от функции ZANY, я думаю, сделает ее лучше.
Проверьте Wordnerds здесь, в Wordnerds.co Отказ
Спасибо за чтение, ботаники!
До следующего раза.