Javascript 함수 디스패치

<button data-func="sayHello" data-args='["Alice"]'>Hello</button>
<button data-func="sum" data-args='[3,5]'>Sum</button>

<script>
/* 1) 허용 함수(whitelist) 정의 */
const allowed = {
  sayHello: (name) => alert(`Hello, ${name}!`),
  sum: (a, b) => console.log('sum:', a + b),
};

/* 2) 이벤트 위임으로 안전하게 실행 */
document.addEventListener('click', (e) => {
  const el = e.target;
  const funcName = el.dataset.func;
  if (!funcName) return;

  // 추가 안전검사: 허용 목록에 있는지 확인
  if (!Object.prototype.hasOwnProperty.call(allowed, funcName)) {
    console.warn(`허용되지 않은 함수 호출 시도: ${funcName}`);
    return;
  }

  // args 파싱 (옵션) — 안전하게 처리
  let args = [];
  if (el.dataset.args) {
    try {
      const parsed = JSON.parse(el.dataset.args);
      if (Array.isArray(parsed)) args = parsed;
    } catch (err) {
      console.warn('data-args JSON 파싱 실패:', err);
      // 필요하면 반환하여 실행 중단
      return;
    }
  }

  // 함수 실행 (안전 — whitelist에서 가져옴)
  try {
    allowed[funcName](...args);
  } catch (err) {
    console.error('함수 실행 중 오류:', err);
  }
});
</script>