[ DevOps ] - (API 게이트웨이) Cors — 현서의 개발 일지📚

기존에 Cors에 대해서 알아보았지만 여기서 좀더 자세해 알아보고 직접 API gateway에 설정해 보도록 하겠습니다.

CORS

브라우저는 기본저그올 SOP정책을 따릅니다. 하지만

웹 폰트를 사용하거나, A, B, C.com에서 네이버 APi또는 카카오 API로 요청을 보내는 등 다른 도메인을 가진 API 서버에 요청을 보내는 경우들이 많기 때문에 다른 오리진으로의 요청을 안전하게 허용할 필요성이 생기게 됩니다. 따라서 CORS정책으로 다른 오리진의 요청을 제한적으로 허용했습니다.

( 만약 어떠한 제약없이 모든 출처에 대한 요청을 열어놓는다면 어떤 문제가 발생할까?)

유저 김코딩이 웹사이트 A에 로그인하여 토큰이 브라우저의 쿠키에 저장되어 있다고 해봅시다. 이떄, 김코딩이 개인정보를 탈취하기 위해 악의적으로 만들어진 웹사이트 B에 접속했을 경우, 웹사이트 B의 자바스크립트가 브라우저에 다운로드 받아 실행됩니다.

이때, 다운받아진 자바스크립트 코드로 웹사이트 B에서 브라우저에 저장된 웹사이트 A의 토큰을 사용해 웹사이트 A의 서버로부터 김코딩의 정보를 탈취해 웹사이트 B의 서버로 보낼 수 있는 것입니다.

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

[WEB] 📚 CORS 개념 💯 완벽 정리 & 해결 방법 👏

CORS (Cross Origin Resource Sharing) CORS 정책은 우리가 가져오는 리소스들이 안전한지 검사하는 관문이다. 웹개발을 하는 사람들은 이 CORS 정책위반으로 인해 에러가 나는 상황을 많이들 겪어봤을것이

inpa.tistory.com

실습 시작

우선 canaryapi에 작업 > CORS활성화를 눌러서 CORS를 여기에 적용시켜 줍니다. 여기서 통합 응답을 보게되면, 이 Gateway가 어떠한 헤더를 매핑하는지 알 수 있습니다.

그리고 canaryFunction으로 들어가서 여기에 응답을 위한 headers를 추가로 적어 주었습니다.

Lambda canaryFunction

import json

def lambda_handler(event, context):
    # TODO implement
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from new'),
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        }
    }

이제 저는 직접 html파일을 간단히 만들어서 저 Gateway URL로 요청을 보내보도록 하겠습니다. 이 떄, 잘 응답이 받아와야 하고, 이에 따른 Option요청과 헤더들이 정상적으로 잘 담기는지 확인해 보도록 하겠습니다.

우선 기존의 canary release를 위한 코드를 다 삭제하고, 임의로 cors를 위한 rest api gateway를 하나 만들고, corsfunction을 lambda function으로 위와 동일하게 작성해 주겠습니다.

이를 테스팅하기 위해, 스테이지의 URI로 요청을 보내기 위한 html, js을 작성해 보도록 하겠습니다.

/main.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>CORS CHECK</title>
    </head>
    <body>
        <label for="request">요청 받아오기</label>
        :
        <input type="submit" id="request" value="요청보내기" >
        <pre id="pre">
            
        </pre>
        <script src="./main.js" />
    </body>
</html>

/main.js

document
  .getElementById("request")
  .addEventListener("click", function () {
    console.log("asdf");
    fetch(
      "https://a8umprr317.execute-api.ap-northeast-2.amazonaws.com/third/shops",
      {
        headers: {
          "Content-Type": "application/json",
          Origin: "http://localhost:5000",
        },
      }
    )
      .then((response) => response.json())
      .then((data) => {
        document.getElementById("pre").innerHTML = data;
      });
  });

이렇게 fetch API를 사용해서 화면에 보여지게 해 보겠습니다.

일단 결과는 잘 출력됩니다.

왼쪽이 preflight즉 OPTION요청이 되고, 오른쪽이 본 요청이 되겠습니다.

아주 간단히 cors셋팅만 하고 credential.. 부가적인 셋팅은 하지 않았습니다. 나중에 기회가 된다면 이를 구현해 보겠고, 이번에는 이렇게 넘어가도록 하겠습니다.

저작자표시 비영리 동일조건

'DevOps > AWS Architecture' 카테고리의 다른 글

[ DevOps ] - (AWS Lambda) 버전관리와 Alias (0)	2022.07.19
[ DevOps ] - (AWS Lambda) 스케일링과 동시성 (0)	2022.07.19
[ DevOps ] - (API 게이트웨이) Canary 배포 (0)	2022.07.19
[ DevOps ] - (API 게이트웨이) Lambda와 Rest API Gateway 연결 (0)	2022.07.19
[ DevOps ] - (API 게이트웨이) Lambda와 HTTP API Gateway 연결 (0)	2022.07.19