(Daliy / 3.22 TIL) Ajax, CORS, XSS

Ajax

페이지의 일부분만 업데이트(요청/응답)를 하기위해 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

Ajax 이란?

JavaScript의 라이브러리중 하나이며, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로고침하지 않아도 페이지 일부부만 데이터를 로드할 수 있다.

자바스크립트를 통해 서버에 데이터를 요청하는 것이다.

Ajax을 사용하는 이유

web 화면에서 무언가 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침 하지 않기 위해 사용한다.

HTTP 프로토콜은 클라이언트 쪽에서 요청을 보내고 서버에서 응답을 마치면, 무상태성 특성으로 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 요청/응답을 하며 페이지 전체를 새로고침하게되는데 이러한 경우 엄청난 시간낭비가 발생될 것이다.

하지만, 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 요청한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

CORS

클라이언트에서 서버로 부터 여러개의 리소스의 응답을 듣고 싶어 만들어졌다.

CORS란?

예외적으로(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처 Origin(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

• 같은 origin에서 fetch를 시도하면 CORS에 문제가 생기지 않는다.

• prefilght request를 사용해 header부분에 OPTIONS라는 메세지로 나 나 들어가도돼? 먼저 물어보고 응답이 오면 그 다음에 클라이언트에서 본 메세지를 요청한다.

• header

"access-control-allow-origin": "*",

응답 헤더는 이 응답이 주어진 origin으로부터의 요청 코드와 공유될 수 있는지를 나타냅니다. "*" 은 모든 origin을 허용한다. 하나의 origin만 명시될 수 있습니다.

"access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS"

허용되는 메소드

"access-control-allow-headers": "content-type, accept",

허용되는 payload

"access-control-max-age": 10, // Seconds.

허용되는 시간

XSS

입력창을 이용해 의도치않은 태그를 넣어서 HTML를 조작하여 악용할 수 있다.

먼저, XSS란 '유저가 웹 페이지에 접속하는 것으로 올바르지 않은 스크립트가 실행되는 취약점 또는 공격방법' 을 말한다.

사이트 간 스크립팅으로 웹 앱에서 많이 나타나는 취약점의 하나이며, 웹 사이트의 관리자가 아닌 일반 유저가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다.

입력창 value에 스크립트 코드가 오는것을 replace(정규식)으로 막을 수 있다

 `<div class="chat">
      <div class="username">${username
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")}</div>
      <div>${text.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
      <div>${new Date().toLocaleString()}</div>
      <div>${roomname.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
    </div>`;