01 / NETWORK · ELEMENTS

브라우저 개발자 도구

설치 없이 Network, Application, Elements, Console을 순서대로 살펴봅니다.

Chrome에 내장 · 별도 도구 설치 불필요

실습 범위

이 사이트의 정상 요청 관찰부터 시작해 해당 도구 가이드에서 지정한 교육용 문제에만 적용하세요. 정상 요청을 먼저 기록하고 한 번에 입력 하나만 바꿔 보세요. 토큰·쿠키·FLAG 원문은 외부 도구나 공개 문서에 올리지 마세요.

설치·준비

Chrome 공식 다운로드 ↗ 설치 파일은 공식 제공처에서만 내려받으세요.

1. 브라우저 준비
Chrome이 이미 설치되어 있다면 개발자 도구를 따로 내려받을 필요가 없습니다. 설치가 필요하면 Chrome 공식 사이트에서 운영체제에 맞는 브라우저를 받으세요. 다른 Chromium 브라우저의 패널 이름은 조금 다를 수 있습니다.
2. 페이지에서 열기
실습 페이지를 연 뒤 Windows/Linux는 F12 또는 Ctrl+Shift+I, macOS는 Command+Option+I를 누릅니다. 페이지에서 마우스 오른쪽 버튼 → 검사(Inspect)로 열 수도 있습니다.

처음부터 따라 하기

01
Network를 먼저 열기
Network 탭을 연 상태에서 https://rokseclab.kr/web/basic/http의 GET 버튼을 누릅니다. 목록이 비어 있으면 탭을 연 뒤 페이지를 새로고침하거나 버튼을 다시 누르세요. Fetch/XHR 필터를 사용하면 실습 API를 쉽게 찾습니다.
02
요청과 응답 읽기
/api/web/basics/http 행을 클릭합니다. Headers의 Request Method·Status Code·Request Headers, Payload의 쿼리 또는 폼 데이터, Response의 JSON 본문을 순서대로 확인하세요. 리다이렉트가 있다면 Preserve log를 켜고 중간 응답까지 봅니다.
03
POST와 쿠키 비교
POST 버튼을 누른 뒤 새 항목을 엽니다. GET의 Query String Parameters와 POST의 Request Payload/Form Data 위치가 다른지 확인합니다. Application → Storage → Cookies에서 rsl_http_demo의 Path·SameSite·HttpOnly·만료를 확인하세요. 실제 계정 쿠키 값은 공유하지 마세요.
04
서버 원문과 DOM 구별
Network → Response는 서버가 보낸 응답 원문, Elements는 브라우저가 구성한 현재 DOM입니다. XSS 실습에서는 같은 문자열이 어느 문맥에 들어갔는지 비교합니다. Elements에 노드가 보이는 것만으로 스크립트 실행이 증명되는 것은 아닙니다.
05
Console로 오류 확인
Console의 JavaScript 오류와 로그를 봅니다. 출처를 모르는 코드를 Console에 붙여 넣지 마세요. HttpOnly 쿠키는 JavaScript document.cookie로 읽을 수 없지만 Application 패널에는 저장 속성을 확인할 수 있습니다.

성공하면 무엇이 보이나요?

Network에서 GET·POST의 요청 데이터 위치 차이
Response(원문)와 Elements(DOM)의 역할 차이
쿠키가 응답에서 저장되고 다음 요청에 붙는 조건

실습 기록

GET과 POST의 Network 화면에서 메서드·입력 위치·응답을 기록하고, 서버 원문과 DOM이 같거나 다른 이유를 한 문장으로 설명하세요.

막힐 때 확인하기

요청 행이 보이지 않음

Network를 열어 둔 채 버튼을 다시 누르고, 검색어나 Fetch/XHR 필터를 지운 뒤 확인하세요.

Payload 탭이 없음

요청 행을 먼저 선택하세요. 본문이 없는 GET은 Headers의 Query String Parameters에 값이 표시될 수 있습니다.

쿠키가 document.cookie에 없음

HttpOnly 속성이면 정상입니다. Application의 저장 정보와 Network 요청의 Cookie 헤더를 구분해 보세요.

공식 다운로드·설명서

다운로드와 사용법은 제공자의 공식 안내를 기준으로 확인하세요. 화면 명칭은 도구 버전에 따라 조금 바뀔 수 있습니다.

← 다른 도구 안내 보기

실습 범위

설치·준비

Chrome 공식 다운로드 ↗ 설치 파일은 공식 제공처에서만 내려받으세요.

1. 브라우저 준비

Chrome이 이미 설치되어 있다면 개발자 도구를 따로 내려받을 필요가 없습니다. 설치가 필요하면 Chrome 공식 사이트에서 운영체제에 맞는 브라우저를 받으세요. 다른 Chromium 브라우저의 패널 이름은 조금 다를 수 있습니다.

2. 페이지에서 열기

실습 페이지를 연 뒤 Windows/Linux는 F12 또는 Ctrl+Shift+I, macOS는 Command+Option+I를 누릅니다. 페이지에서 마우스 오른쪽 버튼 → 검사(Inspect)로 열 수도 있습니다.

처음부터 따라 하기

Network를 먼저 열기

Network 탭을 연 상태에서 https://rokseclab.kr/web/basic/http의 GET 버튼을 누릅니다. 목록이 비어 있으면 탭을 연 뒤 페이지를 새로고침하거나 버튼을 다시 누르세요. Fetch/XHR 필터를 사용하면 실습 API를 쉽게 찾습니다.

요청과 응답 읽기

/api/web/basics/http 행을 클릭합니다. Headers의 Request Method·Status Code·Request Headers, Payload의 쿼리 또는 폼 데이터, Response의 JSON 본문을 순서대로 확인하세요. 리다이렉트가 있다면 Preserve log를 켜고 중간 응답까지 봅니다.

POST와 쿠키 비교

POST 버튼을 누른 뒤 새 항목을 엽니다. GET의 Query String Parameters와 POST의 Request Payload/Form Data 위치가 다른지 확인합니다. Application → Storage → Cookies에서 rsl_http_demo의 Path·SameSite·HttpOnly·만료를 확인하세요. 실제 계정 쿠키 값은 공유하지 마세요.

서버 원문과 DOM 구별

Network → Response는 서버가 보낸 응답 원문, Elements는 브라우저가 구성한 현재 DOM입니다. XSS 실습에서는 같은 문자열이 어느 문맥에 들어갔는지 비교합니다. Elements에 노드가 보이는 것만으로 스크립트 실행이 증명되는 것은 아닙니다.

Console로 오류 확인

Console의 JavaScript 오류와 로그를 봅니다. 출처를 모르는 코드를 Console에 붙여 넣지 마세요. HttpOnly 쿠키는 JavaScript document.cookie로 읽을 수 없지만 Application 패널에는 저장 속성을 확인할 수 있습니다.