83일차 - 암호화, 텍스트 에디터 라이브러리 적용

백엔드(웹 서버, WAS)/Spring Boot 2024. 5. 28. 16:33

암호화를 하지 않고 비밀번호를 저장하면 보안에 매우 취약하다

암호화

MD-5 알고리즘, 스프링에서는 SHA-256 알고리즘을 사용한다

특정한 평문을 암호화하여 암호화문을 생성한다

spring security 의 많은 기능중에 비밀번호 암호화 기능만 사용할 예정이다

spring security 는 강제적으로 로그인 기능도 제공한다 이 기능은 사용하지 않을 것이기 때문에 없애줘야한다

1. 비밀번호를 암호화 기능을 사용하겠다는 빈 등록

2. 다른 나머지 기능은 비활성화하는 빈 등록

// 암호화 부분 빈 등록
@Bean
public PasswordEncoder getPasswordEnder() {
    // getPasswordEnder : 스프링의 빈의 ID의 해당
    // PasswordEncoder : 스프링의 빈의 클래스에 해당
    return new BCryptPasswordEncoder();
}

// spring security 에는 자동 로그인 기능등 많은 기능들이 있지만 
// 우리는 암호화만 사용할 것이므로, 기본적인 다른 기능들을 모두 비활성화한다
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    http.httpBasic().disable();
    return http.build();
}

// 아까 등록한 빈 사용
@Autowired PasswordEncoder encoder;

Logger logger = LoggerFactory.getLogger(getClass());

private String hash = "";

@GetMapping(value="/encode/{msg}")
public Map<String, String> encode(@PathVariable String msg) {
    logger.info("평문(plain text) : {}", msg);
    hash = encoder.encode(msg);
    logger.info("암호문(encode text) : {}", hash);

    // 같은 평문을 넣어도 암호문은 암호화 할때마다 달라진다
    // 암호화시 sault 라는 값을 넣어서 암호화하기 때문이다
    // 그래서 평문을 암호화하여 기존 암호화 문구와 비교하는 방식으로 암호문을 풀어낼 수 없다

    Map<String, String> map = new HashMap<String,String>();
    map.put("plain", msg);
    map.put("encoded", hash);
    return map;
}

@GetMapping(value="/decode/{msg}")
public Map<String,Boolean> decode(@PathVariable String msg) {
    logger.info("평문(plain text) : {}", msg);
    boolean success = encoder.matches(msg, hash);
    Map<String, Boolean> map = new HashMap<String,Boolean>();
    map.put("success", success);
    return map;
}

예제 회원가입

1. 암호화한 비밀번호로 회원가입

2. matches 메소드를 사용해서 로그인 기능 구현

3. 로그인 후 회원 목록 보여주기

라이브러리 적용

https://richtexteditor.com/

WYSIWYG HTML Editor | Javascript Rich Text Editor | RichTextEditor

WHY RICH TEXT EDITOR? Rich Text Editor makes creating rich text content easy and fast Crafted to perfection Following 21 years of development, RichTextEditor is crafted for perfection in pursuit of the ultimate HTML editing experience. Easy to Use All of t

richtexteditor.com

https://richtexteditor.com/docs/install_div.aspx

Rich Text Editor Document: Installation

richtexteditor.com

ALT+B 키 누르면 htm 파일이 열린다

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="display:flex;height:100%;flex-direction:column;">
<head>
	<meta charset="utf-8" />
	<title>Basic Editor</title>
	<base href='../' />
	<link rel="stylesheet" href="res/style.css" />
	<link rel="stylesheet" href="richtexteditor/rte_theme_default.css" />
	<script type="text/javascript" src="richtexteditor/rte.js"></script>
	<script>RTE_DefaultConfig.url_base='richtexteditor'</script>
	<script type="text/javascript" src='richtexteditor/plugins/all_plugins.js'></script>
</head>
<body>
	<div>
		<div id="div_editor"></div>
	</div>
</body>
<script>
	var config = {}
	config.toolbar = "basic";
	var editor = new RichTextEditor("#div_editor", config);
	
</script>
</html>

예제 실행

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="res/style.css" />
	<link rel="stylesheet" href="richtexteditor/rte_theme_default.css" />
	<script type="text/javascript" src="richtexteditor/rte.js"></script>
	<script type="text/javascript" src='richtexteditor/plugins/all_plugins.js'></script>
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
</style>
</head>
<body>
	<form action="write.do" method="post">
		<table>
			<tr>
				<td><input type="text" name="user_name" placeholder="작성자"/></td>
			</tr>
			<tr>
				<td><input type="text" name="subject" placeholder="제목"/></td>
			</tr>
			<tr>
				<td><div id="div_editor"></div></td>
			</tr>			
		</table>
	</form>
</body>
<script>
	var config = {}
	config.toolbar = "basic";
	var editor = new RichTextEditor("#div_editor", config);
</script>
</html>

그냥 요청하면 static 폴더 안에 아무것도 넣지 않았기 때문에 경로를 찾지 못하는 상황이다

샘플에 있던것을 넣어주면 된다

/* data:image 방식 - 이미지를 base64 인코딩하여 데이터화 방식 
* 장점 : 서버에서의 별도 파일 처리가 필요없다
* 단점 1 : 이미지의 출처를 확인하기도 어렵다
* 단점 2 : 용량 제어가 어렵다 (기존에는 최대 업로드 크기를 제한할 수 있었다)
* 단점 3 : 기존 파일의 용량보다 더 많이 차지한다
*/

이미지 바이너리를 base64 라는 인코딩으로 데이터를 저장한거고 그 데이터를 다시 사용자에게 보여주는것이다

그래서 엄청나게 늘어나는것이다 이것을 그대로 데이터베이스에 그대로 저장하면 대참사이다(저장할 수 없음)

그리고 아무로 submit 으로 서버에 전송해도 보내지지 않는다 하지만 body 의 작성된 문자열은 가져올 수 있다

이런 경우 감추어진 input 태그를 만들고 태그 value 값을 수정하여 form 으로 전송하면 된다

'백엔드(웹 서버, WAS) > Spring Boot' 카테고리의 다른 글

85일차 - 부트스트랩 사용방법 (0)	2024.05.30
84일차 - 웹 크롤링 (0)	2024.05.29
82일차 - 톰캣, 빌드, 빌드 전 프로필 설정 (0)	2024.05.27
81일차 - 인터셉터, 파일 업로드, 다운로드, 스케쥴러 (2)	2024.05.24
80일차 - RESTAPI, Properties 활용, Spring FW 특징, AOP 활용(로그인 처리) (0)	2024.05.23

ABOUT ME

공부 기록용 공부 기록용

암호화

1. 비밀번호를 암호화 기능을 사용하겠다는 빈 등록

2. 다른 나머지 기능은 비활성화하는 빈 등록

예제 회원가입

라이브러리 적용

예제 실행

'백엔드(웹 서버, WAS) > Spring Boot' 카테고리의 다른 글

티스토리툴바

ABOUT ME

암호화

1. 비밀번호를 암호화 기능을 사용하겠다는 빈 등록

2. 다른 나머지 기능은 비활성화하는 빈 등록

예제 회원가입

라이브러리 적용

예제 실행

'백엔드(웹 서버, WAS) > Spring Boot' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바