10

Askers에서 익명의 질문자로부터 온 질문에 유저가 답변을 달았을 때, 이를 SNS에 공유하는 기능을 구현하려 한다. 현재 Askers는 최소 기능만 구현해 빠르게 서비스하는 것을 목표로 하고 있다(Askers v1). 따라서 서비스의 타겟 유저가 가장 많이 사용하는 SNS인 트위터(X)에 공유하는 기능을 우선 개발하기로 했다. 기능익명의 질문자가 보낸 질문에 유저가 답변했을 때, 연동된 트위터 계정이 있다면 답변 시 해당 답변 페이지 링크와 답변 내용을 트위터에 게시할 수 있다.현재 이 질문의 링크를 트위터에 게시하면 아래와 같이 노출된다.  기댓값답변을 트위터에 공유하는 유저 플로우는 다음과 같다.트위터 공유하기 버튼 클릭 시, 현재 로그인 된 트위터 계정으로 이동하고, 답변 내용과 답변 페이지 링..

기능 소개(v1)Askers는 질문 기반 서비스다.Askers v1에서는 가장 기초적이지만 서비스의 핵심이 되는 기능을 우선적으로 개발했다.익명으로 질문을 보내고, 선택적으로 답변하고, 이를 SNS(Twitter)에 공유할 수 있다.  회원가입 및 로그인 기능질문은 서비스에 가입하지 않아도 보낼 수 있지만 답변은 Askers 가입 유저만 할 수 있다.Email 회원 가입OAuth2(Google) 회원 가입Email 회원 가입의 경우, 허수 가입자를 배제하기 위해 Email 인증 절차를 구현했다. 입력한 Email로 6자리 코드를 전송하고, 이를 올바르게 입력해야 가입이 가능하다.  질문 전송 및 답변 관련 기능질문 전송 기능답변 내역 조회 기능특정 답변 취소 기능유저의 프로필 화면에서 해당 유저에게 질문..

보호되어 있는 글입니다.

State: A Component's Memory프론트엔드 개발에서 상태(state)는 사용자 인터페이스를 이루는 특정 시점의 데이터를 말한다. 따라서 상태는 동적으로 변화하는 데이터다. 사용자와의 상호작용이나 네트워크 응답과 같은 이벤트에 따라 변경되므로 UI의 렌더링에 직접적인 영향을 미친다. 상태에 따라 UI는 표시되거나 숨겨질 수 있다. 또 사용자와의 상호작용 중 현재 시점의 맥락을 의미하기도 한다. 입력값, 목록에서 선택된 항목, 여러 단계의 프로세스가 있는 경우 현재 위치한 페이지를 기억할 필요가 있다. 이는 모두 '상태'다. React 컴포넌트의 상태란 일종의 컴포넌트 별 메모리다. 각각의 컴포넌트가 기억해야 하는 정보를 의미한다.function App(): React.ReactElement..

순수 함수순수 함수는 두 가지 조건을 만족해야 한다.참조 투명성(Referential Transparency)부작용 없음(No Side Effects)아래 함수는 순수 함수라고 할 수 있다.function add(a, b) { return a + b;} 동일한 인자(`a`, `b`)가 주어지면 항상 동일한 결과를 반환한다. 또 이 함수의 결과가 외부의 상태를 변경하지 않는다. 반면 아래 함수는 순수 함수라고 할 수 없다.let count = 0;function increase() { return ++count;} 함수 외부의 변수 `count`에 의존하고 있기 때문에 동일한 인자가 주어지더라도 다른 값을 반환할 수 있다. 다른 함수에서 `counter`에 접근할 수 있기 때문이다. 따라서 순수..

