전체 글

「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 3. 데이터 구조(배열, 객체, 반복)

본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다. 웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다. 이번에는 JS의 데이터 구조, 배열과 객체를 간단하게 알아보겠습니다. 이를 활용하는 반복 구문도 함께 알아보도록 합시다. 배열(array) 연속된 데이터를 표현할 수 있는 구조로, 어떤 자료형이든 넣을 수 있습니다. 대괄호로 감싸서 배열임을 표현합니다. let array = []#배열 선언 let colors = ["red", "orange"] 자바스크립트에서 배열은 다른 언어에서의 리스트(list)와 ..

「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 2. 출력, 참과 거짓(truthy and falsy)

본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다. 웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다. 자바스크립트로 무언가 출력하기 개발자도구의 출력 기능 지금까지 브라우저의 콘솔을 통해 자바스크립트의 동작을 확인해 왔습니다. 저장된 값을 확인할 때 별도의 출력 함수 없이 단지 변수 이름을 입력하는 것만으로 결과를 확인할 수 있었습니다. 이는 자바스크립트에서 제공하는 기능은 아니고, 브라우저의 개발자 도구에서 지원하는 기능입니다. 개발자 도구의 콘솔은 전역 스코프(global scope)에서 실행되는 J..

「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 1. 원시 타입(Primitive type)

본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다. 웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다. 시작하기 전 헛소리 상대: "전공이 뭐예요?" 나: "산업보안학과예요." 상대: "...?" 나: ".. 컴퓨터공학과랑 비슷한데, 해킹 방어를 좀 더 많이 배워요." 상대: "오!! 그럼 해킹할 줄 아세요?!" 나: "아.. 학년이 낮아서 해킹까지는 안 배웠어요..." 사람을 만나서 학과 얘기를 하다 보면 무. 조. 건 위와 같이 대화가 흘러갑니다. 명색이 보안학과인데, 해킹을 할 줄 모른다니! 거의 9..

jekyll chirpy 설치 시 발생하는 오류 해결하기

chirpy 설치 후 초기 설정 진행 방법 jekyll 테마를 모아놓은 사이트에서 chirpy 테마가 마음에 들어서 설치했습니다. 그런데 로컬 저장소와 연동하기 위해 push하면 이런저런 오류가 발생해서 상당히 곤란했습니다. 사흘 정도를 오류 해결에만 몰두했는데, 해결법은 "매뉴얼대로 설치하기"였습니다. 아래의 chirpy 공식 매뉴얼을 따라 설치하면 대부분 문제가 해결되었습니다. https://chirpy.cotes.page/posts/getting-started/ 그런데 이 매뉴얼에는 큰 걸림돌이 있습니다. bash tools/init명령어의 수행입니다. 리눅스 환경에서만 동작하는 명령이라 원도우에서는 사용할 길이 없습니다. 이 명령을 실행하면 코드 및 템플릿 배포를 위해 존재하는 불필요한 파일을 삭..

웹 애플리케이션 정찰 - 서드파티 의존성 식별

이 글은 "웹 애플리케이션 보안 - 정찰, 공격, 방어 세 단계로 배우는 웹 애플리케이션 보안의 모든 것"을 읽고 공부한 내용을 정리한 글입니다. 서드파티 의존성 식별 웹 앱은 자체 개발 코드만으로 이루어지지 않는다. 다른 사람(서드 파티)이 제공하는 외부 코드도 포함한다. 이러한 서드파티 의존성(모듈 간의 협력)을 유심히 살펴보면 공격 경로로 활용할 수 있다. 클라이언트 측 프레임워크 검출 복잡한 UI를 직접 구축하기보다는 jQuery, Bootstrap 등의 프레임워크를 사용할 때가 많다. SPA 프레임워크 EmberJs, 앵귤러JS, 리액트, 뷰JS 등의 SPA 프레임워크는 저마다 DOM 요소를 관리하는 특별한 구문이 있다. 글로벌 객체를 가지고 있는 경우가 많아 버전을 쉽게 알아낼 수 있다. JS..

리액트 - 이벤트 속성

본 글은 를 참고해 공부한 내용을 정리한 글입니다. 이벤트 속성 모든 HTML 요소는 'on'으로 시작하는 이벤트 속성을 제공한다. 마우스 클릭이나 텍스트 입력이 이루어지면 '이벤트가 발생했다'라고 표현한다. 특정 이벤트가 발생하면 실행할 자바스크립트 함수를 지정하는 데 사용되는 것이 이벤트 속성이다. 이벤트 처리기 브라우저의 JS 엔진은 Event 타입을 제공한다. 이벤트의 대상이 될 수 있는 객체는 EventTarget 인터페이스의 addEventListener, removeEventListener, dispatchEvent라는 세 가지 메서드를 구현한다. addEventListener는 이벤트 처리기를 추가하는 메서드이다. document.getElementById('root')?.addEventL..

웹 애플리케이션 정찰 - API 분석

이 글은 "웹 애플리케이션 보안 - 정찰, 공격, 방어 세 단계로 배우는 웹 애플리케이션 보안의 모든 것"을 읽고 공부한 내용을 정리한 글입니다. API 분석 웹 애플리케이션의 구조를 탐색할 때, 다시 말해 맵을 만들 때 서브도메인 탐색에 이어 두 번째로 수행해야 하는 단계는 API 찾기이다. 네트워크에 API가 노출되는 이유를 이해하면 API가 어떤 목적으로 사용되는지 파악할 수 있다. 엔드포인트 탐색 오늘날 웹 앱은 대부분 REST API 구조를 따른다. 개발자 도구를 사용해 네트워크 요청을 분석하면 API가 어떤 방식으로 설계되었는지 파악할 수 있다. REST API는 다음과 같은 특징이 있다. 요청 URL은 리소스를 나타내고 URI 경로 구분 기호('/')를 사용하여 리소스를 구성한다. URL 마..

웹 애플리케이션 정찰 - 서브도메인 찾기

이 글은 "웹 애플리케이션 보안 - 정찰, 공격, 방어 세 단계로 배우는 웹 애플리케이션 보안의 모든 것"을 읽고 공부한 내용을 정리한 글입니다. 서브도메인 찾기 API 엔드 포인트를 테스트하기 이전에 도메인 구조에 익숙해져야 한다. 웹 애플리케이션은 단일 도메인으로 서비스하지 않는다. 서브도메인을 찾아내 기록하는 것은 웹 애플리케이션 정찰의 첫 단계이다. 우리가 궁금한 것은, "도메인이 인터넷에 연결되어 있을텐데, 이 인터넷에 액세스할 수 있는 다른 서버도 갖고 있는가?"이다. 그러므로 서브도메인 탐색을 통해 아직 방어가 덜 된 쉬운 타깃을 찾는다. API와 end point API(Application Programming Interface)는 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙..