t-box를 직접 만들고, 부숴보고, 고친다

1. 브라우저사용자가 주소를 입력하고 화면을 보는 곳
2. 도메인 · DNS도메인을 실제 서버 IP로 바꿔줍니다 · 우리 서버가 아니라 인터넷에 있는 주소록
3. 웹 서버 · t-box 앱요청을 받아 처리하는 우리 프로그램 · HTTPS로 암호화되어 오갑니다
4. 데이터베이스파일 정보 · 사용자 · 감사 로그를 저장 · 만들고·읽고·고치고·지움(CRUD)
5. 파일 저장소실제 업로드된 파일을 보관

SSH로 접속했다면 터미널 창을 하나 더 열어 같은 VM에 한 번 더 접속하면 됩니다. 아래 ①②는 터미널 B에서, ③은 터미널 A에서 실행해요.

curl -fsSL https://claude.ai/install.sh | bash

sudo mkdir -p /var/www/html
sudo chown -R $USER /var/www/html

cd /var/www/html
claude

claude를 처음 실행하면 로그인 안내가 나옵니다. 안내대로 로그인한 뒤(또는 /login), 프롬프트 창에 한글로 요청을 입력하면 돼요. 터미널 B도 cd /var/www/html 해두면 편합니다.

sudo

“관리자 권한으로 실행”이라는 뜻이에요. 시스템 폴더를 만들거나 프로그램을 설치할 땐 권한이 필요해서 명령 앞에 붙입니다. 비밀번호를 물으면 강사가 알려준 걸 입력하세요 — 아래 ④에서 안 묻게 설정할 거예요.

sudo chown -R $USER /var/www/html

/var/www/html 폴더와 그 안의 모든 것(-R)의 소유자를 지금 나($USER)로 바꿉니다. 이래야 앞으로 sudo 없이도 그 폴더에서 자유롭게 파일을 만들고 지울 수 있어요.

첫 번째 바이브 코딩 연습이에요. 터미널 A(Claude Code)에 아래 프롬프트를 붙여넣어 명령어를 받아온 다음, 그 명령어를 터미널 B에 붙여넣어 직접 실행합니다.

지금 이 리눅스 계정이 sudo를 쓸 때 비밀번호를 묻지 않도록 설정하고 싶어.
교육용 실습 VM이고, 내가 관리자 권한을 가지고 있어.

- visudo로 문법 검사를 하면서 /etc/sudoers.d/ 아래에 파일을 만드는 방식으로 알려줘
- 내 계정 이름은 직접 확인해서 넣어줘 (whoami)
- 실행할 명령어를 복사해서 쓸 수 있게 알려주고, 설정이 잘 됐는지 확인하는 방법도 알려줘

명령은 네가 실행하지 말고, 내가 터미널에 붙여넣어 직접 실행할게.

받은 명령을 터미널 B에 붙여넣어 실행한 뒤, 아래로 확인해요. OK가 나오면 성공입니다.

sudo -n true && echo "OK" || echo "아직 비밀번호를 묻습니다"

nano /var/www/html/index.html

nano 안에서

기존 내용이 있으면 싹 지웁니다 (한 줄씩 지우려면 Ctrl+K). 그런 다음 아래 한 줄을 입력해요.

hello world

저장하고 나가기

Ctrl+O → Enter (저장) → Ctrl+X (종료).
nano의 저장은 O(WriteOut)예요. 화면 아래 도움말에도 ^O Write Out으로 표시됩니다. 이 VM의 nano에서는 Ctrl+S로 저장해도 되지만, 어디서나 통하는 건 Ctrl+O예요.
폴더는 아까 내 소유로 바꿔놔서 sudo 없이 편집돼요.

먼저 내 코드를 올려둘 저장소(repository)를 웹에서 직접 만듭니다.

Git 서버 주소https://git2.tla.so

