2021년 3월 18일 복기

Ji Taek Lim·2021년 3월 18일
0
post-thumbnail

chatterbox client

https://dev-seolleung2.netlify.app/COMONGUS/comong-chatterbox-client/

Running a XSS Attack + How to defend

https://www.youtube.com/watch?v=oEFPFc36weY

Cross-Site Scripting Explained with Examples and How to Prevent XSS with Content Security Policy

https://www.youtube.com/watch?v=pD6C1-zSxIM

WHAT IS CORS CROSS ORIGIN RESOURCE SHARING | Explain CORS Tutorials | InterviewDOT
https://www.youtube.com/watch?v=YAvnt-32W8M

룸을 만들어주고 나니까 또 안됬다.

게다가 클리어 메세지도 안되었다..

도저히 어떻게 하는건지 머리를 싸매고 풀어보았다.

What Is A Single Page Application?
https://www.youtube.com/watch?v=xfGciVdbktI

https://www.popit.kr/cors-preflight-%EC%9D%B8%EC%A6%9D-%EC%B2%98%EB%A6%AC-%EA%B4%80%EB%A0%A8-%EC%82%BD%EC%A7%88/

HTTP Crash Course & Exploration

https://www.youtube.com/watch?v=iYM2zFP3Zn0

Review

오늘한 것 리뷰

  fetch: () => {
    window
      .fetch(app.server)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        data.forEach(app.renderMessage);
      });
  },

fetch를 하는데 render까지 같이 해줬다. 그래서
편하게 하는것같다.

 send: (data, callback) => {
   window
     .fetch(app.server, {
       method: "POST",
       body: JSON.stringify(data),
       headers: {
         "Content-Type": "application/json",
       },
     })
     .then((res) => {
       return res.json;
     })
     .then(callback);
 }

send 는 콜백을 왜해주는걸까? 아직도 이해가 잘안간다.
이게 POST랑 똑같은건데..
공부하다 보니까 알게 되었는데

send를 할때는 data를 넣어주고

() => {
콜백함수들로 API에 표현을 해야하니까 callback을 해주는거구나
}

POSTMAN도 써보았는데 조금 헷갈린다.

  renderMessage: (message) => {
    const divUser = document.createElement("div");
    divUser.classList.add("username");
    divUser.textContent = message.username;

    const divText = document.createElement("div");
    divText.classList.add("text");
    divText.textContent = message.text;

    const divRoom = document.createElement("div");
    divRoom.classList.add("roomname");
    divRoom.textContent = message.roomname;

    const divTime = document.createElement("div");
    divTime.classList.add("date");
    divTime.textContent = message.date;

    const divSingleChat = document.createElement("div");
    divSingleChat.classList.add("chat");
    divSingleChat.appendChild(divUser);
    divSingleChat.appendChild(divText);
    divSingleChat.appendChild(divRoom);
    divSingleChat.appendChild(divTime);

    const elChat = document.querySelector("#chats");
    elChat.appendChild(divSingleChat);
  },

이게 아니고

  renderMessage: ({ username, text, date, roomname }) => {
    const tmpl = `<div class="chat">
      <div class="username">${username
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")}</div>
      <div>${text.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
      <div>${date}</div>
      <div>${roomname.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
    </div>`;

    document.querySelector("#chats").innerHTML =
      tmpl + document.querySelector("#chats").innerHTML;
  }

이거라고 한다.

정규표현식을 공부해야겠다.

전체 코드 한번 더 리뷰

const githubID = "jtlim0414"; // 여러분의 아이디로 바꿔주세요

const app = {
  server: `http://3.36.72.17:3000/jtlim414/messages`,
  // 초기에 roomname을 안만들었을때 post를 했는데
  // 그게 오류가 걸려서 rendering이 안되었다.
  // 그래서 서버를 바꿔서 해보았는데 되던데
  // 기존에 있던 서버에서 어떻게 삭제를 해야하는지 연구해봐야겠다.
  init: () => {
    app.addEventHandlers();
    // init으로 처음부터 하겠다라는것인데
    // 이거를 왜 여기에 넣어줘야하는지는 모르겠다. 왜 초기값으로 설정하지?
    app.fetch();
  },

  addEventHandlers: () => {
    let submit = document.querySelector("#send .submit");
    // 여기서 한참 헤맸다. 그냥 #으로 가져오니까 안되더라.
    if (submit) {
      submit.addEventListener("submit", app.addNewTweet);
    }
  },
  fetch: () => {
    window
      .fetch(app.server)
      .then((resp) => {
        return resp.json();
      })
      .then((data) => {
        data.forEach(app.renderMessage);
      });
    // fetch하는 김에 renderMessage까지 해준다.
  },

  renderMessage: ({ username, text, date, roomname }) => {
    const tmpl = `<div class="chat">
      <div class="username">${username
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")}</div>
      <div>${text.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
      <div>${date}</div>
      <div>${roomname.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
    </div>`;
    // 이거는 정규식 표현이라고 하는데 유투브로 학습할 예정.

    document.querySelector("#chats").innerHTML =
      tmpl + document.querySelector("#chats").innerHTML;

    // 이 코드가 최신순으로 만들어주는 코드다.
    console.log(tmpl);
  },

  send: (data, callback) => {
    window
      .fetch(app.server, {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json",
        },
      })
      .then((res) => res.json)
      .catch((err) => {
        console.log(err);
      })
      .then(callback);
  },

  addNewTweet: (e) => {
    e.preventDefault();
    app.send(
      {
        username: document.querySelector(".inputUser").value,
        text: document.querySelector(".inputChat").value,
        date: new Date().toLocaleString(),
        roomname: document.querySelector(".inputRoomName").value,
      },
      () => {
        app.clearMessages();
        app.fetch();
        app.clearForm();
      }
    );
  },

  clearMessages: () => {
    document.querySelector("#chats").innerHTML = "";
  },

  clearForm: () => {
    document.querySelector(".inputUser").value = "";
    document.querySelector(".inputChat").value = "";
    document.querySelector(".inputRoomName").value = "";
    // 여기서 1개 더 만들어주는 것이 중요하다.
  },

  XSS: () => {
    window
      .fetch(`http://3.36.72.17:3000/${githubID}/malicious`, {
        method: "POST",
      })
      .then((res) => res.json())
      .then((data) => {
        console.log("OMG!!!!!!XSS CONFLICT");
      });
  },
  // 이거는 잘 모르겠다 공부할 예정
};

app.init();

// 물론 실행도 시켜야한다.

// 테스트를 위한 코드입니다. 아래 내용은 지우지 마세요
if (window.isNodeENV) {
  module.exports = app;
}

XSS vs CSRF vs CORS

XSS => 클라이언트가 서버를 신뢰하기 때문에 발생하는 이슈

이게 뭔소리인지 아시는분?

profile
임지택입니다.

0개의 댓글