웹디자인 (HTML,JS)

Next.js 서버 측 변수 노출 보호 안전조치

날으는물고기 2023. 10. 1. 00:12

Next.js에서 서버 측 변수를 프론트엔드에 노출되지 않도록 보호하려면 몇 가지 접근 방식을 사용할 수 있습니다.

이러한 방식은 보안상 중요한 정보를 안전하게 처리하는 데 도움이 됩니다.

Server Side, Client Side Authentication

  1. 환경 변수 사용:
    • 환경 변수는 .env.local 파일을 통해 관리됩니다. 이 파일에 중요한 서버 측 정보를 저장하고, process.env를 통해 접근할 수 있습니다. 환경 변수는 클라이언트 측에서 접근할 수 없으며, 서버 측에서만 사용됩니다.
    // .env.local 파일에 추가
    SECRET_KEY=mysecretkey
    
    // Next.js 페이지에서 환경 변수 사용
    const secretKey = process.env.SECRET_KEY;
  2. 서버 측 데이터 가져오기:
    • 프론트엔드에서 서버 측 데이터를 가져올 때, 클라이언트 측에서 직접 서버로 요청을 보내는 것이 아니라, 서버에서 데이터를 가져오도록 구성할 수 있습니다. 이를 통해 클라이언트 측 코드에 중요한 데이터가 노출되지 않습니다.
    // pages/api/secretData.js
    export default function handler(req, res) {
      const secretData = 'This is a secret';
      res.status(200).json({ secretData });
    }
    
    // 페이지에서 서버 측 데이터 가져오기
    import { useEffect, useState } from 'react';
    
    function MyComponent() {
      const [secretData, setSecretData] = useState('');
    
      useEffect(() => {
        fetch('/api/secretData')
          .then((response) => response.json())
          .then((data) => {
            setSecretData(data.secretData);
          });
      }, []);
    
      return <div>{secretData}</div>;
    }
  3. 데이터 마스킹:
    • 서버에서 가져온 데이터를 프론트엔드에서 표시하기 전에 필요한 경우 데이터를 마스킹하거나 숨김 처리할 수 있습니다. 예를 들어, 비밀 정보를 전체로 표시하는 대신 일부를 가려서 보여줄 수 있습니다.
    // 데이터 마스킹 예제
    const secretData = 'This is a secret';
    const maskedData = secretData.substring(0, 5) + '...';
  4. 클라이언트 측 암호화:
    • 민감한 데이터를 클라이언트 측에서 사용해야 하는 경우, 데이터를 암호화하고 해독하는 방법을 구현할 수 있습니다. 이를 통해 데이터가 프론트엔드에서 노출되더라도 암호화된 상태로 유지됩니다. 하지만 이 방법은 복잡하고 보안에 민감하므로 주의 깊게 다루어야 합니다.
    // 클라이언트 측 데이터 암호화 및 해독 예제
    const secretData = 'This is a secret';
    const encryptedData = encrypt(secretData); // 암호화
    const decryptedData = decrypt(encryptedData); // 해독

이러한 접근 방식 중에서 어떤 것을 선택할지는 프로젝트의 요구 사항과 보안 요구 사항에 따라 다를 수 있습니다. 민감한 정보를 다룰 때는 항상 보안 최우선 원칙을 따르는 것이 중요합니다.

How to use environment variables in Next.js (includes a working example app)

728x90