본문 바로가기

컴퓨터보안/웹클라이언트15

XSS Filtering Bypass 풀이 아래는 풀이 방법들1. 이스케이프 시퀀스 사용 설명: "document" 문자열을 유니코드 이스케이프 시퀀스로 변환하여 필터링을 우회합니다. \u0064는 'd'를 의미합니다.2. 대체 문자 사용 설명: "location"과 "cookie" 문자열을 문자열 연결 방식으로 작성하여 필터링을 우회합니다.3. 윈도우 객체 사용 설명: 전역 객체인 "window"를 명시적으로 사용하여 document 객체에 접근합니다.4. this 객체 사용 설명: 현재 실행 컨텍스트의 "this" 객체를 사용하여 document 객체에 접근합니다.5. eval 함수 사용 설명: eval 함수로 문자열을 평가하여 실행함으로써 필터링을 우회합니다.6. iframe srcdoc 사용 설명: ifra.. 2024. 6. 19.
JavaScript와 jQuery에서 `this`의 동작 원리 및 콜백 함수 내에서의 변화 JavaScript에서 this 키워드는 함수가 호출될 때의 실행 컨텍스트(또는 문맥)를 나타냅니다. 그러나 this는 함수가 호출되는 방식에 따라 다른 객체를 참조할 수 있습니다. 특히 콜백 함수 내에서 this가 어떻게 달라지는지 이해하는 것은 중요합니다. 이번 포스트에서는 이를 쉽게 설명하고, 예제와 함께 콜백 함수와 this의 변화를 다루어 보겠습니다.1. JavaScript의 this 기본 동작this 키워드는 객체의 메서드 내에서 해당 객체를 참조합니다. 하지만 전역 함수나 콜백 함수 내에서는 다른 객체를 참조할 수 있습니다. 예를 들어보겠습니다.var myObject = { name: "My Object", sayName: function() { console... 2024. 6. 4.
jQuery의 비동기 처리 및 dom 조작 기본 개념 설명함수: 함수는 어떤 작업을 수행하는 코드 블록입니다.즉시 실행 함수 표현식(IIFE): 함수가 정의되자마자 바로 실행되는 특별한 함수입니다.매개변수: 함수가 실행될 때 외부에서 값을 받아오는 변수입니다.예시 코드(function($, window) { // 여기에 코드를 작성합니다.})(jQuery, window);이 코드의 목적이 코드는 특별한 함수(즉시 실행 함수)를 사용하여 작성되었습니다. 이 함수는 바로 실행되며, 두 개의 매개변수 $와 window를 받습니다.매개변수 설명$:$는 보통 jQuery라는 라이브러리를 의미합니다.jQuery는 웹 페이지를 쉽게 조작할 수 있도록 도와주는 도구입니다.보통 jQuery라고 쓰는 대신 $라고 쓰면 더 간단하고 코드가 짧아집니다.window:.. 2024. 6. 3.
자바스크립트, JQuery, Dom, Ajax개념정리 JavaScript와 jQuery의 차이점JavaScript와 jQuery 개요JavaScript기본 개념: 웹 페이지의 동적 동작을 구현하는 프로그래밍 언어입니다.사용 목적: 사용자와 상호작용, 웹 페이지의 콘텐츠 변경, 데이터 검증 등.jQuery기본 개념: JavaScript를 더 쉽게 사용하기 위해 만들어진 라이브러리입니다.사용 목적: DOM 조작, 이벤트 처리, 애니메이션, AJAX 작업을 간편하게 수행할 수 있도록 도와줍니다.DOM (Document Object Model)정의DOM: 웹 페이지의 구조를 나타내는 트리 구조로, HTML 요소들을 객체로 표현한 것입니다.목적: JavaScript를 사용하여 HTML 문서의 콘텐츠를 동적으로 변경할 수 있습니다.JavaScript로 DOM 조작//.. 2024. 6. 3.
데이터베이스 총정리(문법 비교) 기능RDBMS (SQL)MongoDBRedisCouchDB데이터베이스 생성CREATE DATABASEuse-PUT테이블/컬렉션 생성CREATE TABLEdb.createCollection--레코드/문서 삽입INSERT INTO, VALUESdb.collection.insertOneSETPOST, Content-Type, application/json레코드/문서 조회SELECT, FROM, WHEREdb.collection.findOneGETGET레코드/문서 업데이트UPDATE, SET, WHEREdb.collection.updateOne, {$set: {}}SETPUT, Content-Type, application/json, "_rev"레코드/문서 삭제DELETE, FROM, WHEREdb.collec.. 2024. 5. 20.
CouchDB 기초 문법 CouchDB 기본 개념NoSQL 데이터베이스: CouchDB는 문서 지향(NoSQL) 데이터베이스로, JSON 형식의 데이터를 저장합니다.RESTful HTTP API: 데이터베이스 작업을 HTTP 요청으로 수행합니다.MVCC (Multi-Version Concurrency Control): 데이터의 일관성을 유지하고, 충돌을 해결합니다.분산 데이터베이스: CouchDB는 데이터 복제와 분산을 지원하여 고가용성과 확장성을 제공합니다.설치 및 시작설치: CouchDB 설치 가이드를 참고하세요.서버 시작: 설치 후, CouchDB 서버를 시작합니다. 기본 포트는 5984입니다.Fauxton: 웹 기반의 관리 인터페이스인 Fauxton을 통해 CouchDB를 관리할 수 있습니다. 브라우저에서 http://1.. 2024. 5. 20.
Redis 기초 문법 Redis 기본 개념키-값 저장소: Redis는 데이터를 키-값 쌍으로 저장합니다.인메모리 데이터베이스: 모든 데이터가 메모리에 저장되므로 매우 빠릅니다.다양한 데이터 구조: 문자열, 리스트, 셋, 해시, 정렬된 셋 등을 지원합니다.퍼시스턴스 옵션: 데이터를 디스크에 저장할 수 있습니다.해시 필드란?해시(Hash)는 하나의 키 아래에 여러 필드와 값을 저장할 수 있는 데이터 구조입니다. 예를 들어, 사용자 정보를 저장할 때 해시를 사용하면, 사용자 이름, 이메일, 나이 등을 하나의 키에 여러 필드로 저장할 수 있습니다.Redis 설치 및 시작설치: Redis 설치가이드를 참고하세요.서버 시작:redis-server클라이언트 시작:redis-cli주요 명령어와 예제1. 문자열 (String)SET: 키에 .. 2024. 5. 20.
MongoDB 기초 문법 MongoDB 기초 문법기본 개념데이터베이스 (Database): 여러 컬렉션을 담고 있는 저장소컬렉션 (Collection): 여러 문서를 담고 있는 그룹 (테이블과 유사)문서 (Document): 하나의 데이터 단위 (행과 유사), BSON 형식으로 저장기본 명령어데이터베이스 선택 및 생성use mydatabase컬렉션 생성 및 문서 삽입db.users.insertOne({ name: "Alice", age: 25, email: "alice@example.com" })여러 문서 삽입db.users.insertMany([ { name: "Bob", age: 30, email: "bob@example.com" }, { name: "Charlie", age: 35, email: "charlie@.. 2024. 5. 17.
Cross Site Request Forgery (CSRF) ClientSide: CSRF이용자의 신원 정보가 포함된 쿠키는 일종의 서명과 같은 역할을 한다.이용자의 식별 정보가 포함된 쿠키는 클라이언트에서 보내진 요청이 이용자로부터 왔으며, 이용자가 동의했고, 따라서 요청에 이용자의 권한이 부여돼야함을 의미한다.사이트 요청 위조(Cross Site Request Forgery, CSRF)이용자를 속여서, 의도치 않은 요청에 동의하게 하는 공격이다.ex) 웹 페이지를 만들어 이용자의 입력을 유도해, 입력된 값을 은행 등의 사이트로 전송해 이용자가 동의한 것 같은 요청을 발생시킨다.웹 서비스는 쿠키나 세션을 사용해 이용자를 식별한다.이용자를 속여서, 의도치 않은 요청에 동의하게 하는 공격임의 사용자의 쿠키를 사용할 수 있다? -> 임의 이용자의 권한으로 웹 서비스의.. 2024. 5. 14.
ClientSide: XSS-2 배경 공부 URLSearchParams 로 URL 뒤에 복잡하게 붙은 파라미터를 쉽게 쪼갤 수 있다.ex. http://www.example.com?foo=1&bar=2 에서 {foo: 1, bar: 2} 와 같이 뒤에 붙은 파라미터를 쉽게 가져올 수 있다.URLSearchParams 는 URL 의 쿼리 스트링과 관련된 작업을 하는 유틸리티 메서드를 정의하는 인터페이스이다.(쿼리스트링(Query String) 이란 URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법이다. 웹개발에서 데이터를 요청하는 방식 중 주로 GET방식으로 데이터를 요청할 때 쓰이는 방법. URL주소뒤에 물음표(?)를 붙이고 key1=value1&key2=value2...방식으로 데이터를 요청한다.)웹 API로 .. 2024. 5. 13.
ClientSide: XSS(Cross-Site-Scripting (XSS)) XSS 이란?XSS는 클라이언트 사이드 취약점 중 하나로, 공격자가 웹 리소스에 악성 스크립트를 삽입해 이용자의 웹 브라우저에서 해당 스크립트를 실행할 수 있다.이런 식으로 이용자가 XSS 게시물에 접속하면 공격자가 임의로 삽입한 스크립트가 실행되어 쿠키 및 세션이 탈취될 수 있다.이 취약점은 SOP 보안 정책이 등장하면서 서로 다른 오리진에서는 정보를 읽는 행위가 이전에 비해 힘들어졌다. 그러나 이를 우회하는 다양한 기술이 소개되면서 XSS 공격은 지속되고 있다.XSS 발생 예시와 종류클라이언트는 HTTP 형식으로 웹 서버에 리소스를 요청하고 서버로부터 받은 응답, 즉 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여준다. 이 때, HTML, CSS, JS와 같은 코드가 포함된 게시.. 2024. 5. 10.
Same Origin Policy 과 Cross Origin Resource Sharing SOP와 CORS  Same Origin Policy의 오리진 (Origin) 구분 방법 이제 브라우저가 가져온 정보의 출처인 오리진 (Origin)을 어떻게 구분하는지 알아보겠습니다. 먼저, 오리진은 프로토콜 (Protocol, Scheme), 포트 (Port), 호스트 (Host) 로 구성됩니다. 구성 요소가 모두 일치해야 동일한 오리진이라고 합니다. https://same-origin.com/라는 오리진과 아래 URL을 비교했을 때 결과는 다음과 같습니다 URL결과이유https://same-origin.com/frame.htmlSame OriginPath만 다름http://same-origin.com/frame.htmlCross OriginScheme이 다름https://cross.same-orig.. 2024. 5. 10.
2. 문법 (자바스크립트) 01: 소스코드위치 자바스크립트는 기본적으로 HTML 문서의  사이에 위치 합니다.  1) html 내부 자바스크립트 2) 외부 JavaScript HTML 문서 외부에 별도의 파일을 생성하고 HTML 에서 불러와 사용하는 방식 //external.js 파일 function printDate() {   alert('hello world'); } 3) 소스파일 위치 결정 브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될때까지 브라우저 렌더링을 멈춤.  삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미치기 때문에 적절한 위치선정이 필요. 브라우저 렌더링에 방해가 될 수 있으며 무거운 스크립트가 실행되는 경우 오랫동안 .. 2024. 5. 10.
1. 자바 스크립트 개요(프레임 워크 이름 설명) 01: 자바스크립트란 ? 자바스크립트는 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당하게 됩니다. 02. Vue, Angular, React 자바스크립트가 현재 가장 널리 사용되는 분야는 프론트엔드 프레임워크 영역 입니다.  1) AngularJS 구글에서 만들었으며 MIT 라이센스로 누구나 무료로 사용 할 수 있습니다. 본격적인 자바스크립트 프론트엔드 프레임워크의 시초라 할 수 있으며 2010년 처음 발표 되었습니다. 2) React 페이스북에서 만들었으며 UI 라이브러리에 특화되어 있으며 재사용 가능한 UI 컴포넌트 생성을 지원 합니다 3) Vue.js Vue는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크로 다른 단일형 프레임워크와 달리 점진적으로.. 2024. 5. 10.
3. onload() + 이벤트와 DOM (자바 스크립트) [JAVASCRIPT] onload() : 웹 페이지가 로딩되었을 때 로딩된 이벤트에 맞춰 원하는 함수, 코드를 호출할 수 있도록 한다. 한번에 실행될 onload 메서드가 1개보다 많을 시 마지막 onload 메서드만 실행된다.  *window.onload전역 콜백 함수로 자바스크립트에 사용 시, 페이지 로딩 후 자동으로 실행이 된다.    - window 객체 뿐 아니라 원하는 객체가 로드되었을 때 실행될 코드를 설정할 수 있음 document.getElementById(“myFrame”).onload = function(){ //실행될 코드 }   아니면, 이벤트를 직접 연결할 수도 있음.window.addEventListener(‘load’, function(){ //실행될 코드 });  1. 창.. 2024. 5. 10.

티스토리툴바