예방이의 개발일기

const array = [ { id: 1, type: "사과", dueDate: "20241215", price: 11369, }, { id: 2, type: "바나나", dueDate: "20241215", price: 19194, }, { id: 3, type: "사과", dueDate: "20241215", price: 9010, }, { id: 4, type: "사과", dueDate: "20241208", price: 19517, }, { id: 5, type: "바나나", dueDate: "20241208", price: 18910, }, { id: 6, ..

http가 뭘까? http는 통신 프로토콜 => 즉 규약이다 (약속이라는 말)브라우저와 서버가 통신을 할 때 보안문제가 발생 하면 화면과 동작에도 영향이 있어 정보 유출 등의 사고가 생길 수 있다. 브라우저는 HTTP라고 하는 통신 프로토콜에 따라 서버와 통신해서 리소스(HTML,CSS, 이미지 등)를 가져오거나 데이터를 생성 또는 업데이트, 삭제 한다.여러 통신을 하면서 데이터를 주고 받고, 업데이트하는 것을 개발자도구 Network 탭에서 확인해 볼 수 있다. 브라우저의 통신흐름HTTP 요청 & 응답 개발자도구에서 응답과 요청에 대한 정보를 확인할 수 있다.요청라인, 헤더, 바디 등을 확인해 볼 수 있다. HTTP 메서드HTTP 메서드에는 GET, HEAD, POST, PUT, DELETE, CONN..

뭔가 프론트엔드 개발을 하면서 보안에 대해 크게 걱정해본 적이 없는데... 이번 회사에서 ISMS 심사를 하느라 보안에 대해 다시 생각해보는 계기가 된 것 같다. 분명 보안은 백엔드에서 훨씬 많이 신경써야하는게 많지만... 생각보다 프론트엔드에서 놓치고 있는 점도 많았다.  1. 통신구간 암호화일단 요즘 최대 고민은 client에서 reqeust을 보낼 때 그 요청값들을 어떻게 암호화 할지다....원래는 AES 암호화 방식을 사용했는데 AES 암호화를 crypto.js 라이브러리를 사용했는데 iv랑 key에 값을 .env에 넣어놓고 썼다.나는 process.env -> 즉 .env 파일에 key값을 넣어놓고 꺼내서 쓰면 개발자도구에서 노출이 안되는 줄 알았다...아니였다. 개발자도구에 key값이 다 노출..