6주차 수요일 수업내용

이렇게해서 자신의 백엔드로 정보를 해킹해 갈 수도 있다... ㅠㅠ
물론이걸 방지하기위해 리약트 퀼에서 꺽새인식을못하게 되어는 있는뎁 먼가 불안불안..이름부터 데인저러스으

이런식으로 정보빼갈 수 있다(엄청 유명한 방법..) 해당 아이디의 게시물 조회하면
로그인후 보고있는 사람의 토큰이 찍혀버린다...

SetInnerHTML은 굉장히 위험하다
근데 다행히 막는 라이브러리가 있뎅~ DOMPurify

    dangerouslySetInnerHTML={{
          __html: DOMPurify.sanitize(data?.fetchBoard.contents),
        }}

돔퓨리파이로 이렇게 감싸서 하면!...또 프리랜더링 문제..

      {typeof window !== "undefined" && (
        <div
          dangerouslySetInnerHTML={{
            __html: DOMPurify.sanitize(data?.fetchBoard.contents),
          }}
        ></div>
      )}

요러면 끝!!
그럼 못빼가지롱~!

자주사용되는 해킹기법top10! owasp top 10
우리가자주 접하게되는 해킹기법은
XSS
CSRF 사이트를 가로질러 요청하는것
SQL-injection sql삽입

해킹

자세히 알려면 백엔드 관련 지식이 필요하다.
일단 핵심만!

브라우저에서 로그인화면에 들어가서 이메일 입력하는공간에 이메일 비밀번호 입력,로그인하기버튼누르면
벡에 로그인이라는 에이피아이 요청을 하게됨 그럼백에서 이메일비번 확인하고,
DB에서 맞는지 확인하고 벡에 맞다 하면 백에 엑세스토큰을 넘겨줌.

백엔드 로직이 다음과 같을때

sql인젝션은 비밀번호를 입력하지않고
ex) qqq||1===1 이런식으로 입력하면

로그인이 되어버릴것임...

다행히ORM을 사용하면 방지가 됨.근데 ORM 없던 옛날에는 요 인젝션으로 엄청 많은 사건들이있었다.
또는 ORM이 아닌 다른로직을 사용한 곳은 sql인젝션의 타깃이 될수이똬

CSS 하이드레이션 이슈 hydration issue

컨텐츠색을 블루로 했었는뎁...

프리랜더링하고 브라우저에 전달하고 하이드레이션~
프리랜더링 할때는 보통 태그 위치를 확인함(div,input,span)

현재 서버에서 프리랜더링 할때는 div갯수가 3개여서 빨강 초록,오랜지 이렇게 읽고 브라우저 갔는데
돔퓨리파이 때문에 브라우저에서는 4개가 되니까... 난몰롸 빨강 초록 오랜쥐~~ 이래버린것!
이것이 하이드레이션 이슈!

하이드레이션 이슈를 막기위해 서버에그릴때에도 태그 갯수를 맞춰준다!