쌓고 쌓다

SpringBoot와 javascript를 이용해 이미지 파일 업로드를 구현해보자.공식 레퍼런스는 https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html 이다. 우선 CKEditor를 통해 서버로 파일을 전송 받는 과정까지만 코드를 작성했다. 에디터를 통해 업로드 요청온 파일을 처리하는 Controller 코드는 다음과 같다.@PostMapping("/test")@ResponseBodypublic Map test(@RequestPart(name = "posterImages", required = false) MultipartFile uploadPosterImages) { String originalFilen..

프로젝트에 위지윅 에디터를 사용하기위해 CKEditor 오픈소스를 적용했다. 사용자가 굵은 글씨, 기울임 등 에디터를 통해 작성한 내용을 서버에서 저장하기위해서는태그를 함께 저장해야한다. 태그를 함께 저장해야할텐데 XSS 공격은 어떻게 대응할까? 동작 예시를 통해 대응 방법을 이해해보자. 사용자가 의도적으로 굵은 글씨를 표현하는 태그인 태그를 다음과 같이 삽입했다고 하자.  에디터를 통해 서버로 넘어와 저장되는 값은 다음과 같다. ' html에서 , & 는 같은 특수한 기능을하는 문자들이므로서버에서는 안전한 문자로 저장할 필요가 있기에 변환하여 저장한 것이다. 그러면 의도적으로 태그를 삽입하는것이 아닌에디터를 통해서 굵은 글씨를 작성해보자. 서버에는 어떻게 저장이 될까? DB에는 '그렇다. 라이브러리에..

다음과 같은 상황에 문제 해결을 하고자 생각해낸 구현 방법이다. 사용자가 게시글과 같은 도메인 DTO와 태그를 통해 파일도 함께 컨트롤러로 요청을 보냈을때함께 보낸 도메인 클래스의 유효성 검사가 실패한다면 다음과 같은 컨트롤러 로직을 탈것이다. Controller 코드@PostMapping("/signup")public String signup(@Validated MemberSignupRequest memberSignupRequest, BindingResult bindingResult) { if (bindingResult.hasErrors()) return "member/signup"; memberService.signup(memberSignupRequest)..

현제 해더에 프로필 이미지 미리보기는 다음과 같은 html 태그를 갖는다.타임리프를 이용해 세션에 담긴 사용자 정보를 가지고 프로필 이미지를 출력하고 있다. 여기서 발생한 문제는 다음과 같다. 사용자가 프로필 변경 페이지에서 프로필 이미지를 변경한다. 프로필 이미지를 변경하고 저장을 눌러 저장한다. 그러나 문제가 여기서 발생한다.변경 완료시 헤더 부분의 프로필 이미지 미리보기가 바뀌지 않는다. 프로필 이미지는 세션 정보를 통해 가져오므로 재 로그인시 세션을 새로 저장하며 변경이 적용 된다. 세션 값을 변경하여 저장해보자. 그럼 프로필 변경 로직에 세션 변경 로직도 포함해서 문제를 해결할 수 있다.@Transactionalpublic void updateMemberProfile(...) {Authentic..

principalName cannot be empty 에러가 발생했다. 보통 UserDetails의 구현체를 만들때getUsername에 null을 반환하면 발생하는 에러라고한다. principalName에 텍스트가 없으면 발생하는 에러이다.  하지만 다음과 같이 모두 반환값을 만들어 놨다.public class CustomUserDetails implements UserDetails, OAuth2User { @Override public String getUsername() { return this.loginId; } @Override public String getName() { return nickname; } } 이 에러는 Us..

문제 상황기존에 카카오 로그인을 RestTemplate를 이용해 REST API로 구현을 했었는데Spring Security의 OAuth2를 이용해 손쉽게 카카오 로그인 API 결과를 얻을 수 있다. 그런데 이상하게 AccessToken을 얻은 다음 이뤄지는 loadUser 메소드가 동작하지 않는것이다. SecurityConfig.classhttp.oauth2Login((auth2) -> auth2 .userInfoEndpoint(userInfo -> userInfo .userService(customOAuthService)));사용자 정보를 가져온 후 처리하는 customOAuthService를 설정해주었는데 package com.example.bucketlist.config.secu..

웹 사이트를 만들며 PC와 모바일 환경에서 달리 화면을 보이게하길 원했다. 부트스트랩을 이용해서 반응형 웹을 만들고 있는데 이상한 부분이 있는 것이다. 보여질 컨텐츠가 1 2 3 4 순서라고 하자.화면이 작아졌다면 컨텐츠를 행을 늘려1 23 4이렇게 컨텐츠를 보여지거나1234이렇게 컨텐츠를 보여주는 것이다. 이상하게 다음과 같은 현상이 발생했다.PC에서는 웹 창 크기를 모서리를 드래그하여 조절할 수 있다.화면을 줄여서 컨텐츠의 순서가 1 2 3 4 순에서1 23 4 과 같이 잘 반응하여 변경되는데 모바일에서 접속해보면 화면이 다음과 같이 보이는 것이다.화면은 작아졌지만 PC에서 보는 화면 그대로 크기가 유지되어 있다. 알고보니 PC와 모바일의 뷰포트가 동일했던 것이였다.뷰포트? 우리가 볼 수 있는 시야의..