웹사이트 검색

ExpressJs의 Express-Validator를 사용하여 양식 입력을 효율적으로 처리하는 방법

저자는 Write for DOnations 프로그램의 일환으로 기부금을 받기 위해 OWASP 재단을 선택했습니다.

소개

최신 웹 개발자는 웹 양식, 파일 업로드 또는 웹사이트의 기타 입력 등 항상 입력을 처리합니다. 따라서 사용자로부터 받는 입력이 합법적이고 무해한지 확인하는 것이 필수적입니다.

웹 개발이 발전함에 따라 공격자는 더 많은 것을 개발했으며 양식 입력과 같은 다양한 측면에서 웹 사이트를 악용하는 방법을 찾았습니다. XSS(교차 사이트 스크립팅) 및 SQL 삽입과 같은 공격은 그 어느 때보다 더 흔해지고 해로워졌습니다. 따라서 모든 개발자는 웹 애플리케이션과 서버의 무결성을 보장하기 위해 사용자로부터 받은 데이터가 악의적이지 않거나 삭제되었는지 확인해야 합니다.

이 튜토리얼에서는 데이터 일관성과 서버 보안을 보장하기 위해 JavaScript의 Express-Validator 패키지를 사용하여 웹 양식의 사용자 입력을 검증하고 삭제하는 방법을 배웁니다.

전제조건

이 튜토리얼을 제대로 이해하려면 다음 설정이 필요합니다.

  1. 시스템에 버전 14.x 이상의 Node J를 설치하세요. 이 DO 튜토리얼을 사용하여 시스템에 최신 Node Js 버전을 설치할 수 있습니다.

  2. JavaScript로 코딩하는 방법을 알아야 합니다.

  3. 시스템에 Express JS 버전 4.x 이상이 설치되어 있어야 합니다. 이를 사용하여 Express 서버를 설정할 수 있습니다.

이러한 요구 사항을 충족한 후 자습서를 계속 진행할 수 있습니다.

웹 개발에서 입력 유효성 검사의 중요성

입력 유효성 검사 및 삭제는 아래에 언급된 다양한 이유로 개발자의 핵심 작업입니다.

  1. 삽입 공격 방지: 애플리케이션이 SQL 주입 공격에 취약한 시나리오를 생각해 보세요. 이 취약점은 인증 양식을 통한 사용자 인증 과정에서 SQL 코드의 잘못된 처리로 인해 발생합니다. 공격자는 사용자 자격 증명 대신 일부 악성 SQL 코드를 전달하고 서버에 대한 액세스 권한을 얻음으로써 이를 악용할 수 있으며, 이는 애플리케이션의 게임 종료입니다.

  2. 데이터 무결성 및 일관성: 사용자 입력이 검증되면 서버에 저장되는 데이터에 일관성이 생기므로 데이터 작업이 복잡해집니다. 예를 들어 사용자가 연령에 대한 입력으로 텍스트 데이터를 보낼 수 있는 경우 서버에 저장된 데이터에 불일치가 발생합니다.

  3. 데이터 호환성: 대규모 조직의 다양한 엔드포인트에서 데이터를 사용할 때 데이터 유형은 일관되어야 합니다. 예를 들어, 사용자가 이메일 자격 증명에 적절한 이메일 대신 쓰레기 데이터를 입력할 수 있다면 조직이 사용자에게 연락해야 할 때 문제가 발생할 수 있습니다.

  4. 향상된 사용자 경험: 입력이 검증되면 개발자는 사용자에게 적절하고 즉각적인 피드백을 보내는 로직을 생성하여 사용자가 제공한 잘못된 입력을 수정할 수 있습니다. 이는 전반적인 사용자 경험을 향상시킵니다.

개발자로서 웹 양식 및 웹 사이트의 입력을 효율적이고 안전하게 처리해야 하는 데는 여러 가지 이유가 있습니다. 다음 섹션에서는 Express Js 앱의 Express-Validator 패키지를 사용하여 양식 입력에 대한 유효성 검사 논리를 만드는 방법을 알아봅니다.

입력 검증 및 정리에 사용되는 용어

검증기 – 검증기는 입력을 받아 일부 기준에 따라 특정 검사를 수행하는 기능입니다.

Sanitizer – Sanitizer는 입력 데이터가 안전하고 필수 형식을 준수하는지 확인하기 위해 입력 데이터를 수정하거나 정리하는 데 사용되는 기능입니다.