1. 위 주소에 내 계정으로 로그인 (계정·비밀번호는 강사가 전달)
2. 오른쪽 위 ＋ → New Repository(새 저장소)
3. 이름은 tbox 로 입력 · 나머지는 기본값 그대로
4. README 추가나 초기화 옵션은 체크하지 않기 — 빈 저장소로 만들어야 우리가 올릴 때 충돌이 없어요
5. 만들고 나면 보이는 저장소 주소(https://... .git)를 복사 — ③에서 씁니다

Git 서버에 올릴 때는 계정 비밀번호가 아니라 액세스 토큰을 씁니다. 웹에서 한 번 발급받아 복사해 두세요.

1. 오른쪽 위 프로필 아이콘 클릭 → 설정
2. 왼쪽 메뉴에서 어플리케이션 → 액세스 토큰 관리 → 새 액세스 토큰 생성
3. 토큰 이름에 아무 이름이나 입력 (예: tbox)
4. 저장소 및 조직 액세스에서 모두(공개, 비공개 및 제한) 선택
5. 권한 선택 목록에서 repository 항목만 찾아, 드롭다운을 접근 불가 → 읽기와 쓰기로 변경
   나머지 항목(activitypub · issue · misc · user 등)은 접근 불가 그대로 두세요.
6. 맨 아래 토큰 생성 버튼 클릭
7. 화면 위에 뜬 토큰 문자열을 복사 — 이 화면을 벗어나면 다시 못 봐요

권한 선택 부분이 헷갈리기 쉬워요. 아래대로만 맞추면 됩니다.

/var/www/html에서 .env라는 파일을 만들어 내 계정 · 저장소 주소 · 토큰을 적어 둡니다. 이 값은 다음 단계에서 Claude Code가 읽어 자동으로 git을 설정해요.

nano /var/www/html/.env

GIT_USERNAME=student01
GIT_EMAIL=you@company.com
GIT_REPOSITORY=https://git2.tla.so/student01/tbox.git
GIT_TOKEN=여기에_발급받은_토큰_붙여넣기

네 줄의 오른쪽 값을 내 것으로 바꿔 저장(Ctrl+O → Enter → Ctrl+X로 종료). GIT_REPOSITORY엔 ①에서 복사한 저장소 주소, GIT_TOKEN엔 ②에서 복사한 토큰을 넣어요.

⚠ 토큰은 이 파일에만. 터미널 B에서 nano로 직접 입력하세요. AI 대화창(터미널 A)에는 절대 붙여넣지 않습니다.

/var/www/html/.env 파일에 GIT_USERNAME, GIT_EMAIL, GIT_REPOSITORY, GIT_TOKEN이 들어 있어.
git이 없으면 설치하고, 이 값들을 읽어서 git 초기 설정을 해줘:
- 현재 폴더를 git 저장소로 초기화하고 기본 브랜치를 main으로
- 사용자 이름(GIT_USERNAME)과 이메일(GIT_EMAIL) 설정
- 원격 저장소 origin을 연결하되, 인증이 되도록
  GIT_REPOSITORY 주소에 계정과 토큰을 넣은 형태로 설정해줘
- .env 파일은 절대 커밋되지 않게 .gitignore에 추가

앞으로 커밋 메시지를 제안할 때는 항상 한글로 써줘.
설정이 끝나면 커밋·푸시하는 명령만 알려주고, 커밋은 내가 직접 할게.

Claude Code가 설정을 끝내면, 이제 토큰이 이미 연결돼 있어서 push할 때 비밀번호를 안 물어봅니다.

터미널 B(명령어 입력용)에서 /var/www/html로 이동해 직접 커밋해 봅니다. 내 손으로 저장 지점을 만드는 감각을 익히는 단계예요.

git add .
git commit -m "헬로월드 페이지 완성"
git push -u origin main

두 번째부터는 git add . → git commit -m "..." → git push 세 줄이면 끝.

기술 이름이 낯설어도 괜찮아요. 지금 회사에서 쓰는 t-box가 실제로 이 조합으로 만들어져 있어서, 우리도 같은 재료로 만듭니다. 각각이 무슨 역할인지만 알면 충분해요.

실제 t-box는 여기에 Laravel이라는 도구까지 얹어서 만들어졌지만, 오늘은 순수 PHP로만 갑니다. 중간 도구 없이 코드가 하는 일이 그대로 보여야 뒤에서 “권한을 어디서 검사하는지” 같은 걸 직접 확인할 수 있거든요.

나는 개발 경험이 거의 없어.
PHP, PostgreSQL, nginx가 각각 뭔지
비유를 들어 아주 쉽게 설명해줘. 각각 3줄 이내로.

AI가 자꾸 취약점을 없애거나 시간이 너무 오래 걸리면, 강사가 미리 만들어 둔 완성본을 그대로 내려받아 실습해도 됩니다. 위 프롬프트들과 똑같은 구조·똑같은 취약점이라 이후 해킹 타임이 그대로 진행돼요.

cd /var/www
sudo rm -rf html
sudo git clone https://git2.tla.so/hardline7/t-box-sample.git html
sudo chown -R $USER /var/www/html
cd /var/www/html
cat README.md

README.md에 DB 만들기 · nginx 설정 · 실행 방법이 정리돼 있어요. 그대로 따라 하면 예시 파일 5개가 든 t-box가 바로 뜹니다.

공격해볼 대상이 있어야 하니, Admin으로 로그인해 파일을 5개 정도 업로드하세요. 접근 레벨을 섞어서 올리면 뒤 실습이 더 잘 보입니다.

1. public 파일 2개 — 누구나 볼 수 있는 자료
2. internal 파일 2개 — 사내용 자료
3. admin-only 파일 1개 — 관리자만 볼 수 있어야 하는 자료 (이게 뒤에서 “숨겼는데 보이는” 주인공이 됩니다)

파일 내용은 아무거나 좋아요. 메모장에 아무 글이나 적어 저장한 .txt 파일이면 충분합니다.

Employee에게는 삭제 버튼이 화면에서 숨겨져 있을 뿐, 버튼 자체는 브라우저 안에 그대로 있습니다. 숨긴 걸 다시 보이게 만들어 눌러봅니다.

1. Employee 계정으로 전환 → 목록에 삭제 버튼이 안 보이는 것 확인
2. F12를 눌러 개발자도구 열기 → Elements(요소) 탭 선택
3. 왼쪽 위 화살표 아이콘(Ctrl+Shift+C)을 켜고 파일 목록의 한 줄을 클릭 → 그 줄의 HTML로 이동
4. 그 근처에서 삭제 버튼 태그를 찾습니다. style="display:none"이나 hidden, 혹은 class="hidden"이 붙어 있을 거예요
5. 그 부분을 더블클릭해서 지우고 Enter → 화면에 삭제 버튼이 나타납니다
6. 나타난 삭제 버튼을 클릭 → 파일이 진짜로 삭제되는지 확인

<td class="actions">
  <a class="btn btn-ghost" href="api/download.php?id=3">받기</a>
  <button class="btn btn-danger js-delete" data-id="3"
          style="display:none">삭제</button>
</td>

// 삭제 버튼을 누르면 콘솔에 찍히는 서버 응답
{
  "ok": true,
  "deleted": "사내공지.txt",
  "by": "employee01 (Employee)",
  "note": "서버가 권한을 확인하지 않았습니다"
}

버튼을 못 찾겠다면, 콘솔에서 API를 직접 불러도 같은 결과가 나옵니다. 파일 ID(id=3)는 목록에 보이는 번호로 바꾸세요 — Network 탭에서 실제 삭제 요청 주소를 보면 알 수 있어요.

fetch("api/files.php?id=3", { method: "DELETE" })
  .then((res) => res.json())
  .then(console.log);

Employee 화면에는 public/internal만 보이지만, 개발자도구 Network 탭에서 api/files.php 응답을 열면 admin-only 파일 정보가 그대로 내려옵니다.

1. F12 → Network(네트워크) 탭 선택 → 페이지 새로고침(F5)
2. 목록에서 files.php 를 클릭 → Response(응답) 또는 미리보기 탭
3. 화면에 없던 admin-only 파일이 응답 안에 있는지 확인

{
  "user": { "name": "employee01", "role": "Employee" },
  "files": [
    { "id": 1, "original_name": "회사소개.txt",  "access_level": "public" },
    { "id": 3, "original_name": "사내공지.txt",  "access_level": "internal" },
    { "id": 5, "original_name": "급여명세_2026.txt", "access_level": "admin-only" }
  ]
}

파일명 또는 설명에 아래 값을 넣고 목록 화면으로 가면, 값이 글자가 아니라 코드로 실행되는지 확인합니다.

<script>alert('xss')</script>

<img src=x onerror="alert('xss')">

t-box 아래쪽 “URL로 파일 가져오기” 칸에 주소를 넣고, 옆의 검사 방식만 바꿔서 결과를 비교합니다.

• http/https만 허용
• DNS 해석 후 IP 검사 · 사설 IP·localhost·link-local 차단
• 리다이렉트 후 최종 주소 재검사
• 요청 시간 제한 · 응답 크기 제한
• 차단 이벤트를 감사 로그에 기록

• Employee가 삭제 API를 직접 호출해도 403으로 실패
• API 응답에서 권한 없는 파일이 빠짐
• XSS 입력값이 코드가 아니라 글자로 보임
• SSRF 위험 URL이 차단됨
• 차단 이벤트가 감사 로그에 남고, Admin은 정상 기능 유지