It is believed that the front end is only one part of the job. We need a backend to store data, we need some DevOps. Oh, I also forgot about QA. There are legends about titans from the past who could single-handedly draw a design and launch a website. But here's the real story: we has the Great Idea, it won't work without a back-end, there are only front-end developers in the team, outsourcing is possible only in design, the deadline is too near. Just smile and wave... Or we will can realised the project uses front-end technologies only, cut comlicated things, dive into devops. Spoiler: we did it, the Bobuk-Bacek formula works, JavaScript is power. You will find out how I Love Front-end was launched, what was cut off by Occam's razor and why everyone hates the Mona Lisa. Audience and level. Full-stack developers and front-end developers who want to learn how to make back-end for front-end. Just curious guys. Level from junior to middle.

2. LITTLE
BIG
ПРОЕКТ

3. Акт 1
:
Нам нужна игра
Нажмите любую клавишу

4. 15 декабря 2020

5. Раз в год мы делаем конференцию
.
.
.

6. Все устали от онлайна, но мы хотим:
Затащить всех в онлайн на неделю
Наполнить чат людьми и сообщениями
Вернуть всех в день конференции

7. CTF

8. CTF — Capture The F
l
ag
Соревнования по поиску уязвимостей
Task-Based, Web
-
only
Каждая задача приносит флаг
Кто первым взял все флаги — победил

9. Привет. Предлагаю
сделать CTF на
Я💛фронтенд
А когда он будет?
В феврале
Я в деле!

11. Концепция
Делаем силами 2-3 человек + дизайнеры + редактор
Только фронтенд
-
технологии
Клиент: CRA
Бэкенд: Node.js
Задачи(загадки)
:
На чём быстрее

12. 7 февраля 2021

13. Ща бэк буду
деплоить первый
раз
Вроде работает,
начинаем пилить

14. Акт 2
:
Успеть за 2 недели
Нажмите любую клавишу

15. https:
/
/
twitter.com/bobuk/status/636252417089212416

16. Метод Микеланджело

18. DevOps
Хостинг: VPS (так привычнее)
Флоу разработки: Trunk Based Development (так быстрее)
Автоматизация: GitHub Actions (так дешевле)
Демонизация Node.js: PM2 (так проще)
SSL
:
Certbot (быстро и бесплатно!)

19. Автоматизация и тесты!

20. @bluecoders
William Erhel

21. Монорепозиторий
Шеринг контрактов
Общий конфиг
Единовременный деплой
Простота локальной разработки

22. Монорепозиторий это просто! (Папочки и никакого тулинга)
./backend
./frontend
./tasks
./nginx
:
)

23. Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}

24. Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}

25. Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}

26. Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}

27. Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}

28. Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}

29. Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}

31. Фронтенд
Каждый уровень — SPA
Выдача заданий
Проверка флагов

32. Бэкенд
Выдача нужного уровня (и защита от читерства)
Проверка флагов
Логирование
Метрики

34. Уровень (дешёвое решение)
Независимое SPA
Не знает о текущем состоянии приложения
Не знает о пользователе
Бизнес
-
логика на сервере

35. Борис
Решил все задачи первый
Богдан
Получил ссылку от Бориса
на последний уровень
Никаких состояний в URL

36. Защита
Все уровни выдаются по одному URL (корневому)
На одном URL выдаются разные SPA
Сервер решает, какой index.html отдать
Перескочить между уровнями подменой URL невозможно

37. Где будем хранить состояние?
В базе данных — дорого
:
(
Делать авторизацию — долго
:
(
Cookie — дёшево и быстро! =)

38. Борис
Решил все задачи первый
Богдан
Получил cookie от Бориса
и попал на последний
уровень
Cookie легко сломать

39. Решение в лоб
Хранение отпечатка браузера — дорого и хрупко
:
(
Мусорные Cookie
-
обманки
Cookie
-
метка и запись в логах

40. @Get('')
getLevel(@Req() req: Request, @Res() res: Response) {
const levelCookie = req.cookies[LEVEL_COOKIE];
const userCookie = req.cookies[USER_COOKIE];
if (!userCookie) { res.cookie(USER_COOKIE, uuidv4()); }
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/index.html`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})
}
Бизнес
-
логика выдачи уровня

41. @Get('')
getLevel(@Req() req: Request, @Res() res: Response) {
const levelCookie = req.cookies[LEVEL_COOKIE];
const userCookie = req.cookies[USER_COOKIE];
if (!userCookie) { res.cookie(USER_COOKIE, uuidv4()); }
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/index.html`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})
}
Бизнес
-
логика выдачи уровня

42. @Get('')
getLevel(@Req() req: Request, @Res() res: Response) {
const levelCookie = req.cookies[LEVEL_COOKIE];
const userCookie = req.cookies[USER_COOKIE];
if (!userCookie) { res.cookie(USER_COOKIE, uuidv4()); }
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/index.html`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})
}
Бизнес
-
логика выдачи уровня

43. @Get('')
getLevel(@Req() req: Request, @Res() res: Response) {
const levelCookie = req.cookies[LEVEL_COOKIE];
const userCookie = req.cookies[USER_COOKIE];
if (!userCookie) { res.cookie(USER_COOKIE, uuidv4()); }
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/index.html`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})
}
Бизнес
-
логика выдачи уровня

