프론트엔드 면접 문제은행에 대한 정리(1)

일반적인 질문:

• 어제/이번 주에 무엇을 공부하셨나요?
  • 어제는 자바스크립트로 slide를 순수하게 만드는 작업을 코드펜에서 시도해보았고, 이번 주에는 전체적으로 flutter 앱을 만들기 위해 flutter 생존코딩이라는 책을 독파하며 튜토리얼을 한단계씩 끝내는 것에 주안점을 두었습니다.
• 코딩을 할 때 당신을 들뜨게 하거나 흥미를 끄는 것들은 무엇인가요?
  • 저를 들뜨게 하는 것은 개발자와 서비스 제공 운영자, 즉 시스템 플랫폼적 운영자들이 저를 통하여 조금 더 빠르고 편리하게 서비스를 제공할 수 있게 되어, 그로인해 발생하는 이익창출이 된다고 생각 될 때입니다.
• 최근에 당신이 경험한 기술적인 문제는 무엇이고 그것을 어떻게 해결했나요?
  • 최근에 제가 경험한 기술적인 문제는, 순수 자바스크립트로 진행되어지지 않는 환경에서의 대처 방법입니다.
  • Object.prototype으로 접근하여 해당 내용의 메서드를 선언해주어 실행할 수 있도록 할당하는 등의 방법으로 해결을 하였습니다.
• 웹 애플리케이션이나 사이트를 만들 때 고려해야 할 UI, Security, Performance, SEO, Maintainability에 대해서 설명해주세요.
  • 웹 애플리케이션 사이트를 만들 때는 첫 째로 UI를 고려할 때 사용자 대상에 따라 적절한 UI와 UX를 제공하는 것이 중요하다고 생각합니다. 사용자 친화적인 UI란, 보편성을 지니면서 대상 사용자에 대한 고려가 필요하며, 적절한 인포그래픽 등 다양한 요소들에 있어서 인류통계학적인 요소에 따른 설계가 필요할 것입니다.
  • 고령자나 장애우들이 사용하는 웹 애플리케이션 사이트에 대해서 접근성이 지켜지지 않는다면 곤란할 것이고, 디자인적으로만 화려하고 제대로 정보전달이 되지 않는 인포그래픽으로는 많은 한계성이 있을 것입니다.
  • 보안(Security)은 각종 CSRF(크로스 사이트 리퀘스트 포져리), XSS(크로스사이트 스크립팅) 등의 공격이 유입될 때 적절히 막아내는 방법입니다. 
  • 최근에는 크롬의 경우 샌드박스 정책에 따라 하나의 탭에서 모든 하나의 브라우저가 작동되는 식의 방식도 도입되고 있고, 기존의 세션 토큰에 의한 방어방법 등 많은 대체안들이 있습니다.
  • 피싱사이트로 더 유명한 사이트간 요청 위조 공격 코드가 삽입된 페이지를 열면 해당 페이지에 심어져있는 form 내의 정보들이 submit 되면서 사용자의 주요정보등이 탈취되는 상황이 발생하게 되는 것입니다.
  • 게시판에 XSS 공격을통해 비밀번호 변경하게 만들어버리는 사이트를 만들어버리기도 하죠.
  • 이런 방식들에 대한 방어의 핵심은 XSS 차단 및 비정상적인 루트를 통한 CUD를 막는데 있습니다.
    • 첫번째 방어방법 : token과 체크
    • 랜덤 값을 생성해서 서버로 전송하거나 auth token 값을 생성합니다.
    • 생성된 그 토큰을 세션에 넣어두고 프론트 뷰에서 해당 토큰을 빼내어 hidden 값에 심어놓습니다.
    • submit 처리시 세션에 있는 값과 비교하는 것입니다.
    • token값을 session에 생성

session.setAttribute("CSRF_TOKEN", UUID.randomUUID().toString()); 
// 요청 페이지에 CSRF 토큰을 셋팅하여 전송한다.

페이지의 hidden값에 넣습니다.

<input type"hidden" name="_csrf" value="${CSRF_TOKEN}" />

form이 전송되면, 컨트롤러나 비즈니스 로직에서 해당 토큰을 받아서 검사합니다.

form을 통해서 전송된 놈인지 이상하게 넘어 온 놈인지 체크 필요합니다.

// 파라미터로 전달된 csrf 토큰 값
String param = request.getParameter("_csrf"); // 세션에 저장된 토큰 값과 일치 여부 검증
if (request.getSession().getAttribute("CSRF_TOKEN").equals(param)) {
	return true;
} else {
	response.sendRedirect("/"); return false;
}

 

또 다른 방법으로는 referer 방법도 있습니다.

같은 도메인에서 들어오는 접속을 허용하나 갑자기 완전! 엉뚱하고! 다른 곳에서! test.com/usr/을 호출할때는 차단하는 개념입니다.

물론 그런 코드를 적용할 경우, 네이버나 검색을 통해 들어오는 경우는 차단하지 않는 코드가 있습니다.

// CSRF 공격을 referer 방식으로 방어
String referer = request.getHeader("REFERER"); // 보안성 검토, 정상적이지 않은 방법으로 접근시 차단
if (referer != null && referer.length() > 0) {
	out.println("referer : " + referer);
    out.println("You can enter");
} else {
	out.println("You can not enter")
}

위의 경우에는  어떤 도메인에서 들어오든 상관없는 코드입니다.

var hostName = document.referrer;
if(hostName != 'https://이사직전.com') {
	alert('Hello admin!');
} else {
	alert('Who are you?');
}

같은 도메인에서만 들어오는 접속만 허용하는 코드입니다. 

referer는 좀 중요한 페이지에만 적용하면 되지 않을까 생각합니다. 외부링크를 다 막아버리기 때문이죠.

메일 URL, SNS공유, 다른 게시판의 URL 또는 카카오톡 링크 등 모든 외부링크 접속은 모두 거절되는 것입니다.

 

요즘 Cross Origin Resource Sharing에 따른 오류들을 많이 볼 수 있습니다. CORS라고 부르지요.

CORS 는 불가능 한 것이 크롬에서 76버전에서 업데이트 한 바가 있습니다.

최근에는 SameSite Cookie 정책도 None 대신에 Lax를 기본값으로 채택하면서 많은 cookie로 공격이 불가능하게 되는 긍정적 효과도 거둘 수 있었습니다.

 

 

다음편에 이어서 좀 더 자세히 살펴보도록 하죠.

 

 

출처 : https://h5bp.org/Front-end-Developer-Interview-Questions/translations/korean/