Develop/Front-End (7) 썸네일형 리스트형 [axios] Axios의 사용자 제공 입력의 잘못된 유효성 검사로 인한 CSRF 취약점 CVE-2023-45857 사내 레거시.. 프론트 프로젝트에서 axios 라이브러리를 보던 중 이전에 보았던 보안취약점 코드가 떠올랐다..라이브러리를 업데이트 해야겠다.. 🤣 package.json 파일을 확인해보니.. "axios": "^0.27.2" 보안에 관심이 많은 사람들은참조 링크를 확인해보면 좋은 경험치가 될 것 같다 Ref. https://github.com/axios/axios/issues/6006 CVE-2023-45857 (CWE-359) XSRF-TOKEN value is disclosed to an unauthorised actor · Issue #6006 · axios/axiosDescribe the bug Hi team, @jasonsaayman and @DigitalBrainJS, The l.. dropzone.js 를 이용하여 동영상 업로드 미리보기 및 썸네일 기능 구현기 이번에 내가 맡게 된 업무는 dropzone.js 를 이용하여 동영상 업로드와 미리보기 및 썸네일 기능을 만드는 것이였다. 요즘들어 부쩍 스크립트 만질 일이 많아졌는데 BE 코드를 다루지 못하고 있어서 아쉬움이 많다... 😭 업무 진행 당시 dropzone.js version : 5.5.0 진행상황 동영상 업로드 , 동영상 특정 구간 썸네일 추출 , 미리보기 기능 구현 완료! 😎 이슈 & 고민 및 해결 배너배리에이션 기능을 만들었던 이미지 등록하는 화면에서 당시에는 발견하지 못했던 버그들도 발견하면서 수정하고 dropzone.js 오픈 소스 라이브러리 코어 스크립트를 조금 수정하였다. 😂 이 업무를 진행하면서 이슈나 고민 거리는 없었던 것 같다 🤗 [지난 배너 배레이이션 작업 이후 체크 못한 결함 사항 .. 난독화 된 자바 스크립트 분석하기 이번에 내가 맡게 된 업무는 난독화 된 스크립트를 분석하여 특정 행위를 하는 지 확인해보는 업무다. 🤔 다른 사람이 작성 한 코드를 보고 이해하는 건 역시 어려운 일이지만 이해를 하고 다음에 내가 적용할 일이 있으면 그것만큼 값진 경험도 없다고 생각한다.😂 이 일을 맡게 된 건 경쟁사 스크립트가 어뷰징 행위를 한다고 판단 하여 분석하게 되었다. 역시나 그 행위를 하고 있는게 맞았다...😛 진행상황 스크립트가 특정 행위를 한다고 예상. 1.기능 예상 시나리오 2.스크립트 분석 (변수 및 함수 , 전역 변수 용도파악) 2-1. 특정 조건 파악 2-2. 데이터 통신 간 요청 데이터 확인 , 응답 데이터 확인 3.디버깅 이슈 & 고민 및 해결 해당 코드를 분석하면서 어려움을 겪던건 난독화 된 코드이기도 했지만 .. 배너배리에이션 기능 - 자바스크립트 캔버스 API 도전기 이번에 내가 맡게 된 업무는 배너 배리에이션 기능을 만드는 것이였다. 서비스에 없는 기능을 도입하는 것은 언제나 두렵고 설렌다. 그동안 내가 개발했던 프로그램들 비중은 주로 BackEnd 영역이다.. 그렇기에 개발하면서 많이 버벅거리고 답답했었지만 공식문서를 읽으면서 재미 있었던 것 같다. 이 기능을 개발하게 되는 사람들을 위해 도움이 되었으면 좋겠다 😊 * 배너 배리에이션 : 웹 페이지 또는 앱에서 사용되는 배너(Banner)나 광고 영역을 다양한 스타일로 변화시키는 기능을 말합니다. 이는 사용자에게 보다 다양하고 흥미로운 시각적 요소를 제공하여 웹 경험을 향상시키는 데에 사용됩니다. 진행상황 현재까지 기본적인 배너배리에이션 기능 틀을 갖추었고 특정 이미지 규격 파일을 업로드 하면 해당 이미지를 이용하.. React 로 롤 전적 통계 사이트를 만들어보자! - 3 회사 다니면서 시간을 쪼개어 사이드 프로젝트를 진행하다 보니 쉽지 않았다 😥 (BE개발자 두명이서 진행했으며 저는 프론트를 맡았고 BE나 Devops는 어려움 겪을 때 지원하며 프로젝트를 끌고 갔다) 또 BE개발자 이다보니 자신있게 시작했지만 상당히 부족함이 많은걸 알게 되었다 😤 중간마다 공부한 내용도 정리하고 블로그에 글도 남기고 싶었는데.. 여유가 너무 없었다.(아직 구현 안된 기능도 많으며 product 키가 아니고 personerkey이기 때문에 조회 제한도 있는 상황 참고 바란다.) 매우 부족하지만 혹시 필요한 사람들이 있을까 싶어서 소스는 github 공유해놓았다. 😛 프론트/백엔드 모두 퍼블릭으로 게시하였습니다😑 https://github.com/DongJu-Na DongJu-Na - Ov.. React 로 롤 전적 통계 사이트를 만들어보자! - 2 React 개발 환경 설정은 전 글을 참고하길..😏 https://djlife.tistory.com/4 React 로 롤 전적 통계 사이트를 만들어보자! - 1 소스 편집 툴은 비쥬얼 스튜디오 코드를 이용하려 한다. 프로그램이 가볍고 다양한 기능을 지원해서 추천.😝 이 게시물은 React , Node.js , NPM , CRA ... 등등 프론트엔드 기본 지식이 있는 사람이 볼 djlife.tistory.com 전 글을 통해 리액트 프로젝트 구동까지 완료된 상태이다.😛 이번 포스팅에서는 프로젝트를 진행하기 위해 필요한 라이브러리와 리그오브레전드(롤) 통계 데이터 받아오는 방법에 대해 알아보자. 목차📋 1. React 프로젝트 디렉토리 설명 2. React 필요 설치 라이브러리 소개 3. 리그오브레전드(롤.. React 로 롤 전적 통계 사이트를 만들어보자! - 1 소스 편집 툴은 비쥬얼 스튜디오 코드를 이용하려 한다. 프로그램이 가볍고 다양한 기능을 지원해서 추천.😝 이 게시물은 React , Node.js , NPM , CRA ... 등등 프론트엔드 기본 지식이 있는 사람이 볼 것이라고 가정하에 작성할 것이다.😩 목차📋 1. React 개발환경 설정 2. React 신규 프로젝트 생성 3. React 프로젝트 구동 1. React 개발환경 설정 VS code https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern we.. 이전 1 다음
