1-6) JavaScript DOM, BOM

백준 (https://www.acmicpc.net/) -> 단계별로 풀어보기 로 언어에 대한 이해도 높힐것.

백준 하루에 최소 10문제 풀 수 있도록 노력.

생활코딩 자바스크립트 강의 (https://opentutorials.org/course/743/) 들어서 부족한 내용 보충할 수 있도록.

해킹관련 : https://www.net-force.nl

  https://www.hackerrank.com/

자바스크립트 객체를 이용해서 html 객체 관리하는 방법에대해 간략하게 알아보도록 하자.

자바스크립트에서는 DOM, BOM 이 두 모델을 이해하는것이 매우 중요하다.

DOM(Document Object Model 의 약자)

 - 문서에 대한 모든 내용을 담고있는 객체. 도큐먼트에 관련 된 내용 모두

 - 문서 즉 열려진 페이지에 대한 정보를 따로 객체화 시켜서 관리함

BOM(Brouser Object Model 의 약자)

 - 브라우저에 대한 모든 내용을 담고있는 객체. 브라우저에 관련 된 내용 모두

 - 뒤로가기, 북마크, 즐겨찾기, 히스토리, URL정보 등..

 - 브라우저가 가지고 있는 정보를 따로 객체화 시켜서 관리함

모든 내용은 https://www.w3schools.com/js/ 을 바탕으로 작성하였다.

1. DOM (Document Object Model) : 문서에 대한 모든 내용을 담고있는 객체. 도큐먼트에 관련 된 내용 모두를 객체화 하여 관리 가능하다.

 - 자바스크립트로는 객체화 된 모델을 이용하여 동적 HTML을 제어할 수 있다.

 - elements(요소) 에 대한 접근을 통해 HTML의 내용을 변경 할 수 있다.

 - CSS (style) 의 내용 또한 변경 가능하다.

그중 짚고 넘어갈 부분은 '요소(element)에 대한 접근' 이다.

 - getElementsByTagName

 - getElementsById

 - getElementsByClassName

위 세가지에 대해 알아보자.

# h1 요소에 대해서 getElementsByTagName 을 이용해 접근이 가능하다.

태그를 사용해서 정보를 가져 올 수 있다는 얘기이다.

document 객체를 이용하면 직접 문서의 원소를 배열로 가져와서 이용이 가능.

# 자바스크립트는 현재 열려진 정적인 문서를 동적으로 제어하기 위해 만들어 졌다고 할 수 있다.

따라서 h1[0] 에 저장해둔 현재 정보를 변경 및 수정하는것이 가능하다.

# 속성을 제외 및 수정 해 주는것도 가능하다.

이미 document 객체를 이용해 정보를 가져왔으므로, 속성이 무엇인지 확인 및 새로 설정을 해주어 변경까지 가능하다.

이런 내용을 event랑 결합시키면 더 동적으로 제어가 가능하다. (event : 글로벌 속성)

# https://www.w3schools.com/tags/ref_eventattributes.asp

먼저, HTML의 event속성을 확인해보자.

# <script> ... </script> 사이에 자바스크립트 문법을 이용해서 함수(mouse_over(), mouse_out())를 삽입하고, 적용시킬 부분(h1)에 

event를 적용시켜주면 된다. 

# 내용을 변경 및 색상까지 변경할 수 도 있다.

지금까지 확인해본 내용들을 보면 극히 일부분에 불과하다. 

따라서 자바스크립트, HTML에 깊이있게 공부를 해둬야 다양한 공격이 가능하다.

블로그에서 제공하는 우클릭방지 이런것들도 굳이 프로그램을 설치하거나 할 필요가 없다.

어짜피 자바스크립트로 작성된 페이지는 코드를 가져와서 브라우저에서 실행시키는 것 이기 때문에,

개발자모드에서 해당 코드만 수정해주면 간단하게 우회가 가능하다.

# 티스토리에서 패션 브로그를 운영하시는 회원님의 페이지이다. 티스토리 내부에서 우클릭 방지 기능을 제공하는것으로 알고있다.

그러나 이런부분도 자바스크립트 특성을 이용해서 쉽게 우회가 가능하다.

# 개발자도구에서 

document.oncontextmenu = new Function ('return false');        //우클릭에 관련된 기능. false를 리턴함으로써 우클릭을 방지한다. document.ondragstart = new Function ('return false');          //드래그에 관련된 기능. document.onselectstart = new Function ('return false');

위 세가지 항목을 찾았다. 세 항목 모두 우클릭 또는 드래그를 통한 정보 수집에 관련된 기능인데

false 를 true 로 변경해주기만 하면 된다.

# 이러한 지식들은 기본적으로 언어에 대한 이해를 바탕으로 가능한 것이다.

따라서 인프라적인 부분이 가장 중요하다.

# history 객체는 BOM 에 대한것을 다룬다.

BOM 내부의 history, location 같은 특성을 이용하면 브라우저상의 조작이 가능하다.

콘솔창에 

history.back();                         //뒤로가기

location.href                           //현재 페이지 URL에 관련.

location.href = "https://www.naver.com"

입력시 현재의 위치가 변경된다.

# 위와같은 코드로 직접 입력받는 내용이 모두 페이지에 반영이 된다.

HTML과 JavaScript을 깊이있게 이해해야 다양한 공격수단을 준비 할 수 있다.