문제 설명24로그인 서비스입니다.SQL INJECTION 취약점을 통해 플래그를 획득하세요. 플래그는 flag.txt, FLAG 변수에 있습니다. 정보`POST /login` 요청 시 HTTP Request와 Response는 다음과 같다. 유저로부터 `userid`, `userpassword` 값을 입력 받아 서버로 전송한다. 서버 측에서 실행되는 코드는 다음과 같다. 서버 구동 시 아래 DDL을 실행해 `users` 테이블에 초기값을 밀어 넣는다.DATABASE = "database.db"if os.path.exists(DATABASE) == False: db = sqlite3.connect(DATABASE) db.execute('create table users(userid char(10..

문제 설명269여러 기능과 입력받은 URL을 확인하는 봇이 구현된 서비스입니다.CSRF 취약점을 이용해 플래그를 획득하세요. 정보화면에서 알 수 있는 정보는 최소 3개의 페이지가 있다는 것이다.vuln(csrf) page 이동 시 쿼리 파라미터의 스크립트가 일부 치환된다.flag 페이지에서는`POST /flag`로 form 데이터를 전송할 수 있다.login 페이지에서는 `POST /login`으로 form 데이터를 전송할 수 있다.코드를 통해 각 페이지의 동작을 확인할 수 있다. 우선 다음 두 객체는 전역에서 접근이 가능하다. users = { 'guest': 'guest', 'admin': FLAG}session_storage = {} 추측하자면 `session_storage`는 아마 서버..

문제 설명26여러 기능과 입력받은 URL을 확인하는 봇이 구현된 서비스입니다.CSRF 취약점을 이용해 플래그를 획득하세요. 정보화면에서 알 수 있는 정보는 최소 4개의 페이지가 있다는 것이다.vuln(csrf) page 이동 시 쿼리 파라미터의 스크립트가 일부 치환된다.memo 이동 시 `/memo?memo=hello`에 명시된 쿼리 파라미터가 화면에 출력된다.memo 페이지는 반복 접근 시 로그와 같이 쿼리 파라미터의 값이 계속해서 쌓인다.notice flag 페이지 진입 시 200 OK가 떨어지지만 `text/html`로 'Access Denied'가 반환된다.flag 페이지에서는`POST /flag`로 form 데이터를 전송할 수 있다.코드를 통해 각 페이지의 동작을 확인할 수 있다. `/vuln`..

문제 설명268여러 기능과 입력받은 URL을 확인하는 봇이 구현된 서비스입니다.XSS 취약점을 이용해 플래그를 획득하세요. 플래그는 flag.txt, FLAG 변수에 있습니다.플래그 형식은 DH{...} 입니다. 정보화면에서 알 수 있는 정보는 최소 3개의 페이지가 있다는 것이다. vuln(xss) page 이동 시 쿼리 파라미터의 스크립트 코드는 실행되지 않는다.memo 이동 시 `/memo?memo=hello`에 명시된 쿼리 파라미터의 값이 출력된다.memo 페이지는 반복 접근 시 로그와 같이 쿼리 파라미터의 값이 계속해서 쌓인다.flag 페이지의 form은 `POST /flag`로 요청을 보낸다.코드를 통해 각 페이지의 동작을 확인할 수 있다. `/vuln` 페이지 접속 시 동작은 다음과 같다.@a..

문제 설명28여러 기능과 입력받은 URL을 확인하는 봇이 구현된 서비스입니다.XSS 취약점을 이용해 플래그를 획득하세요. 플래그는 flag.txt, FLAG 변수에 있습니다.플래그 형식은 DH{...} 입니다. 정보화면에서 알수 있는 정보는 최소 3개의 페이지가 있다는 것이다. vuln(xss) page 이동 시 ``가 실행된다.memo 이동 시 `/memo?memo=hello`에 명시된 파라미터가 출력된다.memo 페이지는 반복 접근 시 로그와 같이 파라미터 내용이 계속해서 쌓인다.flag 페이지의 form은 `POST /flag`로 text 값을 전송한다.코드를 통해 각 페이지에서 어떤 로직이 동작하는지 확인할 수 있다. 먼저 `/vuln` 페이지 접속 시 동작은 다음과 같다.@app.route("/..