웹8 Math.random 보안 취약 사항 (적절하지 않은 난수값 사용) CWE-330, CWE-338 JavaScript에서 Maht.random값을 사용하니 CWE-330, CWE-338에 대한 보안취약점이 있다는 것을 알게 되었다. GPT는 해당 코드에 대해 다음과같이 설명하고 있다. HTML 삽입 미리보기할 수 없는 소스 즉, 해당 함수는 공격자가 SW에서 생성되는 다음 숫자를 예상하여 시스템을 공격할 수 있다라는 것이다. 따라서 예측하기 어려운 숫자를 생성해야 하는데 다음과 같은 방법으로 대체 가능하다. let uint32Array = new Uint32Array(1); // Web Crypto API를 사용하여 암호학적 PRNG로 임의의 숫자를 생성 window.crypto.getRandomValues(uint32Array); const randomNumber = uint32Array[0] / .. 2024. 3. 7. javascript 해당 월의 주차, 시작일과 종료일 구하기 해당월의 주차를 구해야하는 일이 생겼다. moment등에서 일반적으로 사용되는 주차를 반환하는 함수나 계산 방법으로는 요구사항에 맞지 않았기에 계산방법을 조금 다르게 하였다. 구하고자 하는 주차의 방식은 다음과 같다. 2023년 12월의 주차는 6주차이다. 1주차의 시작일과 종료일은 2023-11-26 ~ 2023-12-02 이며, 6주차의 시작일과 종료일은 2023-12-31 ~ 2024-01-06 이다. 이를 구하기 위해 자바스크립트로 다음과 같은 코드를 구현하였다. // 해당월의 주차가 몇주차 까지 있는지 체크 function getWeekLength(start, end) { const startDate = start.clone(); const endDate = end.clone(); const w.. 2023. 12. 27. data pivot 데이터 피벗만들기. feat rxjs 기록을 위해 작성. 기존 데이터를 pivot형태로 만들기. 1. 데이터 준비 (시간별 랜덤값) const data = new Array(24).fill(0).map((n,i)=> ({ h:i+1, val1: Math.ceil(Math.random(1, 10)*10), val2: Math.ceil(Math.random(1, 10)*10) })) 2. 데이터 피벗 (rxjs and reduce) const subs = rxjs.from(data).pipe( rxjs.reduce((acc, item) => { acc[0][item.h] = item.h; acc[1][item.h] = item.val1; acc[2][item.h] = item.val2; return acc; }, [{}, {}, {}]) ); .. 2023. 12. 18. 오픈레이어스 카카오맵(타일) 사용하기 상황 현재 오픈레이어스 6.5.0 버전을 사용 중. 오픈레이어스를 사용해 카카오맵을 연동하여 구현하고자 한다. 구글링하여 찾아 본 방법은 현재 버전과 맞지 않는 듯 하여 이리저리 수정한 결과 연동에 성공. - 찾아본 방식은 4버전대 까지 지원하는 듯 하다. 기본적으로는 카카오에서 제공해주는 API를 사용하여 구축하는게 가장 best함. 아래는 구현에 사용된 소스이다. kakaoMapType = { BASE: "base", SATELLITE: "satellite", HYBRID: "hybrid" } kakaoTileGrid = new ol.tilegrid.TileGrid({ extent : [(-30000-524288), (-60000-524288), (494288+524288), (988576+52428.. 2023. 1. 19. Canvas Antialiasing 선명도 높이기 다음은 캔버스를 그리는 코드의 일부이다. const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; const context = canvas.getContext("2d"); // .....중략 위의 코드를 이용하여 아래 이미지와 같이 특정 지역의 대기오염도를 캔버스로 구현하였다. 글자가 흐릿하게 보이는 현상을 해결하기 위해서는 Antialiasing 처리를 해주어야 하는데 구현은 간단하다. 아래 코드와 같이 canvas의 크기를 조절하고 context의 스케일을 조절하.. 2022. 2. 16. 오픈레이어스 버전 확인 오픈레이어스의 버전을 확인하는 방법. js파일의 주석으로 현재 버전이 명시되어 있지 않기 때문에 별도의 코드를 통해 확인. 개발자 도구를 열어 콘솔에 다음의 스크립트를 실행 let version; try { let layer = new ol.layer.Vector({ style: new ol.style.Circle({ radius: 30 }) }); } catch(err) { let parts = err.message.split("/v"); parts = parts[parts.length - 1].split("/"); version = parts[0]; } console.log(version); 다음은 실제 콘솔창에서 실행한 결과입니다. 2022. 2. 15. 오픈레이어스 이미지 저장 및 프린트 오픈레이어스의 이미지 저장 및 프린트를 하기 위해서는 별도의 코드 구현이 필요하다. 구글 검색을 해보면 여러 케이스가 나오지만 제대로 작동되지 않는 코드가 많이 있었다. 공식 홈페이지에서 정상작동하는 코드를 확인할 수 있다. 현재시간 기준으로 6.5.0 버전에서 정상작동하는 코드를 정리하였다. - 이미지 저장 map.once('rendercomplete', function(event) { const mapCanvas = document.createElement("canvas"); const size = map.getSize(); mapCanvas.width = size[0]; mapCanvas.height = size[1]; const mapContext = mapCanvas.getContext("2d".. 2022. 2. 15. spring boot에서 transaction 사용하기 이 포스팅은 spring boot 2.2.6을 기준으로 작성되었습니다. spring boot로 프로젝트를 진행하던 중 DB에 delete 후 insert를 하는 로직을 구현해야 했습니다. 구현 로직 처리 중 만일 query가 실패 할 경우 기존의 데이터는 그대로 남아야 했기 때문에 transaction을 추가했습니다. xml 코드가 아닌 java코드로 bean 객체를 생성해야 했으므로 구글링을 하여 방법을 찾았습니다. spring의 application에 다음과 같이 transactinon manager를 추가해주세요. 1. EnableEnableTransactionManagement 어노테이션 추가 2. DataSourceTransactionManager 함수 구현 @EnableTransactionMa.. 2021. 1. 15. 이전 1 다음
