'개발 지식/WEB 지식' 카테고리의 글 목록

WEB 지식

🌐 크롬 브라우저 PNA 권한과 CORS 해결하기

Chrome PNA (Private Network Access) 사설망 접근(private network access) 이란, 비인증된 공인(public) 웹사이트에서, 사이트를 방문한 사용자의 와 같은 사설 네트워크망(localhost(127.0.0.1) or 192.168.0.* 아이피) 엔드포인트에 엑세스하려 할때, 브라우저가 요청을 제한하는 새로운 보안 향상 WSC 사양을 말한다. PNA 동작 메커니즘은 CORS(Cross-Origin Resource Sharing) 정책을 확장한 개념으로 적용된다. 그래서 사이트에서 사설 네트워크 서버의 허가를 우선 예비 요청(Preflight) 하고 브라우저가 요청을 승인한 경우에만, 공공 웹사이트에서 사설 네트워크 서버의 리소스에 엑세스가 가능하고 그렇지 않..

인파_

2023.03.23

2

WEB 지식

🌐 리소스 캐시로 인한 CORS 에러 현상 고찰

브라우저 캐시로 인한 CORS 문제 CORS(Cross-Origin Resource Sharing)는 서로 다른 출처(Origin)의 리소스를 공유하고 싶을때 사용하는 정책을 말한다. 기본적으로 브라우저는 SOP(Same Origin Policy) 정책을 따르기 때문에 외부 리소스에 대해서 차단한다. 하지만 인터넷은 여러 사람들에게 오픈된 환경이고, 이런 환경에서 웹페이지에서 다른 출처에 있는 리소스를 가져와 사용하는 일은 매우 흔한 일이라 모든 외부 리소스를 무턱대고 막으면 지금처럼 웹이 발전하지 않았을 것이다. 따라서 외부 리소스라도 허용 가능한 예외 사항을 두었는데 그것이 CORS 정책이다. [WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏 악명 높은 CORS 에러 메세지 웹 개..

인파_

2023.03.06

1

WEB 지식

🌐 URL 구성 요소 & 요청 흐름 정리

URL 구성 이해하기 프로토콜 : https 호스트명 : www.google.com 포트번호 : 443 패스 : /search 쿼리 파라미터 : q=hello&hl=ko scheme 주로 프로토콜(어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙) 사용 예) http, https, ftp 등등 http는 80 포트, https는 443 포트를 주로 사용, 포트는 생략 가능 userinfo URL에 사용자 정보를 포함해서 인증 요즘은 거의 사용하지 않음 host 호스트명(www.google.com) 도메인명 또는 IP 주소를 직접 사용 가능 port 접속 포트 일반적으로 생략 가능 생략 시 http는 80, https는 443 포트 번호로 설정된다. 톰캣은 8080 포트를 사용 path 리소스 경로(pa..

인파_

2022.12.11

3

WEB 지식

🌐 CORS 보안 취약점 예방 가이드

CORS의 보안 문제점 다른 출처(Origin)의 서버의 리소스를 제약없이 가져와 사용할 경우 XSS(Cross-Site Scripting)나 CSRF(Cross-Site Request Fogery)와 같은 스크립팅 공격을 당할 위험성이 있다. 그래서 탄생한 것이 브라우저의 SOP(Same Origin Policy) 정책이다. 하지만 SOP 정책은 오로지 동일한 출처에서만 리소스를 공유할수 있어, 글로벌한 인터넷 환경에선 이는 너무 제한적이라는 단점이 존재했다. 따라서 서비스 차원에서 몇몇은 다른 출처라도 리소스 공유를 허용해 주겠다는 것이 바로 CORS(Cross Origin Resource Sharing) 정책이다. [WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏 악명 높은 CO..

인파_

2022.11.28

6

WEB 지식

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이 아니다. 프론트엔드 개발자 입장에선 요청 코드를 이상하게 적은것도 아니고, 백엔드 개발자 입장에선 서버 코드나 세팅이 이상한것도 아니다. 모든게 멀쩡한데 왜 요청한 자료에 대한 응답을 시뻘건 에러줄로 확답하는게 문제이다. 🤬 이러한 현상이 일어나는 이유는, 웹 브라우저는 HTTP 요청에 대해서 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문이다. 요청 방식에 따라 다른 CORS 발생 여부 1. , , 2. XMLHttpRequest, Fetch API 스크립트 → 기본적으로 Same-Or..

인파_

2022.11.28

90

WEB 지식

🌐 아주 쉽게 이해하는 Stateful / Stateless 차이

Stateful 과 Stateless 차이점 웹 공부를 하다보면 클라이언트(Client)와 서버(Server)간의 통신을 상태유지(Stateful) 하느냐, 상태유지하지않음(Stateless) 으로 하느냐 라는 말귀를 한번쯤은 들어본 적이 있을 것이다. 상태라는게 어떠한 정보를 말하는 것 같은데, 이번 시간에는 Stateful 과 Stateless의 차이점에 대해 추상적인 개념 이해에서 벗어나 명확히 파악하는 시간을 가져보자. Stateful (상태유지) 상태 유지라 함은 클라이언트와 서버 관계에서 서버가 클라이언트의 상태를 보존함을 의미한다. 클라이언트와 서버 간에 송수신을 하며 단계별 과정을 진행하는데 있어, 서버에서 클라이언트가 이전 단계에서 제공한 값을 저장하고 다음 단계에서도 저장한 상태이다. ..

인파_

2022.11.14

8

WEB 지식

🍪 CORS 쿠키 전송하기 (withCredentials 옵션)

🤬 CORS를 허용했는데도 쿠키가 넘어가지 않는 현상 보통 웹을 구성할때 리액트(React)나 뷰(Vue)와 같은 라이브러리 / 프레임워크를 사용한다면 따로 프론트 서버를 실행하여 개발하게 된다. 만일 클라이언트 서버가 http://localhost:3000 이고 API 서버가 http://localhost:8080 이라고 가정하자. 서로 같은 Host이고 Port만 다른 셈이다. 로그인 화면을 구성을 완료했고 테스트를 위해 axios로 로그인 요청을 서버에 보냈다. axios.post('http://localhost:8080/login', { profile: { username: username, password: password } }) 하지만 결과는 로그인 성공이 아닌 다음과 같은 시뻘건 CORS ..

인파_

2022.07.18

6

WEB 지식

🌐 세션(Session) 불일치 문제 및 해결 방법

서버 다중화 환경에서의 세션 불일치 단일 서버 환경에서는 session을 통한 로그인을 구현할때 session 불일치 문제를 신경쓸 필요가 없다. 하지만 서비스가 커짐에 따라 한대의 서버로 운영하는것이 불가능해졌다고 가정해보자. 그래서 서버를 업그레이드 해야되는데 다음과 같이 두가지 방식이 존재한다. 첫번째 방법은 scale-up 방식이다. 서버 자체 성능을 늘려 부하를 견딜수 있게 하는 방식이지만, 여전히 서버 한 대에 모든 트래픽이 집중되므로 만일에 서버 장애가 생길시 서버가 복구될 때까지 서비스를 중단해야 하는 상황이 발생할 수 있는 위험이 있다. 사용하려던 서비스가 중단된다면 엄청난 비즈니스 손실(수익 손실)이 생길 수 있다. 두번째 방법은 scale-out 방식이다. 서버를 여러대로 늘려서 각 ..

인파_

2022.06.28

3

WEB 지식

🌐 Reverse Proxy / Forward Proxy 정의 & 차이 정리

프록시(Proxy) 란? 프록시 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 프록시(Proxy)란 '대리' 라는 의미를 갖고 있으며, 서버와 서버사이의 중계기 역할을 한다고 보면 된다. 프록시를 쓰는 이유는 보안상의 이유로 직접 통신할 수 없는 두 점사이에서 대리로 통신을 수행하여 보안성, 성능, 안정성을 향상 시키기 위해서 이다. 보통 웹은 클라이언트에서 서버로, 서버에서 클라이언트로 통신하며 데이터를 전달한다. 이때 필연적으로 중복되는 데이터를 반복하여 전달하는 상황이 발생하는데, 이렇게 동일한 요청을 매번 처리하는 것은 곧 리소스 낭비 와 서버의 부하 로 이어지게 된다. 때문에 본 서버에 도달하기 전에 새로..

인파_

2022.06.23

10

WEB 지식

🌐 서버리스(ServerLess) 개념 💯 정리 (BaaS / FaaS)

서버리스 아키텍쳐 란? 서버리스(Serverless)는 직역하면 "서버가 없다"라는 뜻이 된다. 하지만 정말로 서버가 없는 것을 뜻하는게 아니다. 서비스를 하는데 있어 어찌되었든 저장소는 필요하고 서버는 필요하기 때문이다. 따라서 정확히 말하자면, 서버리스는 서버가 없는 백엔드 라는 뜻이 아닌 우리가 직접 서버를 관리하지 않아 신경 쓸 필요없는 경우를 뜻한다. 즉, 서버리스 아키텍처(Serverless Architecture)란 서버를 직접 관리할 필요가 없는 아키텍처를 칭한다. 서버리스는 특히, 사이드 프로젝트나 빠르게 프로토타입을 출시할 때 빠르고 쉽게 제품을 출시할 수 있고, 돈도 매우 절약할 수 있다. 서버리스 시장은 지금도 무섭게 성장하고 있어, 관심을 가져서 더 좋은 운영 환경을 고려하는것을 ..

인파_

2022.05.12

12

WEB 지식

🌐 무료 도메인(DNS) 발급받기 - Freenom

무료 도메인 사용하기 도메인 네임으로서 가장 유명하고 많이들 쓰이는 .com, .net은 1년에 13000원, .kr은 1년에 9000원 정도로 꽤나 저렴한 편에 속한다. 그렇지만 단순히 공부 및 테스트 용도로서 도메인을 구입하기에는 아깝다는 생각이 든다. 다행히 무료로 도메인을 제공해주는 사이트가 있다. 바로 Freenom 이라는 사이트인데, 대신 조금 인기없는 도메인을 무료로 제공한다. 그렇지만 학습용도로는 최고의 도메인 발급 사이트가 아닐까 싶다. Freenom - A Name for Everyone Cost Price Free Special www.freenom.com Freenom 도메인 발급하기 단순히 회원가입하고 도메인을 발급하는게 아니라 좀 까다로운 순서가 존재한다. 무턱대고 도메인을 발급..

인파_

2022.05.04

8

WEB 지식

🌐 DNS 레코드 종류 ★ 완벽 정리

DNS 레코드 DNS Record는 DNS 서버가 해당 패킷을 받았을 때 어떤식으로 처리할지를 나타내는 지침을 말한다. 간단히 말하면 DNS 상에서 도메인에 관한 설정을 하기 위해 사용되는 일련의 설정 문자라고 보면 된다. DNS 레코드에는 서버가 요청에 응답하는 방법에 대한 다양한 구문과 명령이 포함되어 있다. DNS 레코드를 공부해야 하는 이유는 만일 개인 도메인을 구입하기 위해 도메인 업체 사이트에 접속해서 도메인과 내 서버 IP와 연결하려면 해당 정보가 필요하기 때문이다. 이 밖에 실 서비스의 도메인을 관리하기 위해서는 레코드의 각 특징에 대해 알아둘 필요가 있다. DNS 레코드 종류 A 레코드 A 레코드(A Record)는 DNS에 저장되는 정보의 타입으로 도메인 주소와 서버의 IP 주소가 직접..

인파_

2022.05.03

3

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

You Can Become A

Programmer

WEB 지식

🌐 크롬 브라우저 PNA 권한과 CORS 해결하기

인파_

🌐 리소스 캐시로 인한 CORS 에러 현상 고찰

인파_

🌐 URL 구성 요소 & 요청 흐름 정리

인파_

🌐 CORS 보안 취약점 예방 가이드

인파_

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

인파_

🌐 아주 쉽게 이해하는 Stateful / Stateless 차이

인파_

🍪 CORS 쿠키 전송하기 (withCredentials 옵션)

인파_

🌐 세션(Session) 불일치 문제 및 해결 방법

인파_

🌐 Reverse Proxy / Forward Proxy 정의 & 차이 정리

인파_

🌐 서버리스(ServerLess) 개념 💯 정리 (BaaS / FaaS)

인파_

🌐 무료 도메인(DNS) 발급받기 - Freenom

인파_

🌐 DNS 레코드 종류 ★ 완벽 정리

인파_

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역