개발 서버 보호

오늘날 원격 생활은 전 세계 개발자에게 사실상의 표준입니다. 그들 중 일부는 집에서 일하고 다른 일부는 카페와 코워킹에서 일합니다. 현대 도시 구석구석에 무료 WiFi가 있습니다. 이것이 신뢰할 수 없는 네트워크에 연결되어 있는 동안 개발 서버를 실행하는 데 더 주의해야 하는 이유입니다.

문제

새 프로젝트를 시작할 때 대부분 webpack과 webpack-dev-server를 선택합니다. webpack의 구성은 다음과 같습니다.

module.exports = {
  mode: 'development',
  entry: {
    app: './src/app.js',
  },
  output: {
    path: './public',
    publicPath: '/',
  },
  devtool: 'eval',
  devServer: {
    port: 8080,
    contentBase: './public',
    historyApiFallback: true,
  },
};

그런 다음 개발이 진행되고 언젠가 다른 장치에서 결과를 확인하기로 결정합니다. 예를 들어 스마트폰이나 태블릿. 이를 위해 브라우저에서 시뮬레이션 모드를 사용할 수 있지만 편리하고 정확하지 않습니다. 그래서 우리는 WiFi를 통해 dev 서버에 연결하기로 결정했습니다.

모호한 것들이 오는 곳입니다.

Google에서 "get access to webpack dev server over wifi"을 검색하면 "해결책"— 0.0.0.0을 host 설정으로 찾을 수 있습니다. 당신은 그것을 바꾸고 — 짜잔! - 효과가있다:

module.exports = {
  // ...
  devServer: {
    host: '0.0.0.0', // <-- 
    port: 8080,
    contentBase: './public',
    historyApiFallback: true,
  },
};

일반적으로 옵션 세트를 그대로 두기로 결정합니다. 그러면 작업이 더 쉬워지기 때문입니다. 이와 같은 코드가 많이 있습니다on GitHub. 모두가 합니다.

여기서 놓칠 수 있는 것은 동일한 네트워크의 모든 사람이 서버를 사용할 수 있다는 사실입니다. 다음에 맥도날드나 스타벅스에서 시작하면 그곳에 있는 모든 사람이 볼 수 있습니다. 호텔, 공항, 코워킹, 카페, 심지어 지하철까지도 누군가 당신의 작업을 엿볼 수 있는 장소가 될 수 있습니다.

때로는 상황이 더 악화되어 개발자가 라우터에 공용 IP 및 포트 포워딩을 가질 수 있으므로 전체 인터넷에서 서버를 볼 수 있습니다!

컴파일된 코드가 있기 때문에 별거 아니라고 생각할 수도 있지만 잠깐만요... 개발 서버도 소스 맵을 제공합니다! 그것은 당신 자신이나 당신의 회사 프로젝트가 순식간에 도난당할 수 있고 당신은 그것을 알아차리지도 못할 것이라는 것을 의미합니다.

(그런데 webpack-dev-server를 사용하여 백엔드에 프록시를 설정한 경우 이러한 서버의 공개는 훨씬 더 심각한 데이터 유출로 이어질 수 있습니다.)

해결책

물론 해결책이 있습니다. 개발자가 0.0.0.0에 서버를 바인딩하는 것을 금지합니다. 그러나 그들 중 누구도 그렇게 하지 않을 것이라고 어떻게 확신할 수 있습니까? 모든 정책과 규칙을 알지 못하고 작업을 완료하려는 새로운 개발자는 어떻습니까?

FunBox에서 우리는 1년 전에 이 문제를 발견했습니다. 우리는 분산된 프런트엔드 팀을 보유하고 있으며 매주 또는 2주에 한 번씩 새 프로젝트를 시작합니다. 그래서 우리는 모든 것이 정상이고 아무도 실수로 걸려 넘어져 치명적인 실수를 할 수 없다는 것을 확인하고 싶었습니다.

이 문제를 해결하기 위해 우리는 webpack-dev-server에 대해 생성했습니다a small firewall! 들어오는 모든 요청을 가로채고 호스트의 IP를 허용 목록과 비교하여 확인하고 통과시키거나 거부합니다.

매우 간단하지만 강력한 솔루션입니다. 예, 그것은 방향성 해킹으로부터 당신을 구하지는 못하지만 스크립트 키디의 시도를 확실히 방지합니다.

용법

작동 방식은 다음과 같습니다.

먼저 패키지를 설치해야 합니다.

npm install --save-dev @funboxteam/webpack-dev-server-firewall

그런 다음 웹팩 구성에 before 후크 인 devServer 개체로 추가합니다.

const firewall = require('@funboxteam/webpack-dev-server-firewall');

module.exports = {
  // ...
  devServer: {
    before: firewall, // <-- 
    host: '0.0.0.0',
    port: 8080,
    contentBase: './public',
    historyApiFallback: true,
  },
};

그리고 서버를 시작합니다. 지금부터 방화벽은 127.0.0.1 이외의 IP에서 오는 모든 연결을 확인합니다. 이러한 요청이 표시되면 알림이 표시됩니다.

192.168.1.46 is trying to get access to the server. Allow? [yes / no]: 

연결을 승인하면 알려진 호스트 목록에 IP가 추가되고 다음 연결은 모두 자동으로 허용됩니다. 그러나 거부하면 403 HTTP 상태 코드와 함께 연결이 닫힙니다.

간단하면서도 효과적입니다. 이제 귀하는 귀하의 서버에 대한 모든 연결을 제어하고 아무도 귀하의 작업이나 중요한 데이터를 훔치지 못하도록 할 수 있습니다.

다음 프로젝트와 현재 프로젝트에서 자유롭게 사용하고 유용하다고 생각되면 알려주세요!

리포지토리에는 구현 및 디자인에 대한 자세한 내용이 있습니다.

펀박스 / webpack-dev-server-firewall

알 수 없는 IP에서 dev 서버에 액세스하는 것을 방지합니다.