2019. 06. 10 이머시브 수업 3주차 - 1일(fetch & xss)

fetch

"Fetch API 의 가장 유용하고, 핵심적인 함수는 fetch() 함수이다. 가장 간단한 형태의 fetch() 함수는 URL 을 인자로 받고 응답을 처리하기 위한 promise 를 반환한다. 응답을 처리할 때 Response 객체를 이용할 수 있다"

const app = {
  server: "http://52.78.213.9:3000/messages",
  init: function(){
    app.fetch();
  },
  fetch: function(){     
      fetch(app.server, {  //<- app.server 부분이 서버랑 통신을 해서 서버에 쌓여있는 채팅을 가져온다                 
      method: 'GET',  
      headers: {
      "Content-Type": "application/json",
      }
    }).then(response => {
      return response.json();
    }).then(json => {
      makeChatBox(json) //********* 이 부분이 핵심 */
    })
  },
  send: function(messages){
    fetch(app.server , {
      method: 'POST',
      body: JSON.stringify(messages), 
      headers: {
      "Content-Type": "application/json",
      }
    }).then(letter => {
      return letter.json();
    }).then(json => {
      app.fetch(json)
    })
  }, 
  clearMessages: function(){document.querySelector('#chats').innerHTML = ''},
  renderMessage: function(param){document.querySelector('#chats').innerHTML = `

내가 구현한 첫 fetch는 이런식으로 구현하였다
.catch를 이용해서 에러코드를 잡는식의 구현도 가능한데 그 부분은 아직 구현하지 않았다
중요한건 비동기적으로 작동을 한다는것

CORS, XSS, CSRF

• CORS(Cross-Origin Resource Sharing)

1. 웹애플리케이션의 사용자를 보호하기 위한 브라우저만의 자발적인 보안조치
2. 보통 우리가 요청하는것은 XMLHttpRequest나 Fetch API 가 있다(그 외에도 몇개 더 있다)
3. simple request : "간단한 cross-site 요청은 다음의 조건들에 모두 부합하는 것 중 하나다"
   3-1 허용된 유일한 메서드들은 다음과 같습니다:
   GET
   HEAD
   POST
   3-2 Content-Type 헤더에 대해 허용되는 유일한 값은 다음과 같습니다:
   application/x-www-form-urlencoded
   multipart/form-data
   text/plain
4. prefrighted request?
5.  

---

• XSS

---

• CSRF

---