외부 API - Mixed Content 문제

[haileyham]

📝 Issue

• 외부 API (서울시 공공데이터 채용연계 정보) Vercel 배포 사이트에서 Mixed Content 문제 발생
• 요약하자면, HTTPS로 로드 되는 환경에서 API 요청받는 곳이 HTTP 프로토콜로 되어있어 보안문제상 이를 막아주며 발생하는 문제

🌝 To Do

• [ ] 문제 해결

🌱 How to & Then

🔥 Memo

Originally posted by @haileyham in https://github.com/haileyham/study-now/issues/85#issuecomment-2002899702

[haileyham]

문제 해결법 찾기 전에?

Mixed Content 에러가 Vercel에서 나는 것을 확인 할 수 있었는데, 이를 해결하는 방법들은 구글링을 통해서 쉽게 얻을 수 있었다.

뭐 해당 에러를 쉽게 설명하자면

🔥 요청을 보내는 웹 = 우리는 HTTPS 로 로드되지만, 요청을 받는 웹 = API 보내주는 곳은 보안이 취약한 HTTP 프로토콜로 되어있어서 막아줬음을 알려쥼

[참고1][Mixed content 문제 해결(https 사이트에서 http 사이트 요청 시 발생하는 보안 문제)](https://wellsw.tistory.com/34) [참고2][Next.js에서 Mixed Content 에러 해결하기 (feat. Proxy)](https://shiwoo.dev/posts/nextjs-mixed-content-proxy)

[haileyham]

해결 방법?

1. proxy
2. API 호출용 서버 만들기
3. source 경로 변경

[haileyham]

해결 과정

실패1

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = {
  rewrites: () => [
    {
      source: "/job-openings",
      destination: "http://study-now-pink.vercel.app/job-openings",
    },
  ],
};

실패2

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = {
  async headers() {
    return [
      {
        // 모든 경로에 대한 CORS 헤더 추가
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "upgrade-insecure-requests", // Mixed Content 오류를 해결하기 위한 CSP 정책 설정
          },
        ],
      },
    ]
  },
}

실패3

[참고][[ERR_LOG] Vercel 배포 시, Mixed Content 에러 해결](https://velog.io/@pangkyu/ERRLOG-Vercel-%EB%B0%B0%ED%8F%AC-%EC%8B%9C-Mixed-Content-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0)

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/job-openings',
        destination: `http://openapi.seoul.go.kr:8088/${process.env.NEXT_PUBLIC_SEOUL}/json/GetJobInfo/1/16/%20/%20/%20/`,
      },
    ];
  },
};

module.exports = nextConfig;

[haileyham]

임시 해결

왜 임시 해결?

• API 새로 요청하는 서버를 만들어야겠다 (Next 기준 API route / serverless)
• 현재 dynamic rendering 12개 full이라 임시로 아래 처럼 경로만 변경되도록 설정
• 채용 정보 검색 기능 임시 상실

정리

• source는 라우팅 경로가 아니라 fetch 요청을 하는 경로였다.

• 그래서 이렇게 둘다 /job으로 했더니 제대로 동작됨

  • 단지 문제는.. 검색기능을 사용할 수 없다는 점 (동적으로 불러올 수 없음) - 시도해봐야함
  • 그리고 /job-openings로 하면 안되는데 그 이유는 아마도 페이지 자체가 job-openings로 라우팅 되어있어서 그런거 같다.

  /** @type {import('next').NextConfig} */
  
  const nextConfig = {
    reactStrictMode: true,
    async rewrites() {
      return [
        {
          source: `/job`,
          destination: `http://openapi.seoul.go.kr:8088/${process.env.NEXT_PUBLIC_SEOUL}/json/GetJobInfo/1/16/%20/%20/%20/`,
        },
      ];
    },
  };
  
  module.exports = nextConfig;

  interface JobOpeningAPIOptions {
    location: string;
  }
  
  export default async function jobOpeningAPI({
    location,
  }: JobOpeningAPIOptions) {
    const apiKey = process.env.NEXT_PUBLIC_SEOUL; //추후 변경예정  dynamic 배포제한 때문에 일단 public으로 함ㅠㅠ
    try {
      const response = await fetch(`/job`);
      if (response.ok) {
        const data = await response.json();
        return data;
      } else {
        const errorRes = await response.json();
        console.error('Error:', errorRes);
        throw new Error('Failed to fetch data');
      }
    } catch (error) {
      console.error('Error', error);
      throw error;
    }
  }