"The little big project. From zero to hero in two weeks with 3 front-end engineers only" Andrey Melikhov
0 likes372 views
The document outlines the planning and execution of a Capture The Flag (CTF) event called 'little big проект акт 1', which takes place in December 2020 and aims to engage the online community with various frontend technology challenges. It details the design and architecture of the event, employing technologies such as Node.js and GitHub Actions for automation, and discusses game mechanics and user experience to keep participants engaged. The document also mentions the outcomes and analytics post-event, including statistics on completions and user interactions.
![Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-23-320.jpg)
![Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-24-320.jpg)
![Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-25-320.jpg)
![Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-26-320.jpg)
![Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-27-320.jpg)
![Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-28-320.jpg)
![Главный контракт — это файл конфигурации
{
"initialLevelName": "home.morging",
"levels": {
"home.morging": {
"keys": ["god", "plague", "hacker"],
"redirectURL": "/",
"folder": "level_1",
"nextLevel": "off
i
ce.afternoon"
},
.
.
.
}](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-29-320.jpg)
![@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);
})
}
Бизнес
-
логика выдачи уровня](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-40-320.jpg)
![@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);
})
}
Бизнес
-
логика выдачи уровня](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-41-320.jpg)
![@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);
})
}
Бизнес
-
логика выдачи уровня](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-42-320.jpg)
![@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);
})
}
Бизнес
-
логика выдачи уровня](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-43-320.jpg)
![@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);
})
}
Бизнес
-
логика выдачи уровня](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-44-320.jpg)
![@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);
})
}
Бизнес
-
логика выдачи уровня](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-45-320.jpg)
![@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);
})
}
Бизнес
-
логика выдачи уровня](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-46-320.jpg)
![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)](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-59-320.jpg)
![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)](https://image.slidesharecdn.com/meli-210608111634/85/The-little-big-project-From-zero-to-hero-in-two-weeks-with-3-front-end-engineers-only-Andrey-Melikhov-60-320.jpg)
"The little big project. From zero to hero in two weeks with 3 front-end engineers only" Andrey Melikhov
- 3. Акт 1 : Нам нужна игра Нажмите любую клавишу
- 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 недели Нажмите любую клавишу
- 18. DevOps Хостинг: VPS (так привычнее) Флоу разработки: Trunk Based Development (так быстрее) Автоматизация: GitHub Actions (так дешевле) Демонизация Node.js: PM2 (так проще) SSL : Certbot (быстро и бесплатно!)
- 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 шустриков Дать удовольствие от сложности
- 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. Отдельное спасибо Никите Прокопову
- 81. Теперь питание компьютера можно отключить