Web Architecture


브라우저란?

인터넷 망에서 정보를 감색하는데 사용하는 응용프로그램을 말한다.

• 기능

웹 페이지 열기, 최근 방문한 URL(uniform resource locator) 및 즐겨찾기 제공, 웹페이지 저장


• 종류

Explorer

fireFox

Chrome

Safari

Opera

Client and Server


API

[Application Program Interface]

프로그램과 또 다른 프로그램을 연결해주는 일종의 다리라고 볼 수 있습니다.

서버 자원을 잘 가져다가 쓸수 있게 만들어놓은 interface 를 말한다.

UI(User Interface)를 먼저 짚고 넘어가려 합니다.

아이폰에 홈버튼이 있다. 이것을 누르면 처음화면으로 간다 이홈버튼은 스마트폰안에 있는 내용들을 확일할수 있게 사용자를 이어주는 매개체입니다.

API도 같은 맥락이라고 볼 수 있는데요

모든각국의 나라 도시의 날씨의 정보가 있는 싸이트가 있다. 그런데 나는 한국의 인천의 날씨를 가져와서 인천사람들에게 이것을 전달하기위해 API 라는 것을 통해 전달할수 있다.

이것을 도와주는 중간 매개체이다.

get/message 전달하고 post/message 저장한다.

HTTP :Hypertext Transfer Protocal

• HTTP란

HyperText Transfer Protocol의 약자로 하이퍼텍스트 문서를 교환하기 위하여 사용된 통신 규약이다.

클라이언트와 서버가 서로 통신할 수 있게 하기 위한 언어를 정의하는 어플리케이션 규약



AJAX란 무엇인가?

AJAX는 Asynchronos Javascript And XML이다.

쉽게 말하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다

AJAX는 필요한 데이터만을 서버에 요청해서 받은 후, 클라이언트에서 데이터 처리를 할 수 있습니다.


dynamic web page 페이지 안에서

서버와 자유롭게 통신하게하는것

XMLHttpRequest 등장

페이지 깜빡임없이 부분적으로 내가 원하는 페이지만 작동하게하기위해

Javascript Dom 등장

이것을 모두 말해서 Ajax 라고 합니다.

• 서버랑 통신을 하기 AJAX 를 사용해야 한다.

처음에는

XMLHttpRequest 를 사용했었다. 조금 복잡하다.

두번째

JQuery 간편 너무 줄였다. 몬말인지 모르겠다.

마지막

Fetch API 를 사용한다. 유연하고 가독성 좋고 무슨말인지 이해가 잘된다.

XMLHttpRequest, jQuery ajax, fetch 등에서 ajax를 메소드로 제공

Fetch 를 왜 쓰는가?

Factch 는 가져오는 함수

서버 자원을 가져오기 위해

Request message

• 웹브라우져와 웹서버 주고받는 내용

Request Header
GET /1.html HTTP/1.1     => 요청행
Host: localhost:8080     => 네트워크의 컴퓨터 식별하는 이름

User-Agent :     => 유저 컴퓨터, 웹브라우저 정보
...
...
Accept-Encoding : gzip, deflate, br   => 데이터 양이 많으면 압축해서 전송하는데, 어떤 압축방식을 지원하는지 설명
...
...
If-Modified-Since: Tue, ... => 마지막으로 페이지를 다운받은게 언제인지 확인하여 다시 다운받을지 결정
<blank line>    => 블랭크로 헤더와 바디 구분
Request Message Body

————Browser Security—————————-

SOP

SOP : SOP(Same-origin policy)?

• Origin의 세 가지 요소, 즉 프로토콜, 호스트, 포트 번호가 일치하는 웹페이지들 간의 상호작용만을 허용하는 보안 정책입니다.

CORS

Corss Oring Resource Sharing

CORS 란?


• 브라우저의 현재 웹 페이지에서 다른 페이지에 있는 자원을 쓸수 있게 해주는 정책 이다.

• 다른 웹 페이지에 있는 리소스를 사용할수 있게 도와주는 것이 CORS라고 한다.

예를 들어보자

예전에는 동일한 도메인에서만 요청과 응답을 할수 있게 해주었다. 왜냐하면 다른도매인에서 요청을 보내서 put 이나 delete 라는 메소드로 post요청을 보내서 바꿔버릴수 있기 때문이다. 그렇기 때문에 Cors 가 생긴것이다.

• 그렇다면, CORS는 외부로부터의 요청을 어떤 방식으로 관리할까요? 바로 HTTP 헤더에 답이 있습니다. HTTP 헤더에는 현재 전송하는 요청 또는 응답에 대한 정보가 담겨 있는데요. CORS와 관련된 헤더를 통해 cross-origin 요청들을 관리할 수 있습니다.

• 여러 헤더 가운데, **Access-Control-Allow-Origin**을 살펴 보겠습니다.

Access-Control-Allow-Origin헤더를 통해, 서버의 리소스를 어떤 외부 도메인과 공유할 것인지를 규정할 수 있습니다. 만약 어떤 서버의Access-Control-Allow-Origin헤더 값이*`이라면, 이 서버의 리소스에는 어떠한 도메인이라도 접근할 수 있다는 의미입니다. 반대로 헤더 값이 특정한 도메인으로 설정되어 있을 경우, 해당 도메인의 접근만 허용됩니다.


하지만 클라이언트가 www.naver/post.com 에서 naver 서버컴퓨터에서 요청을 보내면 간단하게 응답을 줄수 있는데

naver서버컴퓨터가 날씨 AIP 서버 컴퓨터 에서 정보를 가져다가 브라우져상에 보여줘서 사용자들에게 제공하고 있다.


그러면 클라이언트는 굳이 naver 서버에 요청을 하는것이 아니라 날씨 AIP 서버에 요청을 하는 것이 된다.



그러면 위에 그림과 같이 접근을 하고싶을 것이다. 그러면 도메인 주소가 다르게 된다 이때


Cross-origin 이 발생하게 된다.

서로 다른 도메인에 리소스를 보내고 받기 위해서는

클라이언트와 서버에서 특정한 작업을 해줘야 한다.

클라이언트는 브라우져에서 담당 하고 서버에서는 option 메소드가 올경우를 대비해서 코드를 작성해서 넣어주면 된다.


• app.js 서버

이런 방식을 통해 options 값을 서버에 작성한다.

 if (request.method === "OPTIONS") {
    response.writeHead(200, headers);
    response.end("옵션이 맞습니다."); // 처음시작은 헤더를 작성해준다.=조건맞으면 200준다.
    }

• Express - Node.js framework 를 이용해 간편하게 작성할수 있다. express의 해결방법

• 위에있는 내용과 동일하다.

const express = require("express"); // 1.express web application framework 불러온다.


// 2.npm install cors


const app = express(); // 3. app으로 프레임워크를 불러온다.


app.use(cors()); // 4. 실행한다. 

XSS

XSS(Cross-Site Scripting)

• XSS는 클라이언트에 악성 스크립트를 주입하는 공격입니다.
• 특히, input을 통해 XSS 공격이 이루어지는 경우가 많습니다.

CSRF

#CSRF(Cross-site request forgery)

웹 어플리케이션 취약점 중 하나로 인터넷 사용자(희생자)가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 만드는 공격입니다.

————————————————————-