본문 바로가기

FrontEnd89

Security Vulnerability: SSRF(Server-Side Request Forgery in axios) 깃헙 알림으로 axios로 인한 보안 취약점이 발견됐다는 메시지가 왔음SSRF에 대한 이슈였고, 해결책으로 axios의 1.7.4 버전 이상으로 업그레이드 하라고 함 Affected versions :  axios(npm)   >= 1.3.2, axios 1.7.2 allows SSRF via unexpected behavior where requests for path relative URLs get processed as protocol relative URLs.해당 이슈: https://github.com/axios/axios/issues/6545보안 공격으론 CSRF, XSS, SQL injection에 대해서만 알았어서 SSRF 는 처음 접하게 됨.SSRF의 개념을 알아보고 위 이슈가 생긴 이.. 2024. 8. 14.
Credetials callback function handle error (next-auth v5) https://github.com/nextauthjs/next-auth/pull/9871 feat: customizable `authorize()` error by balazsorban44 · Pull Request #9871 · nextauthjs/next-authThis introduces a way to throw custom errors in the authorize() callback of the Credentials provider. Any generic or sensitive server error will continue to return error=Configuration (full error i...github.com기존 callback에서는 throw new Error로 처리했지만 C.. 2024. 6. 17.
form에서 server action 다루기 https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutationsform action에서 server action을 하기 위해서는 비동기 함수를 넘겨주면서 use server를 입력해주면 됨export default function Page() { async function createInvoice(formData: FormData) { 'use server'; const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), .. 2024. 6. 15.
Form에서 두개 이상의 버튼을 다루기 (feat. server action ) Form 안에 두개 이상의 버튼이 있을 경우 어떤 버튼을 클릭했는지에 따라 행하는 액션이 다를 수 있다.이 때 button의 name와 value 속성을 이용하면 form의 action에서 버튼의 주체를 파악할 수 있다.form action에서 넘겨주는 파라미터는 FormData로써 폼 안에 버튼을 클릭하면 해당하는 버튼의 name과 value 정보가 포함되어져 있다.(이 때 form 안에 input 필드가 있다면 input들의 name과 value들도 출력 됨.)import { signIn } from '@/auth';function SignIn() { const handleAction = async (data: FormData) => { 'use server'; cons.. 2024. 6. 14.
인가 서버에서 token 받아오기 (OAuth) feat. NextJs next-auth를 사용하면 provider를 통해 oauth 구현이 쉽겠지만 oauth에 대해 알고 있는 로직을 직접 구현해보고 싶어졌음https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com카카오 로그인 문서에 따르면 oauth의 로직은 아래 이미지와 같다메인 페이지(Home)에 있는 카카오 로그인 버튼을 누르면 아래의 함수가 실행된다.const HomePage = () => { const handleKakaoLogin = () => { .. 2024. 6. 10.
babel 직접 설정해보기 1. 기본 웹팩의 등장 배경과 마찬가지로 브라우저는 자바스크립트의 발전 속도를 따라오지 못하면서 es5 이후의 문법들을 직접적으로 해석할 수 없다. 때문에 화살표 함수라던가 let cont 변수, jsx, 타입스크립트 등의 문법들을 브라우저가 알고 있는 자바스크립트 문법으로 변환시켜줘야 함. 이러한 도구를 트랜스파일러 라고 하는데 babel은 트랜스파일러 중 하나. Babel의 동작(빌드)은 3단계로 진행된다. Parsing -> Transforming -> Printing npm install -D @babel/core @babel/cli 바벨을 사용하기 위해 babel/core 와 커맨드 라인 인터페이스인 babel/cli를 개발 모드로 설치해줌. // ./src/math.js const sum = .. 2024. 4. 6.
webpack 직접 설정을 위한 기본 개념 1. 기본 브라우저는 자바스크립트의 발전 속도를 따라오지 못함. 때문에 es2015에서 표준 모듈 시스템을 내놓았지만 몇 몇 브라우저는 이를 사용하지 못했고, 브라우저에 무관하게 모듈을 사용하고 싶다는 욕구하에 모듈 번들러인 웹팩이 등장했다. 웹팩은 모든 파일을 모듈로 바라보고 이것들을 하나의 파일(혹은 소수)로 합쳐주는 번들러이다. 하나의 시작점인 entry 포인트로부터 의존적인 모듈을 전부 차장내어 output을 만들어낸다. npm install -D webpack webpack-cli 패지키 매니저를 통해 웹팩과 커맨드라인으로 웹팩을 실행시킬 수 있게 하는 webpack-cli를 설치해준다. node_modules/.bin/webpack // webpack 위와 같은 명령어를 통해 (같은 동작) 웹.. 2024. 4. 5.
next.js 에 kakao map 띄우기 (feat. react-kakao-maps-sdk) 카카오 개발자 센터에 들어가보면 api key (자바스크립트 키) 를 발급 후 아래 코드를 삽입하라고 한다. "API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없습니다. 하지만, 반드시 실행 코드보다 먼저 선언되어야 합니다." 리액트 같은 경우에는 intex.html에 작성하면 되고 next.js 같은 경우 layout 같은 곳에 Script 태그를 불러와 삽입하면 된다. 하지만 이 같은 번거로운 작업을 JaeSeoKim 님이 배포하신 라이브러리를 사용하면 비교적 간단하게 처리 할 수 있다. next.js 같은 경우 example에 따르면 .env 에 아래와 같이 작성해두면 script 문을 따로 작성하는 대신 useKakaoLoader를 통해 api 키.. 2024. 2. 6.
[next.js] react-quill 에디터 값을 출력하기 (feat. dangerouslySetInnerHTML ) import 'react-quill/dist/quill.snow.css'; import { EditorProvideProps } from '../new/new-types'; // 중간 생략 ReactQuill에 입력한 데이터 value는 html 요소를 string 형태로 받아와짐 (++참고) next.js에서 ReactQuill 컴포넌트를 사용할려면 dynamic으로 import 해야함. (window로 정의 되어 있는데 next는 서버 측에서 작동하니 아래처럼 dynamic으로 받아오면서 ssr:false 넣어주기. + useMemo를 하지 않으면 렌더링 될 때마다 변경되어보림) const ReactQuill = useMemo( () => dynamic(() => import('react-quill'.. 2024. 1. 31.

티스토리툴바