JavaScript 썸네일형 리스트형 SQL Injection 취약점 개선 📌 SQL Injection 취약점 개선 외 조치 정리 (보안 개선 사례)1. SQL Injection 취약점 개선🔴 문제MyBatis에서 ${} 사용으로 사용자 입력이 SQL에 직접 삽입됨AND B.MBER_NM LIKE '%${searchKeyword}%'AND B.HNF_NO_TMP IN (${hnfNoTmp}) 🟢 개선#{} 바인딩으로 PreparedStatement 적용IN 절은 로 안전하게 처리AND B.MBER_NM LIKE CONCAT('%', #{searchKeyword}, '%')AND B.HNF_NO_TMP IN #{item} 💡 핵심 포인트${} → 문자열 치환 (취약)#{} → 바인드 변수 (안전)2. LIKE / REGEXP 검색 시 보안 처리🔴 문제와일드카드 및 정규식.. 더보기 JSP + JavaScript 환경에서 XSS 방어 실패 원인과 해결 📌 JSP + JavaScript 환경에서 XSS 방어 실패 원인과 해결1. 문제 상황JSP에서 ${ajaxId} 값을 JavaScript 및 HTML에 전달 및 hidden input 사용했음에도 XSS 방어 실패예:ajaxId: '' 2. 원인 분석🔥 (1) 컨텍스트 불일치 (핵심 원인)은 HTML escape만 수행하지만 아래는 JavaScript 문자열 컨텍스트'${ajaxId}' 👉 HTML escape ≠ JavaScript escape→ XSS 방어 실패🔥 (2) EL 직접 출력 (${ajaxId}) EL은 escape 없음악성 값 삽입 시 그대로 DOM에 반영🔥 (3) 서버 측 검증 부재ajaxId에 대한 제한 없음예:"> 👉 escape 이전에 입력 자체를 신뢰하면 안 됨3... 더보기 모달 팝업 내 동적 테이블 UI 정렬 문제 해결 📌 모달 팝업 내 동적 테이블 UI 정렬 문제 해결1. 문제 상황 (Problem)모달 팝업 내부에서 div 기반 테이블 UI 구현.div_th (헤더 영역) 높이가 서로 달라 UI가 깨짐.div_td 내용 길이에 따라 줄바꿈이 비정상적으로 동작 이름 종류 2. 원인 분석 (Root Cause)🔹 1) 높이 불일치각 .div_th는 콘텐츠 길이에 따라 height가 자동 결정됨동일 row 내에서도 높이가 다르게 렌더링됨🔹 2) 높이 측정 실패 (0 문제)팝업이 display: none 상태에서 실행offsetHeight = 0 발생🔹 3) 줄바꿈 문제긴 텍스트 또는 공백 없는 문자열 → overflow 발생기본 CSS로는 강제 줄바꿈이 .. 더보기 엑셀 다운로드 버튼 클릭 후 다른 버튼 동작 이상 문제 해결 📌 엑셀 다운로드 버튼 클릭 후 다른 버튼 동작 이상 문제 해결🧩 문제 상황동일한 을 사용하는 화면에서키워드 검색지역 조회엑셀 다운로드총 3개의 버튼 존재엑셀 다운로드 버튼 클릭 이후→ 다른 조회 버튼 클릭 시에도 엑셀 다운로드가 실행되는 문제 발생🔍 원인 분석엑셀 다운로드 시 아래 코드로 form.action을 변경form.action = "/welfare/listWelExcavateExcel.do";form.submit();문제는:한 번 변경된 form.action이 유지됨이후 다른 버튼 클릭 시에도 동일한 action으로 submit됨👉 즉, form 상태 오염(side effect) 발생💡 해결 전략❌ 기존 방식 (문제 발생 구조)하나의 form을 모든 버튼이 공유특정 버튼에서 form .. 더보기 엑셀 다운로드 기능 구현 및 안정성 개선 📌 엑셀 다운로드 기능 구현 및 안정성 개선1. 문제 상황기존 목록 조회 기능에서 검색 조건 기반 엑셀 다운로드 기능이 필요했다.단순 다운로드가 아니라 다음 조건을 만족해야 했다:사용자 검색 조건 유지페이징 무시 (전체 데이터 다운로드)추가 필터 (지역, 정렬, 목적 등) 반영초기 검색 키(initialKey) 대응2. 구현 방식✔️ Form 기반 POST 요청으로 엑셀 다운로드 처리 form.action = "/welfare/listWelExcavateExcel.do";form.method = "post";form.submit();GET 방식이 아닌 POST 방식을 사용하여파라미터 길이 제한 회피복잡한 검색 조건 전달 가능✔️ 검색 조건 동적 세팅form.searchKeyword.value = key.. 더보기 js13_effect /* jQuery Effect A. effect method show() : 문서객체를 보이게 하기 hide() : 문서객체를 보이게 하기 toggle() : show() hide() 번갈아 수행 slidedown() : 슬라이드 효과 보이기 slideup() : 슬라이드 효과 감추기 slidetoggle() : slidedown, slideup 번갈아 수행 fadein(): 서서히 보이기 fadeOut() : 서서히 감추기 fadeToggle() : fadein, fadeout 번갈아 수행 B. effect 메서드 4가지 형태 1. $(선택자).method() 2. $(선택자).method(speed) : slow, normal, fast, 숫자(ms) 3. $(선택자).method(speed, 콜백함.. 더보기 js12_events .reverse{ background-color: black; color:white; } // on() : 발생된 이벤트를 dom객체에 연결 $(function() { // 1. on(이벤트, function(event) {} ) $('h1').on('click', function(event) { $(this).html(function(index, html) { return html + '+'; }) }) // 2. 실습. reverse 클래스를 add or remove 하기 // mouseenter(addClass), mouseleave(removeClass) $('h1').on('mouseenter', function(e) { $(this).addClass('reverse'); }) $('h1').o.. 더보기 js11_Query 신기한 쿼리의 세계,,, $(function(){ $('h1').css('color','red'); // getElementTagName('h1').css() $('p').css('color', 'green'); $('#target').css('color', 'orange'); $('h1#target').css('color', 'mediumseagreen'); }); "Try it Yourself" 편집기. "Try it Yourself" 편집기를 사용하면 jQuery를 쉽게 배울 수 있습니다. 코드를 편집하고 브라우저에서 결과를 볼 수 있습니다. W3Schools에서 제공하는 무료 "내 학습" 프로그램으로 진행 상황을 추적하세요. 계정에 로그인하고 포인트 적립을 시작하세요! 이것은 선택적 기능입니다. .. 더보기 이전 1 2 3 다음