Express 보안 - Helmet 사용하기

웹애플리케이션 개발시 보안 패키지로 Helmet에 대해 알아 보고자 합니다.

Helmet은 인기 많은 보안 패키지로 13개 미들웨어로 구성되어 있습니다. 모두 HTTP 헤더와 관련된 것들 로써 헤더의 동작을 바꾸거나 켜고 끄고 또는 조작하는 것들에 해당됩니다.

 

1. 사용법

• 설치하기 : npm install helmet
• app.js 파일에 helmet 불러와 사용하기

const helmet = require('helmet');

app.use(helmet());

• 상기와 같이 사용등록을 하면 helmet 패기키 13개 미들웨어를 모두 사용 가능합니다.
• 미들웨어 종류는 다음과 같습니다. 세부 사항은 아래 사이트에서 제공하는 설명서를 참조바랍니다.

https://www.npmjs.com/package/helmet

helmet

• Content-Security-Policy
  Cross-Origin-Embedder-Policy
  Cross-Origin-Opener-Policy
  Cross-Origin-Resource-Policy
  Origin-Agent-Cluster
  Referrer-Policy
  Strict-Transport-Security
  X-Content-Type-Options
  X-DNS-Prefetch-Control
  X-Download-Options
  X-Frame-Options
  X-Permitted-Cross-Domain-Policies
  X-Powered-By
  X-XSS-Protection

2.  중요 미들웨어 사용방법

• Content-Security-Policy
  • cross-site scripting 같은 다양한 외부 공격을 차단하는 정책입니다.
  • helmet을 적용하고 웹을 구동시켜 보면 보안 정책에 따라 외부 연동 기능을 사용하는 unsplash, mapbox, bootstrap, font, icon 등 관련 사이트로 접속 허용이 되지 않아 웹이 정상 동작하지 않게 됩니다.
  • 이에 따라 허용을 해주는 사이트를 미리 등록 시켜줘야 합니다.

const scriptSrcUrls = [
  "https://stackpath.bootstrapcdn.com",
  "https://api.tiles.mapbox.com",
  "https://api.mapbox.com",
  "https://kit.fontawesome.com",
  "https://cdnjs.cloudflare.com",
  "https://cdn.jsdelivr.net",
];
const styleSrcUrls = [
  "https://kit-free.fontawesome.com",
  "https://stackpath.bootstrapcdn.com",
  "https://api.mapbox.com",
  "https://api.tiles.mapbox.com",
  "https://fonts.googleapis.com",
  "https://use.fontawesome.com",
  "https://cdn.jsdelivr.net", // Udemy 강좌에서 누락된 부분
];
const connectSrcUrls = [
  "https://api.mapbox.com",
  "https://*.tiles.mapbox.com",
  "https://events.mapbox.com",
];
const fontSrcUrls = [];
app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: [],
      connectSrc: ["'self'", ...connectSrcUrls],
      scriptSrc: ["'unsafe-inline'", "'self'", ...scriptSrcUrls],
      styleSrc: ["'self'", "'unsafe-inline'", ...styleSrcUrls],
      workerSrc: ["'self'", "blob:"],
      childSrc: ["blob:"],
      objectSrc: [],
      imgSrc: [
        "'self'",
        "blob:",
        "data:",
        "https://res.cloudinary.com/dc2gmdv7u/", //SHOULD MATCH YOUR CLOUDINARY ACCOUNT!
        "https://images.unsplash.com",
      ],
      fontSrc: ["'self'", ...fontSrcUrls],
    },
  })
);

 

3.  특정 미들웨어 미사용 설정

일부 미들웨어 정책상 적용이 어려운 경우 기본 옵션을 다음과 같이 미사용으로 전환합니다.

예시:

// This disables the Content-Security-Policy
// and X-Download-Options headers.
app.use(
  helmet({
    contentSecurityPolicy: false,
    xDownloadOptions: false,
  })
);

 

4. Postman 으로 helmet 적용 사항 확인

Postman 통해서 get 요청시 응답 header에 helmet 미들웨어가 적용된 것 확인해 볼 수 있습니다.