검증 체인 – Express-Validator의 검증 체인은 입력에 적용되는 일련의 검증기 또는 새니타이저입니다. 예를 들어, 사용자가 이메일을 입력하도록 하는 양식이 있고 데이터베이스의 데이터를 일관되게 유지하기 위해 입력(왼쪽 또는 오른쪽 끝)에 공백이 허용되지 않기를 원한다고 가정합니다. .isEmail()과 같은 유효성 검사 체인을 사용하여 this.trim()을 달성할 수 있습니다[이에 대해서는 이후 섹션에서 배우게 됩니다]. 먼저 입력이 이메일인지 확인합니다. 이메일 데이터인 경우 trim() 살균제는 입력의 양쪽 끝에서 공백을 제거합니다.

Express-Validator 설치 및 Express Server와 통합

이제 이 튜토리얼의 다음 섹션에서 입력 유효성 검사 및 삭제 기술을 구현하는 방법을 배우게 됩니다. 먼저 npm 프로젝트를 설정한 다음 Express Js, Express-Validator 및 튜토리얼을 따르는 데 필요한 기타 종속성을 설치합니다.

  1. Express 서버를 생성하려면 먼저 npm 프로젝트를 생성해야 합니다. 먼저 터미널을 열고 다음 명령을 입력하세요.

    cd <project directory>npm init

  2. 그런 다음 애플리케이션에 대한 정보를 묻는 입력을 요청받게 됩니다. 특정 세부 사항을 입력하거나 'Enter'를 계속 누를 수 있습니다. 이제 프로젝트 폴더에 index.js 파일을 만듭니다. 이것이 서버의 진입점이 됩니다. 마지막으로 Express 서버를 생성하려면 Express Js 패키지를 설치해야 합니다. 이는 다음 명령을 사용하여 수행할 수 있습니다.

    npm install express

  3. 이제 프로젝트에 Express J가 설치되었습니다. 다음 작업은 다음 명령으로 수행할 수 있는 Express-Validator를 설치하는 것입니다.

    npm install Express-Validator

  4. 우리는 지금까지 기본 종속성을 충족했습니다. 그러나 프로젝트에 nodemon을 설치할 수 있습니다. 이는 오류가 발생하더라도 Node Js 앱을 계속 실행하는 데 유용합니다. 설치하려면 다음 명령을 입력하십시오.

    npm install nodemon

이제 모든 요구 사항을 설치했으며 서버 작업을 시작하고 양식에 유효성 검사를 입력할 수 있습니다. 이 프로젝트는 이후의 모든 섹션에서 사용되는 기본 구조가 되며, 각 섹션에서는 서로 다른 주제를 설명합니다.

다음 섹션에서는 Express-Validator가 배후에서 작동하는 방식과 이를 양식에서 사용하여 다양한 필드에 대한 입력 유효성 검사를 수행하는 방법을 설명합니다.

Express-Validator의 기본 양식 유효성 검사 기술

Express-Validator는 Express JS 모듈에서 제공하는 미들웨어와 문자열 데이터 유형에 대한 유효성 검사기와 삭제기를 제공하는 Validator.js 모듈의 조합입니다. Express-Validator는 유효성 검사 체인을 사용하여 입력 데이터의 유효성을 검사하는 기능을 제공합니다.

이 섹션에서는 이전 섹션에서 설정한 Node Js 프로젝트를 사용하여 Express-Validator에서 유효성 검사기를 사용하는 방법을 알아봅니다. 이를 위해 사용자가 자격 증명(이름, 이메일, 비밀번호)을 사용하여 웹 응용 프로그램에 등록할 수 있도록 Express Server에 경로를 만듭니다. 그런 다음 사용자가 서버에 등록할 때마다 입력을 확인하는 미들웨어를 만듭니다.

index.js 파일을 열고 다음 코드를 입력하세요.

const express = require("express");
const app = express();
const { body, validationResult } = require("express-validator");

// Express.js middleware to use JSON objects
app.use(express.json());

app.post(
  "/signup",
  // using validation to verify valid inputs (MIDDLEWARE)
  [
    [
      body("name").notEmpty(),
      body("email").isEmail(),
      body("password").notEmpty(),
    ],
  ],
  async (req, res) => {
    const errors = validationResult(req);

    if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() });
      }

    res.status(200).json({success:'Successful Sign Up!'})
  }
);

// Server Listening at port 3000
const port = 3000;
app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});

여기서는 Express J를 가져온 다음 Express 앱을 만듭니다. 그런 다음 JavaScript 파괴를 사용하여 Express-Validator에서 본문 및 유효성 검사 결과 함수를 가져옵니다.

