accept="image/*"인데 다른 파일도 첨부되네? 이유와 대응법 정리

결론: accept="image/*"는 브라우저에게 "이 input에는 이미지 파일만 선택하게 해달라"고 권장하는 역할만 할 뿐 강제로 적용할 수 있는건 아니다!

---

브라우저는 클라이언트 선택 UI만 제한할 뿐, 완벽한 필터가 아님

• 사용자가 파일 탐색기에서 직접 확장자 변경하거나,
• 드래그 앤 드롭 또는 스크립트를 통한 조작으로 .csv나 다른 포맷도 첨부할 수 있다.
• 즉, accept는 보안 기능이 아니라 UX 개선용 힌트일 뿐

---

JavaScript에서 파일 확장자나 MIME 타입 검사를 추가하는 것을 추천

const input = document.querySelector('input[type="file"]');

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file.type.startsWith('image/')) {
    alert('이미지 파일만 업로드할 수 있습니다.');
    input.value = ''; // 파일 선택 취소
  }
});

또는 확장자로 검사도 가능

const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];

const fileName = file.name.toLowerCase();
const isValid = allowedExtensions.some(ext => fileName.endsWith(`.${ext}`));

if (!isValid) {
  alert('지원하는 이미지 파일만 첨부하세요.');
  input.value = '';
}

---

결론

• accept="image/*"는 UI 제한일 뿐, 신뢰할 수 있는 필터가 아니다.
• JavaScript에서 타입 검증, 서버에서도 Content-Type 및 확장자 확인은 필수...