44. @Get('')
getLevel(@Req() req: Request, @Res() res: Response) {
const levelCookie = req.cookies[LEVEL_COOKIE];
const userCookie = req.cookies[USER_COOKIE];
if (!userCookie) { res.cookie(USER_COOKIE, uuidv4()); }
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/index.html`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})
}
Бизнес
-
логика выдачи уровня

45. @Get('')
getLevel(@Req() req: Request, @Res() res: Response) {
const levelCookie = req.cookies[LEVEL_COOKIE];
const userCookie = req.cookies[USER_COOKIE];
if (!userCookie) { res.cookie(USER_COOKIE, uuidv4()); }
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/index.html`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})
}
Бизнес
-
логика выдачи уровня

46. @Get('')
getLevel(@Req() req: Request, @Res() res: Response) {
const levelCookie = req.cookies[LEVEL_COOKIE];
const userCookie = req.cookies[USER_COOKIE];
if (!userCookie) { res.cookie(USER_COOKIE, uuidv4()); }
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/index.html`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})
}
Бизнес
-
логика выдачи уровня

47. Статика (классический вариант)
ctf.ilovefrontend.ru
Node.js
SSR HTML
FS
JS, CSS, etc.
Nginx

48. @Get('static/:type/:f
i
lename')
getStatic(
@Res() res: Response,
@Param('type') type: string,
@Param('f
i
lename') f
i
lename: string
) {
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/static/${type}/${f
i
lename}`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})}
Статика (наш случай)

49. @Get('static/:type/:f
i
lename')
getStatic(
@Res() res: Response,
@Param('type') type: string,
@Param('f
i
lename') f
i
lename: string
) {
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/static/${type}/${f
i
lename}`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})}
Статика (наш случай)

50. @Get('static/:type/:f
i
lename')
getStatic(
@Res() res: Response,
@Param('type') type: string,
@Param('f
i
lename') f
i
lename: string
) {
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/static/${type}/${f
i
lename}`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})}
Статика (наш случай)

51. @Get('static/:type/:f
i
lename')
getStatic(
@Res() res: Response,
@Param('type') type: string,
@Param('f
i
lename') f
i
lename: string
) {
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/static/${type}/${f
i
lename}`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})}
Статика (наш случай)

52. @Get('static/:type/:f
i
lename')
getStatic(
@Res() res: Response,
@Param('type') type: string,
@Param('f
i
lename') f
i
lename: string
) {
const levelFolder = this.levelService.getLevelFolder(levelCookie);
const f
i
lepath = `${levelFolder}/static/${type}/${f
i
lename}`;
fs.access(f
i
lepath, fs.constants.F_OK, (err)
=
>
{
fs.createReadStream(f
i
lepath).pipe(res);
})}
Статика (наш случай)

53. API
/check
-
key Проверка отдельного флага
/check
-
level
-
done Проверка всех флагов уровня

54. Задания
Nginx
a.ilovefrontend.ru
b.ilovefrontend.ru
Задание B
HTML, CSS, etc.
Задание A
HTML, CSS, etc.

55. Задания
«Чистый» HTML/CSS
Логика на Express/Fastify (не интересно)
Логика на Nginx (быстро и дёшево!)

56. location / {
if ($arg_keyword = qwerty) {
return 302 /zbfg56ffh03445561hd.html;
}
try_f
i
les $uri $uri/ =404;
root /var/
w
w
w
/tasks/mona/mona
-
main;
}
«Serverless» на Nginx

57. location / {
if ($arg_keyword = qwerty) {
return 302 /zbfg56ffh03445561hd.html;
}
try_f
i
les $uri $uri/ =404;
root /var/
w
w
w
/tasks/mona/mona
-
main;
}
«Serverless» на Nginx

58. location / {
if ($arg_keyword = qwerty) {
return 302 /zbfg56ffh03445561hd.html;
}
try_f
i
les $uri $uri/ =404;
root /var/
w
w
w
/tasks/mona/mona
-
main;
}
«Serverless» на Nginx

59. map $http_user_agent $too_new {
default 1;
"~MSIE [1-9]." 0;
"~MSIE 10" 0;
"~rv:11.0" 0;
}
location / {
if ($too_new = 1) {
rewrite ^ /browser.html redirect;
}
}
Проверка браузера на Nginx (Вход только для IE)

60. map $http_user_agent $too_new {
default 1;
"~MSIE [1-9]." 0;
"~MSIE 10" 0;
"~rv:11.0" 0;
}
location / {
if ($too_new = 1) {
rewrite ^ /browser.html redirect;
}
}
Проверка браузера на Nginx (Вход только для IE)

61. Акт 3
:
Игровые механики
Нажмите любую клавишу

62. Задачи
Подсадить пользователя на крючок первых уровней
Не дать заскучать однообразными заданиями
Задержать прокачанных в CTF шустриков
Дать удовольствие от сложности

63. userService
authenticationService
authenticationService
userService
контент

69. Акт 4
:
Запуск и последствия
Нажмите любую клавишу

70. 20 февраля 2021

72. Самая дешёвая метрика — это логи
tail
-
f ctf
-
back
-
out.log
Наблюдаем в реальном времени
grep
-
r "flag" . | wc
-
l
Считаем взятия флага
this.logger.log(`user: ${userCookie} keys: ${keys.toString()}`);
Размечаем событие в логах

73. 27 февраля 2021

74. 384 раз
игра была пройдена
* На момент времени: 26 февраля, пятница, 20
:
45, 2021 год

75. Статистика прохождений по уровням

77. Какой доклад был самым интересным?
Разбор заданий Capture the flag и награждение победителей

78. Фронтендеры — вы невероятные!

79. Отдельное спасибо Никите Прокопову

80. {flag_see_you_space_cowboy}

81. Теперь питание компьютера
можно отключить