정보 body() 메서드는 POST 요청으로 전송된 데이터와 같이 사용자의 요청 페이로드( req)에서 입력 데이터를 검증하고 선택하기 위한 검증 체인을 만드는 데 사용됩니다. validationResult() 메서드는 HTTP 요청의 유효성 검사 체인 결과를 JavaScript 개체로 저장합니다. 이 객체가 비어 있으면 페이로드가 모든 유효성 검사 테스트를 통과했음을 의미합니다. 그렇지 않은 경우 페이로드에 대한 정보와 만족하지 못한 기준을 저장합니다.

그런 다음 Express J의 JSON 미들웨어를 사용하여 JSON 개체로 작업합니다.

마지막으로 HTTP - POST(GET, PUT 등과 같은 다른 유형의 요청으로 작업할 수 있음) 요청을 사용하여 Express 경로를 생성합니다. 여기서 만든 경로는 웹 서버의 가입 양식에 대한 경로를 나타냅니다. 양식은 클라이언트측 HTML을 사용하여 입력을 받고, 서버는 HTML DOM의 본문을 사용하여 웹 양식의 입력 필드에 액세스하여 이를 처리합니다.

Express-Validator의 body() 메소드는 의 인수와 동일한 name 속성을 갖는 HTML 구성 요소의 값을 가져옵니다. body() 메소드; 즉, body(“password ”)는 name 속성을 가진 HTML 입력 구성 요소의 값을 비밀번호로 가져옵니다.

그런 다음 이 값에 대해 Express-Validator에서 제공하는 유효성 검사기를 사용할 수 있습니다. 이 예에서는 isEmail() 및 notEmpty()라는 두 개의 유효성 검사기를 사용했습니다. 이러한 유효성 검사기는 입력이 이메일인지, 비어 있지 않은지 각각 확인합니다. 입력이 유효성 검사기의 기준과 일치하지 않으면 Express-Validator는 validationResult() 형식의 개체로 오류를 발생시킵니다. 그러나 입력이 적용된 유효성 검사기의 기준과 일치하는 경우 validationResult() 개체는 비어 있게 됩니다. 그런 다음 '/signup' 경로의 함수 정의 내에서 if 문을 사용하여 간단한 확인을 생성하는 데 사용됩니다. validationResult() 배열이 비어 있지 않다고 가정합니다. 이 경우 응답 코드 400의 오류가 클라이언트로 전송됩니다. 그렇지 않은 경우 이 예에서는 성공적으로 가입했다는 메시지가 클라이언트에 전송됩니다. (이는 예시일 뿐이며, 입력 자격 증명을 사용하여 사용자를 인증하는 등 입력 데이터를 데이터베이스에 저장하는 등 모든 작업을 수행할 수 있습니다. , 등.). 그런 다음 포트 3000의 localhost에서 서버를 호스팅합니다.

이 예에서는 이러한 기본 유효성 검사기가 사용되었습니다. 그러나 Express-Validator 패키지에서 제공하는 다른 유효성 검사기를 사용할 수 있습니다. 다음 표에서는 isEmail() 및 notEmpty()와 동일한 방식으로 사용할 수 있는 일반적으로 사용되는 유효성 검사기를 찾을 수 있습니다.

isDate

입력이 날짜 객체인지 확인합니다.

isEmpty

입력이 빈 문자열인지 확인합니다.

isHash(algorithm)

입력이 해시인지 확인합니다. 인수는 MD5, SHA 등과 같은 해싱 알고리즘을 사용합니다.

isJWT

입력이 JWT(JavaScript Web Token)인지 확인합니다.

isURL

입력이 URL인지 확인합니다.

isBoolean

입력이 부울(True 또는 False)인지 확인합니다.

isNumeric

입력이 숫자 데이터 유형인지 확인합니다.

isAlphanumeric

입력이 영숫자인지 확인합니다.

isInt

입력이 정수 유형인지 확인합니다.

isDecimal

입력이 기본 10진수인지 확인합니다.

isFloat

입력이 부동 소수점 숫자인지 확인합니다.

이제 다음 섹션에서는 양식(예: 사진 또는 서명)을 통한 파일 업로드를 안전하고 제어하기 위해 파일 입력의 유효성을 검사하는 방법을 알아봅니다.

웹 양식에서 파일 입력 유효성 검사 처리(선택 사항)

