Web(1)

mwaah·2023년 9월 20일

EVISION

목록 보기

1/1

1) JavaScript의 DOM 객체

문서 객체 모델(DOM, Document Object Model): XML, HTML 문서에 접근하기 위한 인터페이스

Core DOM : 모든 문서 타입을 위한 DOM 모델
HTML DOM : HTML 문서를 위한 DOM 모델
XML DOM : XML 문서를 위한 DOM 모델




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 문서객체 모델(DOM)</title >
<script type= "text/javascript">
    
</script>
</head>
<body>
   <h1 id ="header_1" name= "" >HEADER-1 </h1 >
   <div >
      <h1 id = "header_2">HEADER-2</h1 >
   </div >
   <hr >
   <h1 id = "clock"></h1>
</body>
</html>

위 HTML 문서를 브라우저로 보면

JavaScript를 통해 동적으로 문서 객체 생성:

var header = document.createElement('h2'); 
// document 객체에 접근해 h2 태그 생성

var textNode = document.createTextNode('Hello DOM');
// document 객체에 TextNode를 생성하고 'Hello DOM' 스트링 넣어줌

header.appendChild(textNode);
// <h2> 태그에 자식노드 추가

document.body.appendChild(header);
// body 객체에 자식노드 추가: <h2> 태그 heade

전체 코드


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 문서객체 모델(DOM)</title >
<script type= "text/javascript">
    window.onload = function(){
       //1. 문서 객체 생성
       var header = document.createElement('h2'); //h2 태그를 생성해주는 것
       var textNode = document.createTextNode('Hello DOM');

       //2. 노드(요소/텍스트)를 연결.
       header.appendChild(textNode);

       //3. body 문서 객체에 header 문서 객체를 추가.
       document.body.appendChild(header);
    };
</script>
</head>
<body>
   <h1 id ="header_1" name= "" >HEADER-1 </h1 >
   <div >
      <h1 id = "header_2">HEADER-2</h1 >
   </div >
   <hr >
   <h1 id = "clock"></h1>
</body>
</html>

2) Write up

1) 검색창에 아무거나 검색
2) 개발자 모드에서 앞에서 친 내용 검색
3) 검색 내용이 img src 경로에 있는 것 확인
4) ><svg onload=alert(1)> 입력

3) XSS 공격 구문

" onclick=alert(1)//<button ' onclick=alert(1)//> */ alert(1)//

이외에는 아래 등등.