You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌐 크롬 브라우저 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) 하고 브라우저가 요청을 승인한 경우에만, 공공 웹사이트에서 사설 네트워크 서버의 리소스에 엑세스가 가능하고 그렇지 않..
🌐 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..
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이 아니다. 프론트엔드 개발자 입장에선 요청 코드를 이상하게 적은것도 아니고, 백엔드 개발자 입장에선 서버 코드나 세팅이 이상한것도 아니다. 모든게 멀쩡한데 왜 요청한 자료에 대한 응답을 시뻘건 에러줄로 확답하는게 문제이다. 🤬 이러한 현상이 일어나는 이유는, 웹 브라우저는 HTTP 요청에 대해서 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문이다. 요청 방식에 따라 다른 CORS 발생 여부 1. , , 2. XMLHttpRequest, Fetch API 스크립트 → 기본적으로 Same-Or..
🍪 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 ..
![[NODE] 📚 cors 모듈 - CORS 간편 설정하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGIsfk%2FbtrG3EVO6jc%2FrD3tsxeLek21S6Xqml2VWk%2Fimg.png)
[NODE] 📚 cors 모듈 - CORS 간편 설정하기
CORS 허용 설정 하는 방법 Node.js 서버 프로젝트에서 cors(cross origin resource sharing) 문제를 해결하는 방법은 크게 2가지가 있다. 하나는 직접 헤더를 명시해서 출처(origin)을 필터링하는 것이고, 다른 하나는 cors 노드 패키지를 사용해 좀더 간편하면서 유기적으로 출처를 필터링 할수 있다. 1. 직접 헤더에 명시 CORS 문제를 해결하기 위해서는 응답 헤더에 Access-Control-Allow-Origin 헤더를 넣어야 한다. 이 헤더는 클라이언트 도메인의 요청을 허락하겠다는 뜻을 가지고 있다. //^ CORS 허용 res.setHeader('Access-Control-Allow-origin', '*'); res.setHeader('Access-Contro..