이전 섹션에서는 Express-Validator를 사용하여 일반적으로 웹 양식에 전달되는 입력의 유효성을 검사하는 방법을 배웠습니다. 이 섹션에서는 서버에 악성 파일이 업로드되는 것을 방지하기 위해 파일 입력을 처리하고 서버에 업로드하기 전에 유효성을 검사하는 방법을 알아봅니다. 이러한 보안상의 이점 외에도 파일 입력 크기에 제한을 두어 큰 파일이 서버를 채우지 않도록 할 수 있습니다.

양식을 사용하여 파일 업로드를 처리하기 위해 Node Js의 multer 패키지를 사용할 것입니다. 이 광범위한 DO 튜토리얼을 사용하여 multer 작동 방식, Node.js 및 Express에서 multer를 사용하여 파일 업로드를 이해할 수 있습니다. 이제 Express-Validator는 파일 입력 처리를 위한 특정 기능을 제공하지 않습니다. 그러나 웹 양식에 대한 파일 입력 유효성 검사를 처리하기 위해 multer 라이브러리를 Express-Validator의 확장으로 결합할 수 있습니다. multer를 사용하기 전에 Node Js 프로젝트에 패키지를 설치해야 하며, 이는 다음 명령을 통해 수행할 수 있습니다.

cd <project folder>

npm install multer

이제 Express-Validator를 사용하여 Express 서버와 multer를 통합하는 방법을 살펴보겠습니다. 다음 코드에서는 multer 및 Express-Validator를 구현하고 업로드된 파일에 몇 가지 제한 사항을 적용합니다.

const express = require("express");
const app = express();
const { body, validationResult } = require("express-validator");
const multer = require("multer");

// Express.js middleware to use JSON objects
app.use(express.json());

// CREATING MIDDLEWARE USING MULTER TO HANDLE UPLOADS

// creating a storage object for multer
const storage = multer.diskStorage({
  // providing the destinations for files to be stored in server
  destination: "./uploads/",
 });

// defining file storage to local disk and putting constraints on files being uploaded
const upload = multer({
  storage: storage,
  limits: { fileSize: 1*1024*1024 }, // file size in bytes

  //   you can add other constraints according to your requirement such as file type, etc.
});

app.post(
  "/fileUpload",

  //   input validation for files to ensure only a single file is uploaded in one request
  upload.single("fileUpload"),

  // using validation to verify valid inputs
  [
    body("fileDescription").notEmpty(),
    // you can add as many validators as you require
  ],
  async (req, res) => {
    const errors = validationResult(req);

    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
const file = req.file;
    // perform any other tasks on the file or other form inputs

    res.status(200).json({ success: "Successful Sign Up!" });
  }
);

// Server Listening at port 3000
const port = 3000;
app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});

여기서는 네트워크를 통해 JSON 개체와 작업하는 데 필요한 가져오기 및 Express JSON 미들웨어를 정의했습니다. 그런 다음 multer가 작동하도록 스토리지 서버를 정의합니다. 예제는 아래에 자세히 설명되어 있습니다.

  1. 먼저 스토리지 카테고리를 정의합니다. Multer는 디스크 저장소와 메모리 저장소(버퍼)를 모두 제공합니다. 이 예에서는 디스크 스토리지를 사용하여 메모리를 낭비하는 대신 업로드된 파일을 서버의 로컬 디스크에 저장했습니다.

  2. 디스크 저장소를 사용하는 경우 업로드된 파일이 저장될 디렉터리 위치를 제공해야 합니다. 이는 경로를 값으로 사용하는 대상 키워드를 사용하여 수행할 수 있습니다. 여기서는 프로젝트 디렉터리 자체의 업로드 폴더를 사용했습니다.

  3. 그런 다음 파일 업로드를 처리하는 업로드 개체를 만듭니다. 이는 ulter 가져오기를 호출하고 JavaScript 개체를 입력으로 사용합니다. 이 JavaScript 개체에는 입력 파일을 디스크에 저장하기 전에 충족해야 하는 다양한 제약 조건/검증이 포함되어 있습니다. Storage는 이전에 정의된 저장 개체를 입력으로 사용하는 필수 인수입니다.

  4. 1MB보다 큰 파일이 없는지 확인하기 위해 제한 옵션을 사용하는 또 다른 검증을 추가했습니다. 크기를 바이트 단위로 계산합니다.

정보: 요구 사항에 따라 제한 개체에서 다른 유효성 검사/검사를 수행할 수 있습니다.

  1. 그런 다음 파일 업로드를 처리하기 위한 Express 경로를 만들고 미들웨어 upload.single()을 추가하여 한 요청에 하나의 파일만 업로드되도록 합니다. HTML DOM에서 fileUpload라는 입력 필드를 필수 인수로 사용합니다.

  2. 그런 다음 이전 섹션에서 설명한 대로 Express-Validator 미들웨어를 추가합니다.

  3. 마지막으로 경로를 처리하고 입력 유효성 검사에 오류가 있는지 확인하는 논리를 만듭니다.

  4. req.file 객체의 경로 로직에서 업로드된 파일에 액세스할 수 있습니다.

