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로 비슷한 window.location.search는 현재 페이지의 쿼리 스트링을 불러올 수 있다.

HTML이란?
HTML은 Hypertext Makup Language의 약자이다.
HTML은 웹 페이지 및 웹 응용 프로그램의 구조를 만들기 위한 표준 마크업 언어이다.
HTML은 웹 브라우저가 이미지, 텍스트, 하이퍼 링크 등과 같은 페이지 요소를 표시하는 방법을 정의한다.

 

XML이란?
XML은 Extensible Makup Language의 약자이다.
XML은 사람과 기계가 읽을 수 있는 형식으로 문서를 인코딩하기 위한 규칙 집합을 정의하는 마크업 언어이다.
XML은 플랫폼 독립적인 마크업 언어이다.
XML은 데이터베이스, 프로그램 및 응용 프로그램, 모바일 응용 프로그램 등에서 다른 플랫폼간에 데이터를 교환하기 위해 사용된다.

 

HTML과 XML의 차이점
대소 문자 구분
HTML은 대소 문자를 구분하지 않는다. XML은 대소 문자를 구분한다.
태그
HTML은 미리 정의된 태그가 있다. 일부 태그에는 닫는 태그가 없다.
XML에서는 프로그래머가 자신만의 태그 집합을 정의한다. 사용된 각 태그를 닫아야 한다.
용법
HTML은 웹 페이지 구조를 개발하는데 사용된다. XML은 다양한 플랫폼간에 데이터를 교환하는데 사용된다.

문서 객체 모델(Document Object Model)

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있음.
DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식하고 처리함.

 

DOM 을 구성하는 기본 원칙
(1) 모든 HTML 태그는 요소(element) 노드
(2) HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
(3) HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드
(4) 주석은 주석(comment) 노드

 

웹 개발에서 번들링
그럼 웹 개발을 할 때 '번들링'을 한다고 하면 무슨 의미일까?
(참고로 웹 개발에서 번들링 = 빌드 라고 할 수 있다.)
사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위로 정의할 수 있다.
개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다.

 

번들링을 하는 이유
그냥 html, css, javascript로 웹 애플리케이션을 만들 수도 있지만 굳이 번들링을 하는 이유가 뭘까?

파일의 크기 문제 해결
코드를 '번들링'한다는 것은 단순히 묶기만 하는 것이 아니라 컴퓨터 파일을 '압축'하는 개념과 비슷하다.
번들 파일은 번들링을 거치지 않은 원본 프로그램 파일보다 크기가 작아지고 실행 속도, 로딩 속도 또한 빨라진다. 번들링을 하는 것은 성능 측면에서 무조건 이득이다!

애플리케이션 임의 조작 방지
압축한 파일을 받아와 압축해제 전까지는 파일을 조작할 수 없는 것처럼, 번들링된 웹 애플리케이션도 사용자가 임의로 조작할 수 없다. 번들링되지 않은 원본 코드에 사용자가 접근할 수 있다면, 컴퓨터를 잘 아는 사용자가 이를 원하는 대로 조작할 위험이 생긴다. (ex. 강의 안듣고 들은 것처럼 만들기 라던가..)

 

Javascript에서 변수는 기본적으로 '전역 범위'를 가지기 때문에 하나의 프로젝트 폴더에서 여러 개의 .js 파일이 있더라도 서로 변수를 공유하게 된다.
근데 여기서 변수를 중복 선언하거나 의도치 않은 값을 할당해 생기는 에러를 번들링 도구인 Webpack에서는 모듈 번들링으로 해결한다.

 

webpack이란?
2022년 현재 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들링 도구, 번들러이다.
webpack은 'javascript 애플리케이션을 위한 모듈 번들러'이다.

module bundler
HTML, CSS, Javascript 등의 자원을 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구
(여기서 모듈은 코드뿐만 아니라 애플리케이션에 필요한 이미지 파일과 기타 파일도 모두 포함한다.)

webpack.config.js라는 설정 파일을 직접 작성해서 내 입맛에 맞게 번들링이 가능하다.

 

CSS에서 가상요소 ::before, ::after (Pseudo-Element)란?
– 가상클래스(Pseudo-Class)는,별도의 class를 지정하지 않아도 지정한 것 처럼요소를 선택할 수 있습니다.
– 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,
존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능합니다

, ::after 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다.