분류 전체보기105 CSRF와 XSS: 개념과 방지 방법 1. CSRF(Cross-Site Request Forgery)1.1. CSRF란?CSRF는 공격자가 사용자의 권한을 악용하여, 사용자가 의도하지 않은 요청을 특정 웹 애플리케이션에 보내는 공격 기법입니다.예를 들어, 사용자가 은행에 로그인한 상태에서 공격자가 만든 악성 웹사이트를 방문하면, 공격자의 스크립트가 사용자의 인증된 세션을 이용해 금전 거래 요청을 보낼 수 있습니다.1.2. CSRF의 작동 방식사용자가 정상적으로 웹사이트(예: 은행)에 로그인하여 세션을 유지하고 있습니다.공격자는 악성 링크나 스크립트를 포함한 이메일, 메시지, 웹사이트 등을 사용자가 클릭하도록 유도합니다.사용자가 악성 링크를 클릭하면, 공격자는 사용자의 인증된 세션 쿠키를 이용해 의도하지 않은 요청을 해당 웹사이트로 보냅니다... 2025. 1. 21. 세션 스토리지와 로컬 스토리지 브라우저 저장소(Session Storage와 Local Storage) 완벽 정리1. 세션 스토리지(Session Storage)1.1. 특징세션 단위 저장소세션 스토리지에 저장된 데이터는 브라우저의 탭 단위로 저장됩니다.브라우저 탭이 닫히면 해당 탭의 세션 스토리지가 사라집니다.동일한 탭에서만 접근 가능같은 브라우저의 다른 탭이나 창에서는 접근할 수 없습니다.데이터 용량일반적으로 약 5MB 크기의 데이터를 저장할 수 있습니다.1.2. 사용 예시javascript// 데이터 저장 sessionStorage.setItem('key', 'value');// 데이터 가져오기 const value = sessionStorage.getItem('key'); console.log(value); // 출력: 'va.. 2025. 1. 21. Vue.js + Spring 네이버 맵스 사용하기 4 (Direction 5 API) 이번에는 저번에 했던거에서 좌표(경도, 위도) 값을 통해서 출발지와 도착지를 작성하면 어떻게 찾아갈 수 있는 지 값을 주는 Direction 5 API를 사용해보려고 합니다. 프론트 전체 코드 경로 검색 경로 안내 # 안내 거리 (km) 소요 시간 (분:초) {{ index + 1 }} {{ guide.instructions }} {{ (guide.distance / 1000).toFixed(2) }} {{ Math.floor(guide.duration / (1000 * 60)) }}분 .. 2025. 1. 13. Vue.js + Spring 네이버 맵스 사용하기 3 (프론트와 백엔드 연결) 이전 글에서 백엔드에서 좌표 값을 받아오는 거까지 완료하였다.이번에는 프론트엔드에서 값을 요청하여 파라미터로 값을 전달하고 주고 받는 것 까지 진행클라이언트 아이디와 시크릿 넘버는 자기 자신의 값을 넣어줘야 한다. 경로 검색 여기서는 axios 요청도 따로 처리해둬서 PathVariable 방식으로 요청하고 있다. package com.example.maptest.controller;import java.net.URI;import java.net.URLEncoder;import java.util.HashMap;import java.util.Map;import org.json.JSONArray;import org.json.JSONObject;import org.spring.. 2025. 1. 10. Vue.js + Spring 네이버 맵스 사용하기 2 (주소 검색을 통해서 정확한 주소 받아오기) 경로 검색 이렇게 코드 작성해서 gecoding으로 naver maps 에 요청을 통해서 값을 받으려고 하였으나,네이버 정책이 그렇다고 합니다.이를 해결하기 위해서는 백엔드 서버를 통해서 요청을 하든가, 프록시 서버를 통해서 요청을 해야하는데어차피 백엔드 서버를 구현할 예정이기 때문에 백엔드 코드를 하드 코딩하여 요청을 해보았습니다. @RestControllerpublic class HomeController { String clientId; String clientSecret; String query = "불정로 6"; @RequestMapping("/") public String home() { return "Hello, World"; } @RequestMapping("/api/ge.. 2025. 1. 9. Vue.js + Spring 네이버 맵스 사용하기 1 (기본 네이버 맵스 실행시키기) Naver Maps를 API를 통해서 사용해보려고 한다. 기술 스택은vue.js와 Spring, JPA, oracle을 사용해서 진행 1. 요구 분석네이버 맵스에서 현재 위치에서 원하는 목적지를 검색하여 도달하는 방법 (Ex. 택시(요금), 버스, 걷기 등등)이 나오고 검색한 위치와 값들을 oracle에 저장하려고 한다. 2. 초기 세팅vue.js는 visual studio code로 초기 세팅 완료.Spring은 STS(spring Tool Suite)로 초기 세팅 완료DB의 경우에는 Oracle을 활용하여 초기 세팅 완료 3. Application 등록기업용 아이디나 개인 아이드를 통해서 네이버 클라우드 플랫폼에 접속. 위에서 사용하고 싶은 기술들을 사용하려면 필요한 Aplication은1) Web.. 2025. 1. 9. 이전 1 2 3 4 ··· 18 다음
