Mixed Content에러를 해결하기 위한 방법
근본적인 방법 Https사용
내 웹과 통신하는 서버의 프로토콜을 https로 업그레이드 해주면 된다.
그러나, 내가 서울시 공공데이터를 관리하는 관리자한테 전화해서
"왜 http를 사용하죠? 바꾸세요 언능 https로!!!"
샤우팅을 날리는 것은 현실적으로 할 수가 없다. 해보까...??
html에 meta태그 추가
불가피한 상황에서 html 파일에 메타태그를 추가하면 된다고 stack overflow에서 확인하였다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">위의 메타태그를 설정해주면 요청 시, 브라우저가 이를 감지하고 자동으로 HTTPS로 업그레이드하도록 하는 지시를 제공한다고 한다.
Next js에서는??
Nextjs에서는 지원하지 않는 metadata라고 한다.
그러나 의미가 없다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 는 웹 페이지 "자체"의 리소스 로드 시 보안정책을 설정하는 역할이지,
AJAX통신은 페이지가 로드된 후에 동적으로 서버와 데이터를 주고 받는 것이기에 페이지 로드 시 설정된 보안 정책에 영향을 받지 않는다.
즉 무의미하다.
getServerSide?? , api router
mixed content가 일어나는 것은 프로토콜의 차이이므로, getServerSideprops ,api router 같은 서버단에서 한다고 하더라도,
프로토콜 자체가, https 이므로 안된다.
Nextjs rewrite
Mixed Content와 같은 이슈를 겪기전에 "프록시 서버"라는 개념을 알고 있었으며,
프록시 서버는 클라이언트와 서버 사이에 위치하면서 클라이언트 대신 서버와 통신해 응답을 돌려주는 중간 서버이다.
-
Next js에서는 api router를 통해 proxy server와 같은 역할을 해주며,
CORS, 그리고 masking 하여 보안상이유로 사용 할 수 있는 Node기반
serverless Function이다. -
Nextjs에서는 사용자가 어떤 url로 접근시 특정 사이트로 옮겨주는 자체 기능이 있는데
rewrite와redirect이다.
rewrite와 redirect
-
rewrite : Rewrites allow you to map an incoming request path to a different destination path.
-
redirect : Redirects allow you to redirect an incoming request path to a different destination path.
rewrite는 사용자가 요청하는 경로를 다른 경로로 맵핑할 수 있고
redirect는 사용자가 요청한 경로를 다른 경로로(url) 보내게 해준다.
(내가 이해한 의역임을 참고하자!)
공통점
두 가지 모두 유저가 특정 경로를 요청하면 개발자가 설정한 "화면"을 보여주게 한다.
차이점
- rewrite : 유저가 요청한 (입력한) url(경로)로 뒷단에서 변경되지만, 유저는 현재의 화면을 본다
- redirect : 유저가 요청한 (입력한) url(경로)로, 즉 정해진 path로 화면전환이 일어난다.
//page/index
const Home = () => {
return <div>Home</div>
}
// page/rewrite
const Redirect = () => {
return <div>Redirect</div>;
};
/*
url : "/",
Page : "Redirect" 가 보인다.
*/
// page/redirect
const Rewrite = () => {
return <div>Rewrite</div>;
};
/*
url : "/",
Page : "Home"이 보인다.
*/
----
// nextjs.config.mjs
const nextConfig = {
async rewrites() {
return [
{
source: "/rewrite",
destination: "/",
},
];
},
// redirect
async redirects() {
return [
{
source: "/redirect",
destination: "/",
permanent: true,
},
];
},
};rewrite페이지로 이동시
- rewrite : url경로는
http://localhost:3000/rewrite이지만,/으로 이동 되어진다.
redirect페이지로 이동시
- redirect : url경로는
http://localhost:3000/바뀌며/화면이 보여진다.
해결방법
Api Router 를 proxy서버로 사용하고,
api router의 주소를 rewrite를 사용해 url주소를 mapping 해서, 서울시 공공데이터와 통신하면 가능 할 것이라 판단이 선다.
자 이제 다음 포스팅에서 해결 한 번 가보자고
