[EXT-029][실무] 검색어를 정규식에 안전하게 넣기
페이지 정보
본문
[이번 수업]
사용자가 입력한 검색어를 자바스크립트 정규식 안에 ‘문자 그대로’ 넣는 방법을 배웁니다. 정규식은 점(.), 별표(*), 괄호처럼 특별한 뜻을 가진 문자가 있어 문자열을 바로 패턴으로 만들면 검색 결과가 달라지거나 문법 오류가 날 수 있습니다. ECMAScript 2025 표준의 RegExp.escape()를 사용하면 동적 검색어를 안전한 패턴 조각으로 바꿀 수 있습니다.
[선수지식]
문자열, const, RegExp 생성자와 test()의 기본 사용법을 알고 있으면 됩니다. 정규식의 모든 문법을 외울 필요는 없지만 점이 ‘아무 문자 하나’를 뜻한다는 사실은 알아두세요.
[학습목표]
1. 일반 문자열과 정규식 패턴의 차이를 설명할 수 있습니다.
2. RegExp.escape()로 검색어를 리터럴, 즉 특별한 뜻 없는 문자 그대로 처리할 수 있습니다.
3. 이 함수가 해결하지 않는 보안 문제와 호환성 범위를 구분할 수 있습니다.
[핵심개념]
RegExp.escape(text)는 text와 같은 문자를 찾는 정규식용 문자열을 돌려줍니다. 예를 들어 ‘3.50’은 ‘\x33\.50’으로 바뀝니다. 점에는 역슬래시가 붙어 임의 문자가 아니라 실제 점이 됩니다. 첫 글자 3은 16진수 이스케이프 \x33이 됩니다. 이는 앞쪽의 역참조나 숫자 이스케이프와 이어 붙였을 때 3이 그 문법의 일부로 잘못 읽히는 상황을 막기 위한 표준 규칙입니다.
정규식 문법 문자와 슬래시는 역슬래시로, 하이픈 같은 일부 문장부호와 공백은 \xNN 형태로 바뀝니다. 줄바꿈 같은 제어 문자는 정해진 이스케이프로, 홀로 남은 UTF-16 서로게이트는 유니코드 이스케이프로 표현됩니다. 결과 모양을 사람이 임의로 줄이거나 특정 문자만 replace()하는 방식은 이런 경계 사례를 놓치기 쉽습니다.
[따라하기]
RegExp.escape를 지원하는 Node.js에서 아래 코드를 escape-search.js로 저장하세요.
```javascript
if (typeof RegExp.escape !== 'function') {
throw new Error('RegExp.escape를 지원하는 런타임이 필요합니다.');
}
const query = '3.50';
const unsafe = new RegExp(query, 'u');
const safe = new RegExp(RegExp.escape(query), 'u');
console.log(RegExp.escape(query));
console.log(unsafe.test('가격은 3x50달러'));
console.log(safe.test('가격은 3x50달러'));
console.log(safe.test('가격은 3.50달러'));
```
Windows PowerShell, macOS 터미널, Linux 셸에서 모두 `node escape-search.js`로 실행합니다. 예상 결과는 다음과 같습니다.
```text
\x33\.50
true
false
true
```
첫 번째 true는 안전하지 않은 패턴의 점이 x까지 허용했음을 보여 줍니다. safe는 실제 점이 있는 마지막 문장만 찾습니다. 구형 런타임에서 오류가 나오면 직접 만든 불완전한 대체 함수로 우회하지 말고 RegExp.escape 지원 런타임으로 갱신하거나 검증된 폴리필을 별도 검토하세요.
[흔한 실수]
첫째, `query.replace('.', '\\.')`처럼 점 하나만 바꾸면 다른 특수문자와 반복된 점을 놓칩니다. 둘째, RegExp.escape 결과를 다시 이스케이프하면 찾으려던 문자와 달라집니다. 셋째, 사용자가 정규식 문법 자체를 입력해야 하는 고급 검색에 적용하면 괄호와 수량자까지 일반 문자로 바뀝니다. 이 함수는 ‘문자 그대로 검색’할 때만 사용하세요.
[보안 주의]
검색어만 RegExp.escape로 처리하고 플래그와 패턴의 나머지 구조는 개발자가 고정하세요. 이 함수는 HTML, SQL, 셸 명령, URL을 위한 이스케이프가 아니며 replace()의 치환 문자열에 쓰이는 `$&`, `$1` 같은 문법도 처리하지 않습니다. 또한 개발자가 바깥에 작성한 패턴이 과도한 되돌아가기를 일으키면 정규식 서비스 거부 문제가 남습니다. 입력 길이 제한과 실행 시간 감시를 함께 적용하고, 실습은 본인 소유의 로컬 데이터에서만 수행하세요.
[직접 해볼 과제]
검색어를 ‘(할인)-50%’로 바꾸고 RegExp.escape 결과를 출력한 뒤, 같은 문구가 포함된 문자열은 true이고 괄호나 하이픈이 빠진 문자열은 false인지 확인하세요. 이어서 검색어 최대 길이를 100자로 제한하는 검사도 추가해 보세요.
[확인문제]
1. 사용자 검색어의 점을 그대로 RegExp 생성자에 넣으면 어떤 뜻으로 해석됩니까?
2. RegExp.escape가 첫 ASCII 영문자나 숫자를 16진수로 바꾸는 이유는 무엇입니까?
3. RegExp.escape만으로 정규식 서비스 거부 위험이 모두 사라지지 않는 이유는 무엇입니까?
[다음 학습]
다음에는 replace() 치환 문자열에서 `$&`와 `$1`이 어떤 뜻인지, 사용자 문자열을 함수형 치환으로 안전하게 다루는 방법을 학습합니다.
[공식 참고 자료]
ECMAScript 2025 RegExp.escape 표준
https://tc39.es/ecma262/2025/multipage/text-processing.html#sec-regexp.escape
ECMAScript 2025 치환 문자열 처리 표준
https://tc39.es/ecma262/2025/multipage/text-processing.html#sec-getsubstitution
TC39 RegExp Escaping 제안 저장소
https://github.com/tc39/proposal-regex-escaping
사용자가 입력한 검색어를 자바스크립트 정규식 안에 ‘문자 그대로’ 넣는 방법을 배웁니다. 정규식은 점(.), 별표(*), 괄호처럼 특별한 뜻을 가진 문자가 있어 문자열을 바로 패턴으로 만들면 검색 결과가 달라지거나 문법 오류가 날 수 있습니다. ECMAScript 2025 표준의 RegExp.escape()를 사용하면 동적 검색어를 안전한 패턴 조각으로 바꿀 수 있습니다.
[선수지식]
문자열, const, RegExp 생성자와 test()의 기본 사용법을 알고 있으면 됩니다. 정규식의 모든 문법을 외울 필요는 없지만 점이 ‘아무 문자 하나’를 뜻한다는 사실은 알아두세요.
[학습목표]
1. 일반 문자열과 정규식 패턴의 차이를 설명할 수 있습니다.
2. RegExp.escape()로 검색어를 리터럴, 즉 특별한 뜻 없는 문자 그대로 처리할 수 있습니다.
3. 이 함수가 해결하지 않는 보안 문제와 호환성 범위를 구분할 수 있습니다.
[핵심개념]
RegExp.escape(text)는 text와 같은 문자를 찾는 정규식용 문자열을 돌려줍니다. 예를 들어 ‘3.50’은 ‘\x33\.50’으로 바뀝니다. 점에는 역슬래시가 붙어 임의 문자가 아니라 실제 점이 됩니다. 첫 글자 3은 16진수 이스케이프 \x33이 됩니다. 이는 앞쪽의 역참조나 숫자 이스케이프와 이어 붙였을 때 3이 그 문법의 일부로 잘못 읽히는 상황을 막기 위한 표준 규칙입니다.
정규식 문법 문자와 슬래시는 역슬래시로, 하이픈 같은 일부 문장부호와 공백은 \xNN 형태로 바뀝니다. 줄바꿈 같은 제어 문자는 정해진 이스케이프로, 홀로 남은 UTF-16 서로게이트는 유니코드 이스케이프로 표현됩니다. 결과 모양을 사람이 임의로 줄이거나 특정 문자만 replace()하는 방식은 이런 경계 사례를 놓치기 쉽습니다.
[따라하기]
RegExp.escape를 지원하는 Node.js에서 아래 코드를 escape-search.js로 저장하세요.
```javascript
if (typeof RegExp.escape !== 'function') {
throw new Error('RegExp.escape를 지원하는 런타임이 필요합니다.');
}
const query = '3.50';
const unsafe = new RegExp(query, 'u');
const safe = new RegExp(RegExp.escape(query), 'u');
console.log(RegExp.escape(query));
console.log(unsafe.test('가격은 3x50달러'));
console.log(safe.test('가격은 3x50달러'));
console.log(safe.test('가격은 3.50달러'));
```
Windows PowerShell, macOS 터미널, Linux 셸에서 모두 `node escape-search.js`로 실행합니다. 예상 결과는 다음과 같습니다.
```text
\x33\.50
true
false
true
```
첫 번째 true는 안전하지 않은 패턴의 점이 x까지 허용했음을 보여 줍니다. safe는 실제 점이 있는 마지막 문장만 찾습니다. 구형 런타임에서 오류가 나오면 직접 만든 불완전한 대체 함수로 우회하지 말고 RegExp.escape 지원 런타임으로 갱신하거나 검증된 폴리필을 별도 검토하세요.
[흔한 실수]
첫째, `query.replace('.', '\\.')`처럼 점 하나만 바꾸면 다른 특수문자와 반복된 점을 놓칩니다. 둘째, RegExp.escape 결과를 다시 이스케이프하면 찾으려던 문자와 달라집니다. 셋째, 사용자가 정규식 문법 자체를 입력해야 하는 고급 검색에 적용하면 괄호와 수량자까지 일반 문자로 바뀝니다. 이 함수는 ‘문자 그대로 검색’할 때만 사용하세요.
[보안 주의]
검색어만 RegExp.escape로 처리하고 플래그와 패턴의 나머지 구조는 개발자가 고정하세요. 이 함수는 HTML, SQL, 셸 명령, URL을 위한 이스케이프가 아니며 replace()의 치환 문자열에 쓰이는 `$&`, `$1` 같은 문법도 처리하지 않습니다. 또한 개발자가 바깥에 작성한 패턴이 과도한 되돌아가기를 일으키면 정규식 서비스 거부 문제가 남습니다. 입력 길이 제한과 실행 시간 감시를 함께 적용하고, 실습은 본인 소유의 로컬 데이터에서만 수행하세요.
[직접 해볼 과제]
검색어를 ‘(할인)-50%’로 바꾸고 RegExp.escape 결과를 출력한 뒤, 같은 문구가 포함된 문자열은 true이고 괄호나 하이픈이 빠진 문자열은 false인지 확인하세요. 이어서 검색어 최대 길이를 100자로 제한하는 검사도 추가해 보세요.
[확인문제]
1. 사용자 검색어의 점을 그대로 RegExp 생성자에 넣으면 어떤 뜻으로 해석됩니까?
2. RegExp.escape가 첫 ASCII 영문자나 숫자를 16진수로 바꾸는 이유는 무엇입니까?
3. RegExp.escape만으로 정규식 서비스 거부 위험이 모두 사라지지 않는 이유는 무엇입니까?
[다음 학습]
다음에는 replace() 치환 문자열에서 `$&`와 `$1`이 어떤 뜻인지, 사용자 문자열을 함수형 치환으로 안전하게 다루는 방법을 학습합니다.
[공식 참고 자료]
ECMAScript 2025 RegExp.escape 표준
https://tc39.es/ecma262/2025/multipage/text-processing.html#sec-regexp.escape
ECMAScript 2025 치환 문자열 처리 표준
https://tc39.es/ecma262/2025/multipage/text-processing.html#sec-getsubstitution
TC39 RegExp Escaping 제안 저장소
https://github.com/tc39/proposal-regex-escaping
- 이전글[EXT-030][실무] 바꿀 문장의 달러 기호 안전하게 다루기 26.09.08
- 다음글[EXT-028][실무] 여러 언어의 글자 범주를 정규식으로 검사하기 26.09.08
댓글목록
등록된 댓글이 없습니다.