Tagged Template Literals

Tagged Template Literals는 자바스크립트에서 문자열 조작을 위한 강력한 도구입니다. 이를 활용하여 동적 SQL 쿼리 생성과 XSS(Cross-Site Scripting) 방지를 위한 고급 템플릿 기법을 구현할 수 있습니다.

동적 SQL 쿼리 생성

Tagged Template Literals를 사용하면 안전하고 효율적으로 동적 SQL 쿼리를 생성할 수 있습니다.

기본 사용법

const sql = (strings, ...values) => {
  // SQL 쿼리 생성 로직
  return { text: finalQuery, values: sanitizedValues };
};

const userId = 5;
const query = sql`SELECT * FROM users WHERE id = ${userId}`;

이 방식은 SQL 인젝션 공격을 방지하면서도 동적으로 쿼리를 생성할 수 있게 해줍니다[1].

고급 기능

1. 동적 컬럼 선택:

const columnName = 'username';
const query = sql`SELECT ${sql.identifier(['users', columnName])} FROM users`;

2. 중첩 쿼리:

const subQuery = sql`SELECT id FROM active_users`;
const mainQuery = sql`SELECT * FROM users WHERE id IN (${subQuery})`;

이러한 기법들을 사용하면 복잡한 SQL 쿼리도 안전하게 구성할 수 있습니다[1].

XSS 방지를 위한 템플릿 기법

Tagged Template Literals는 XSS 공격을 방지하는 데에도 효과적으로 사용될 수 있습니다.

HTML 이스케이핑

const escapeHTML = (strings, ...values) => {
  return strings.reduce((result, str, i) => {
    const value = values[i] || '';
    return result + str + String(value).replace(/[&<>"']/g, char => {
      switch (char) {
        case '&': return '&amp;';
        case '<': return '&lt;';
        case '>': return '&gt;';
        case '"': return '&quot;';
        case "'": return '&#39;';
      }
    });
  }, '');
};

const userInput = '<script>alert("XSS")</script>';
const safeHTML = escapeHTML`<div>${userInput}</div>`;

이 방법을 사용하면 사용자 입력을 안전하게 HTML에 삽입할 수 있습니다[3].

CSP(Content Security Policy) 적용

Tagged Template Literals와 함께 CSP를 사용하면 XSS 공격에 대한 추가적인 방어 계층을 제공할 수 있습니다:

// 서버 측 CSP 헤더 설정
res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self'");

CSP는 인라인 스크립트 실행을 제한하고 외부 리소스 로딩을 제어하여 XSS 공격의 영향을 줄일 수 있습니다[3].

결론

Tagged Template Literals는 동적 SQL 쿼리 생성과 XSS 방지를 위한 강력한 도구입니다. 이를 통해 개발자는 보다 안전하고 유연한 코드를 작성할 수 있습니다. SQL 인젝션과 XSS 공격에 대한 방어를 강화하면서도, 동적이고 복잡한 문자열 조작을 수행할 수 있습니다. 이러한 기술을 마스터하면 웹 애플리케이션의 보안성과 유지보수성을 크게 향상시킬 수 있습니다.