커뮤니티
유머/시간때우기
취업/이직
연애/스포츠
사회/문화
지식/경제
주식/재테크
컴퓨터/IT
코딩
회화
게임
질문답변
이벤트
공지사항
1:1문의
FAQnode와 typescript로 waf 웹 방화벽 개발 1편
1. 기본 아키텍처 설계
웹 방화벽(WAF, Web Application Firewall)은 웹 애플리케이션과 서버 사이에 위치하여 악의적인 트래픽을 탐지하고 차단하는 역할을 합니다. 웹 방화벽은 주로 다음과 같은 기능을 제공합니다:
입력 검증: SQL Injection, XSS 등의 공격을 방어합니다.
트래픽 분석: 요청을 실시간으로 분석하여 비정상적인 패턴을 차단합니다.
로그 기록 및 알림: 공격을 감지하고 로그를 기록하여 추후 분석할 수 있도록 합니다.
이러한 기능을 제공하는 웹 방화벽을 Node.js, TypeScript, MySQL을 사용하여 개발할 것입니다.
2. 개발 환경 설정
/my-web-firewall
│
├── /dist # 빌드된 JavaScript 파일들 (컴파일된 파일들)
│
├── /node_modules # 프로젝트의 의존성 모듈들
│
├── /public # 클라이언트 사이드 파일들 (대시보드 HTML, CSS, JS)
│ └── /dashboard.html # 대시보드 HTML 파일
│
├── /src # TypeScript 소스 파일들
│ ├── /middleware # 미들웨어 관련 파일들
│ │ └── firewallMiddleware.ts # SQL Injection, XSS 방어 미들웨어
│ ├── /models # 데이터베이스 모델 파일들 (선택 사항)
│ │ └── attackLogs.ts # 공격 로그 모델
│ ├── /routes # API 라우터
│ │ └── logs.ts # 공격 로그 관련 API 라우터
│ ├── app.ts # Express 앱 초기화 파일
│ └── server.ts # 서버 시작 및 Socket.IO 설정
│
├── .gitignore # Git에 포함하지 않을 파일/폴더 설정
├── package.json # 프로젝트 메타 정보 및 의존성 목록
├── tsconfig.json # TypeScript 컴파일러 설정
└── README.md # 프로젝트 설명서
```
2-1.프로젝트 폴더 구조 설명
`/dist`
- TypeScript로 작성된 코드가 컴파일되어 이곳에 저장됩니다.
예: `app.ts` → `dist/app.js`
`/node_modules`
- `npm install` 명령어로 설치된 라이브러리들이 여기에 저장됩니다.
`/public`
- HTML, CSS, JavaScript 파일들이 포함되며, `dashboard.html` 파일을 통해 실시간 공격 로그를 확인할 수 있습니다.
`/src`
- 기능별로 폴더를 나누어 관리합니다.
`/middleware`
- `firewallMiddleware.ts`: SQL Injection 및 XSS 방어 로직이 구현된 파일입니다.
`/models` (선택 사항)
- `attackLogs.ts`: 공격 로그를 데이터베이스에 저장하고 조회하는 모델 파일입니다.
`/routes`
- `logs.ts`: 공격 로그를 조회하는 API 엔드포인트를 제공합니다.
- `app.ts`: Express 앱을 초기화하고 미들웨어를 등록하는 파일입니다. 서버에 대한 설정을 포함합니다.
- `server.ts`: Socket.IO 설정과 서버를 실행하는 파일입니다.
`.gitignore`
`package.json`
- `npm install` 시 설치될 의존성 모듈들이 여기에 정의됩니다.
`tsconfig.json`
- TypeScript 코드를 JavaScript로 변환할 때의 동작을 제어합니다.
`README.md`
- 프로젝트를 처음 시작하는 사람들을 위해 실행 방법, 설정, 기능 등을 기록할 수 있습니다.
`public/dashboard.html`
- Socket.IO를 사용하여 서버에서 전달된 새로운 로그를 실시간으로 업데이트합니다.
3. 필수 의존성 설치
npm init -y
npm install express mysql2 body-parser
npm install typescript @types/node @types/express --save-dev
npm install socket.io
npm install express@latest
npm install @types/express@latest
npm install dotenv
npm install express-session
npm install multer
npm install @types/multer
npm install express-session
npm install cookie-parser
npm install cookie-parser
npm install --save-dev @types/express-session @types/cookie-parser
npm install express-rate-limit
```
4. TypeScript 설정 (tsconfig.json)
{
compilerOptions: {
target: ES6,
module: commonjs,
strict: true,
esModuleInterop: true,
skipLibCheck: true,
forceConsistentCasingInFileNames: true,
outDir: ./dist
},
include: [src/**/*.ts],
exclude: [node_modules]
}
```
5. 데이터베이스 설정
CREATE TABLE attack_logs (
id INT AUTO_INCREMENT PRIMARY KEY,
ip_address VARCHAR(255),
request_path VARCHAR(255),
attack_type VARCHAR(50),
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```
6. 환경 설정 (.env)
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=password
DB_NAME=waf_database
```
7. 서버 실행 및 테스트
npx tsc
node dist/app.js
```
8. 추가 기능 및 개선점
다양한 공격 패턴 추가: SQL Injection, XSS 외에도 다양한 공격 패턴(예: CSRF, 리버스 쉘, 버퍼 오버플로우 등)을 탐지할 수 있도록 필터를 확장합니다.
실시간 트래픽 분석: 공격을 실시간으로 모니터링하고 차단할 수 있는 시스템을 추가합니다.
알림 시스템: 공격이 감지되면 이메일이나 SMS로 알림을 보내는 기능을 추가할 수 있습니다.
로그 분석 및 리포팅: 수집된 로그를 분석하고 보고서를 제공하는 기능을 추가합니다.
9. 결론
위에서 제공한 기본적인 코드와 구성 요소들은 웹 방화벽을 구현하는 첫걸음에 해당합니다.
이를 바탕으로 점차적인 확장과 최적화를 통해 더욱 강력한 웹 방화벽 시스템을 만들 수 있습니다.