React 교과서 chapter03(JSX)

JSX

챕터2 까지의 Element 생성은 React의 createElement 함수에 각각의 인자를 넣는 방식으로 개발을 하였다.
해당 Element가 적고 복잡하지 않다면 크게 문제가 없지만 복잡해질 수록 가독성이 떨어진다는 단점이 있다.
이를 보안하기 위한 것이 JSX이다.
JSX는 기존의 HTML태그를 사용하는것과 매우 유사하다.

JSX 방식

class HelloWorld extends React.Component {
  render() {
    return (
      <h1>hello world</h1>
    )
  }
}

const el =document.getElementById('content')
var root = ReactDOM.createRoot(el)

root.render(
  React.createElement(HelloWorld, null)
)

JSX의 설치

1. npm init: pagkage.json 생성
2. package.json에 babel 추가:
   "barbel": {
   "presets": [
   "@babel/preset-env",
   "@babel/preset-react"
   ]
   },
3. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react: 설치

JSX의 컴파일

.\node_modules.bin\babel .\jsx -o .\js\script-compield.js
jsx 디렉토리의 모든 파일을 js디렉토리의 script-compield.js로 변환

.\node_modules.bin\babel .\jsx -o .\js\script-compield.js -w
-w 옵션은 해당 파일의 변경을 감지하여 자동 빌드

index.html 소스 수정

<script src="./js//script-compield.js" type="text/javascript">

JSX의 변수의 출력

class DateTimeNow extends React.Component {
  render () {
    let dateTimeNow = new Date().toLocaleTimeString()
    return <span>Current Time is : {dateTimeNow}... </span>
  }
}

JSX의 속성 사용

class Profile extends React.Component {
  render () {
    return <a href={this.props.url}>{this.props.userName}</a>
  }
}


const el =document.getElementById('content')
var root = ReactDOM.createRoot(el)

root.render(
  <div>
    <HelloWorld></HelloWorld>
    <DateTimeNow></DateTimeNow>
    <Profile url="http://www.naver.com" userName="김만기"></Profile>
  </div>
)

JSX의 메소드 사용

class Profile2 extends React.Component {
  getUrl() {
    return 'http://www.naver.com'
  }
  render () {
    return <a className="block" href={this.getUrl()}>{this.props.userName}</a>
  }
}

https://github.com/Kmmanki/react_note/tree/master/chapter03

게시판 목록

user ID가 다른 글을 읽으면 목록 페이지에서 alert

Request, Response 분석

게시판 읽기의 분석 결과 추가적인 js를 발견하지 못함

하지만 게시판의 update에서 게시판 id를 임의로 전달 한 결과  exit 처리가 안되어 있음

게시판 접속

글쓰기 버튼이 없는 것을 확인 

관리자의 아이디가 admin인 것을 확인

게시글이 작성된 것을 확인

Request, Response 분석

분석 결과 주석 처리된 버튼이나 js를 발견 할 수 없었음

Guessing 공격

notice_read.php: 글 읽기

notice_list.php: 글 목록

notice_????.php: 글 ???

notice_write.php : 글 작성?

로그인 화면

Reqeust, Response 분석

URL 생성을 난독화가 된 것을 확인 하지만 admin 파라미터의 입력을 변조하면 정상적인 url을 전달 받을 수 있을 듯 하