Base64 Encoding vs Base64Url Encoding

이름도 비슷한데 어떤 차이점이 있고 왜 다르게 만들어졌을까요?

먼저 Base64가 무엇인지부터 살펴보도록 하겠습니다.

Base64 인코딩이란?

Binary 데이터를 텍스트로 바꾸는 인코딩입니다. char-set에 영향 받지 않는 ASCII 문자열로만 되어 있는 텍스트로 바꾸는 일을 합니다.

인코딩 방식은 Binary 데이터를 6bit씩 자른 후 해당되는 문자열을 ASCII 값으로 치환해주는 겁니다. 6bit이기 때문에

2의 6제곱, 64개의 글자가 있으면 어떤 데이터든 표현할 수 있겠죠? Base64는 3byte씩 쪼개서 6bit씩 인코딩을 합니다. 여기서 3byte가 안되는 경우에는 padding 문자열로 채우게 됩니다.

Base64를 사용하는 이유

Base64를 사용하는 가장 큰 이유는 Binary 데이터를 텍스트 기반 규격으로 다룰 수 있기 때문이다. JSON과 같은 문자열 기반 데이터 안에 이미지 파일등을 Web에서 필요로 할때 Base64로 인코딩하면 UTF-8과 호환 가능한 문자열을 얻을 수 있다. 끝에 '='과 같은 패딩 기호가 있다면 이는 구분자로써 사용되므로 대부분 Base64로 생각할 수 있다.

기존 ASCII 코드는 시스템간 데이터를 전달하기에 안전하지 않다. 모든 Binary 데이터가 ASCII 코드에 포함되지 않으므로 제대로 읽지 못한다. 반면 Base64는 ASCII 중 제어문자와 일부 특수문자를 제외한 53개의 안전한 출력 문자만 이용하므로 데이터 전달에 더 적합하다.

인코딩 예시

이해를 돕기위해 표로 보도록 하겠습니다.

아래는 3byte의 abc 라는 문자열을 base64로 인코딩하겠습니다.

a								b								c
0	1	1	0	0	0	0	1	0	1	1	0	0	0	1	0	0	1	1	0	0	0	1	1
0	1	1	0	0	0	0	1	0	1	1	0	0	0	1	0	0	1	1	0	0	0	1	1
Y						W						J						j

YWJj 라는 인코딩된 결과가 나오게 됩니다.

그럼 3byte가 안되는 문자열은 어떻게 표현될까요? 바로 padding을 붙이는데요. Base64의 Padding은 "="입니다.

a								b
0	1	1	0	0	0	0	1	0	1	1	0	0	0	1	0
0	1	1	0	0	0	0	1	0	1	1	0	0	0	1	0	0	0
Y						W						I						=

YWI= 인 패딩(Padding)이 포함된 인코딩된 결과가 나오게 됩니다.

패딩은 최대 2개까지 붙을 수 있습니다. 아래 예시를 보면 1byte 문자를 인코딩하면 2개의 패딩이 오게 되지요.

a
0	1	1	0	0	0	0	1
0	1	1	0	0	0	0	1	0	0	0	0
Y						Q						=						=

YQ== 인 패딩(Padding) 2개가 포함된 인코딩 값이 나왔습니다.

Base64 변환표

Index	Binary	Char	Index	Binary	Char	Index	Binary	Char	Index	Binary	Char
0	000000	A	16	010000	Q	32	100000	g	48	110000	w
1	000001	B	17	010001	R	33	100001	h	49	110001	x
2	000010	C	18	010010	S	34	100010	i	50	110010	y
3	000011	D	19	010011	T	35	100011	j	51	110011	z
4	000100	E	20	010100	U	36	100100	k	52	110100	0
5	000101	F	21	010101	V	37	100101	l	53	110101	1
6	000110	G	22	010110	W	38	100110	m	54	110110	2
7	000111	H	23	010111	X	39	100111	n	55	110111	3
8	001000	I	24	011000	Y	40	101000	o	56	111000	4
9	001001	J	25	011001	Z	41	101001	p	57	111001	5
10	001010	K	26	011010	a	42	101010	q	58	111010	6
11	001011	L	27	011011	b	43	101011	r	59	111011	7
12	001100	M	28	011100	c	44	101100	s	60	111100	8
13	001101	N	29	011101	d	45	101101	t	61	111101	9
14	001110	O	30	011110	e	46	101110	u	62	111110	+
15	001111	P	31	011111	f	47	101111	v	63	111111	/

Padding : =

Base64Url 변환표

Index	Binary	Char	Index	Binary	Char	Index	Binary	Char	Index	Binary	Char
0	000000	A	16	010000	Q	32	100000	g	48	110000	w
1	000001	B	17	010001	R	33	100001	h	49	110001	x
2	000010	C	18	010010	S	34	100010	i	50	110010	y
3	000011	D	19	010011	T	35	100011	j	51	110011	z
4	000100	E	20	010100	U	36	100100	k	52	110100	0
5	000101	F	21	010101	V	37	100101	l	53	110101	1
6	000110	G	22	010110	W	38	100110	m	54	110110	2
7	000111	H	23	010111	X	39	100111	n	55	110111	3
8	001000	I	24	011000	Y	40	101000	o	56	111000	4
9	001001	J	25	011001	Z	41	101001	p	57	111001	5
10	001010	K	26	011010	a	42	101010	q	58	111010	6
11	001011	L	27	011011	b	43	101011	r	59	111011	7
12	001100	M	28	011100	c	44	101100	s	60	111100	8
13	001101	N	29	011101	d	45	101101	t	61	111101	9
14	001110	O	30	011110	e	46	101110	u	62	111110	-
15	001111	P	31	011111	f	47	101111	v	63	111111	_

Padding : =

62번째는 마이너스(-)이고, 63번째는 밑줄(_)입니다.

Base64Url 이 생긴 이유

"URL and Filename safe" Base 64 Alphabet

URL에는 Path를 구분짓는 /와 Space를 의미하는 + 문자가 있습니다. Base64에는 이 문자들을 각각 62, 63번째에 사용하고 있는데요. +와 / 두 기호를 -와 _ 기호로 수정을 하면 URL에서 Base64를 사용해도 문제가 발생하지 않게 됩니다.

예를들어 URL Decoding을 먼저하고 Base64 Decoding을 한다고 치면, +가 space로 바뀌기 때문에 더이상 Base64 Decoding을 할 수 없게 됩니다. 따라서 URL Decoding을 하더라도 변화가 없는 Base64Url을 사용하면 safe하다의 의미로 생긴 것 같습니다.