여기서는 Multer를 사용하여 파일 입력 유효성 검사를 처리하고 이를 Express-Validator 유효성 검사 미들웨어와 통합하는 방법을 배웠습니다. 또한 Multer 및 Express-Validator에서 기타 다양한 고급 또는 사용자 정의 유효성 검사 방법을 추가할 수 있습니다. 다음 섹션에서는 SQL 주입과 같은 공격을 방지하는 데 필요한 입력 값을 삭제하는 방법을 알아봅니다.

양식 입력의 삭제

지금까지 데이터 및 파일 입력에 대한 입력 유효성 검사를 수행하는 방법을 배웠습니다. 이제 입력을 삭제(검증)하는 방법을 학습하여 해당 지식을 확장하겠습니다. Express-Validator는 Validator.js 라이브러리에서 다양한 삭제 기능을 제공합니다.

sanitizer를 설명하기 위해 'Express-Validator의 기본 양식 유효성 검사 기술'과 유사한 접근 방식을 사용하고 경로에 sanitizer를 추가하겠습니다.

const express = require("express");
const app = express();
const { body, validationResult } = require("express-validator");

// Express.js middleware to use JSON objects
app.use(express.json());


app.post(
    "/sanitizedInput",
    // sanitizing inputs
    [
      [
        body("name").notEmpty().trim(),
        body("email").isEmail().trim(),
        body("dob").toDate(),
      ],
    ],
    async (req, res) => {
      const errors = validationResult(req);

      if (!errors.isEmpty()) {
          return res.status(400).json({ errors: errors.array() });
        }
      // remaining logic for your route
      res.status(200).json({success:'Successful Sign Up!'})
    }
  );

// Server Listening at port 3000
const port = 3000;
app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});

필요한 패키지를 가져오고 Express JSON 미들웨어를 사용하여 JSON 개체를 처리하여 또 다른 Express 서버를 만듭니다. 그런 다음 삭제된 입력(/sanitizedInput)을 처리하기 위한 경로를 생성하고 경로 논리를 작성합니다.

이번에도 Express-Validator 미들웨어를 추가해야 합니다. 여기서는 name, email 및 dob의 세 가지 입력 필드를 사용합니다. 먼저 notEmpty()를 사용하여 이름이 비어 있지 않은지 확인한 다음 입력 값의 양쪽 끝에서 공백을 제거하는 trim() 새니타이저를 적용합니다. 마찬가지로 이메일 입력 필드의 경우 먼저 isEmail()을 사용하여 유효한 이메일인지 확인한 다음 trim() 새니타이저를 적용하여 양쪽 끝의 공백을 제거합니다.

dob 입력 필드에서는 toDate() 새니타이저(검사기 없음)를 사용하여 입력 문자열을 날짜 객체로 변환합니다. 문자열이 실제 날짜가 아닌 경우 toDate()는 null 값을 반환합니다.

그런 다음 validationResult() 객체에 저장된 오류가 없는지 확인하고 경로에 대한 나머지 로직을 계속 진행할 수 있는지 확인합니다.

참고: body("name").notEmpty().trim()에서와 같이 단일 입력에 여러 유효성 검사기와 새니타이저를 사용하면 유효성 검사기/새니타이저 체인이 생성됩니다. 유효성 검사기/새니타이저의 이러한 체인 또는 순차적 사용은 유효성 검사 체인을 생성합니다.

Express-Validator에는 blacklist(), whitelist() 등과 같은 더 많은 살균제가 있습니다. 귀하의 요구 사항.

결론

이 튜토리얼에서는 서버에서 양식 입력을 효과적으로 처리하는 방법을 배웠습니다. 입력 유효성 검사 및 삭제 기술을 사용하는 Express-Validator 라이브러리를 사용하여 서버를 구축했습니다. 이 지식을 바탕으로 동일한 라이브러리에서 제공되는 다양한 유효성 검사기와 새니타이저를 사용하여 입력 유효성 검사를 더욱 확장할 수 있습니다.

Express-Validator 및 Multer 모두 사용자 정의 유효성 검사기를 생성할 수 있으며, 이를 연습으로 사용하여 복잡한 프로젝트에서 생산성을 높일 수 있습니다.

관련기사: