Blog
//
Blog
About Me
//
🏷️

Project [LMS Platform]

# of Posts
9
1 more property
Search

ν΄λΌμ΄μ–ΈνŠΈ 약식 μ†Œμ…œ 둜그인(OAuth)을 λ°±μ—”λ“œ μ„œλ²„ 쀑심 μΈμ¦λ°©μ‹μœΌλ‘œ λ³€κ²½

β€’
λ³΄μ•ˆ 및 관둀상 ν”„λ‘œλ•μ…˜ ν™˜κ²½μ—μ„œλŠ” Credential νšλ“ 및 관리λ₯Ό λ°±μ—”λ“œμ—μ„œ μ²˜λ¦¬ν•˜λŠ” 것이 일반적인 κ΄€λ‘€μ΄μž 더 μ•ˆμ „ν•œ 방식
β€’
λ”°λΌμ„œ 이전 ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œλ‘œ Credential을 μ „λ‹¬ν•˜λ˜ 약식 κ΅¬ν˜„μ—μ„œ λ°±μ—”λ“œ 쀑앙집쀑식 κ΅¬ν˜„μœΌλ‘œ λ³€κ²½ν•˜κ³ μž ν•œλ‹€.
[OAuth2.0] Google Social Login κ΅¬ν˜„ - λ°±μ—”λ“œ 쀑앙 관리식 둜직 κ΅¬ν˜„

μ†Œμ…œ λ‘œκ·ΈμΈμ€ λͺ¨λ‘ λΉ„μŠ·ν•œ κ³Όμ •

β€’
이전 카카였 둜그인 κ΅¬ν˜„κ³Ό 결과적으둜 λ™μΌν•œ 과정을 κ±°μΉœλ‹€.
1.
인증 제곡자(Provider)인 Google λ””λ²¨λ‘œνΌ μ½˜μ†”μ— μ ‘κ·Όν•΄μ„œ API κΈ°λŠ₯을 μ΄μš©ν•  μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ 생성
2.
REST API ν‚€ λ“± 인증 ν‚€, 토큰 등을 λ°›μŒ
3.
ν•΄λ‹Ή 토큰과 ν•¨κ»˜ λ°±μ—”λ“œμ„œλ²„κ°€ ν”„λ‘œλ°”μ΄λ” μ„œλ²„λ‘œ μš”μ²­ν•˜λŠ” 쀑첩 ꡬ쑰λ₯Ό λ§Œλ“€κ²Œ 됨
β€’
일반둜그인 : μ‚¬μš©μž β†’ μ„œλ²„(μ„œλΉ„μŠ€ μ„œλ²„) β†’ μ‚¬μš©μž
β€’
μ†Œμ…œλ‘œκ·ΈμΈ : μ‚¬μš©μž β†’ μ„œλ²„(μ„œλΉ„μŠ€ μ„œλ²„ β†’ ν”„λ‘œλ°”μ΄λ” μ„œλ²„ β†’ μ„œλΉ„μŠ€ μ„œλ²„) β†’ μ‚¬μš©μž
β€’
μ‹€μ œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ κ΅¬ν˜„ν•˜λŠ” 과정을 정리
[OAuth2.0] Google Social Login κ΅¬ν˜„ - ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ 약식

데이터 바인딩을 μœ„ν•œ @Input λ°μ½”λ ˆμ΄ν„°

@input λ°μ½”λ ˆμ΄ν„°λ₯Ό ν†΅ν•œ 데이터 바인딩
Angularμ—μ„œ 데이터 바인딩을 μœ„ν•œ λ°μ½”λ ˆμ΄ν„°λŠ” 주둜 @Input()을 μ‚¬μš©ν•˜μ—¬ λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈλ‘œλΆ€ν„° 값을 λ°›μ•„μ˜€λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. 이 λ°μ½”λ ˆμ΄ν„°λŠ” μžμ‹ μ»΄ν¬λ„ŒνŠΈμ—μ„œ λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈμ˜ 데이터λ₯Ό 바인딩할 수 있게 ν•΄μ€λ‹ˆλ‹€.
λ‹€μŒμ€ Angularμ—μ„œ @Input() λ°μ½”λ ˆμ΄ν„°λ₯Ό μ‚¬μš©ν•˜μ—¬ 데이터 바인딩을 κ΅¬ν˜„ν•˜λŠ” κ°„λ‹¨ν•œ μ˜ˆμ‹œμž…λ‹ˆλ‹€.
1.
μžμ‹ μ»΄ν¬λ„ŒνŠΈ 생성 λ¨Όμ € μžμ‹ μ»΄ν¬λ„ŒνŠΈλ₯Ό μƒμ„±ν•˜κ³ , @Input()을 μ‚¬μš©ν•˜μ—¬ 데이터λ₯Ό 받을 μ€€λΉ„λ₯Ό ν•©λ‹ˆλ‹€.
Angular의 @Input λ°μ½”λ ˆμ΄ν„° μ‚¬μš© 방법

문제 인식

β€’
문제 μƒνƒœ 뢄석
β—¦
개발PCμ—μ„œ SSH둜 NAS에 μ ‘κ·Ό(νŠΉμ • κ³„μ •μ˜ μ„Έμ…˜ ex)citefred μœ μ €λ‘œ SSHμ„Έμ…˜ 생성됨)
β—¦
νŒŒμΌμ—…λ‘œλ“œ κ΄€λ ¨ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μ‹€ν–‰(npm run start) - ν•΄λ‹Ή μœ μ €μ˜ μ„Έμ…˜μ—μ„œ μ‹€ν–‰λ˜κ³  있음
β—¦
개발PC의 SSH둜 μ ‘μ†ν•œ 터미널을 μ’…λ£Œ λ˜λŠ” 만료둜 μ’…λ£Œ 되면 NASμ—μ„œλ„ ν•΄λ‹Ή μ„Έμ…˜μ„ μ’…λ£Œ μ‹œν‚€λ©΄μ„œ νŒŒμΌμ—…λ‘œλ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜λ„ ν•¨κ»˜ μ’…λ£Œλ¨

ν•΄κ²° λ°©μ•ˆ 탐색

β€’
νŠΉμ • μœ μ €κ°€ λ‘œκ·ΈμΈν•˜λŠ” λ°©μ‹μ˜ SSH μ„Έμ…˜μ€ κ²°κ΅­ ν•΄λ‹Ή 접속을 μ’…λ£Œν•˜λ©΄ μ„Έμ…˜μ΄ μ’…λ£Œλ˜λ©΄μ„œ κ΄€λ ¨ ν”„λ‘œμ„ΈμŠ€κ°€ λͺ¨λ‘ μ’…λ£Œλ¨
β€’
λ”°λΌμ„œ, NASκ°€ κ³„μ†ν•˜μ—¬ μ‹€ν–‰λ˜λŠ” root μœ μ €λ‘œ μ ‘κ·Όν•˜λ©΄ ν•΄κ²° ν•  수 μžˆμ§€λ§Œ rootκ³„μ •μœΌλ‘œ 터미널에 μ ‘κ·Όν•˜λŠ” 것을 κ°œλ°©ν•˜λŠ” 것은 μœ„ν—˜μ„±μ΄ 있음
β€’
NAS μžμ²΄μ—μ„œ μ œκ³΅ν•˜λŠ” Dockerλ₯Ό 톡해 μ‹€ν–‰ν•˜λ©΄ rootμ—μ„œ μ‹€ν–‰ν•˜λŠ”κ²ƒμ΄λ―€λ‘œ 지속적인 ν”„λ‘œμ„ΈμŠ€λ₯Ό μœ μ§€ ν•  수 있음
NAS λ‚΄ νŒŒμΌμ—…λ‘œλ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ νŠΉμ • SSH에 μ’…μ†λœ μ„Έμ…˜ 만료 문제 + Docker와 Host의 μ»¨ν…μŠ€νŠΈ 인식 문제

NAS 파일 μŠ€ν† λ¦¬μ§€λ₯Ό ν™œμš©ν•˜κΈ°

β€’
NAS:
β—¦
μ—­ν• : λŒ€μš©λŸ‰ μŠ€ν† λ¦¬μ§€λ‘œμ„œ AWS S3의 μŠ€ν† λ¦¬μ§€ μ„œλΉ„μŠ€ μ—­ν•  λŒ€μ²΄
β—¦
Nginx:
β–ͺ
μ—­ν• : NAS의 정적 νŒŒμΌμ„ μ„œλΉ™
β–ͺ
κΈ°λŠ₯: AWS S3의 정적 파일 URL 제곡 μ—­ν•  λŒ€μ²΄
β—¦
NAS λ‚΄λΆ€ 파일 μ„œλ²„ μ• ν”Œλ¦¬μΌ€μ΄μ…˜:
β–ͺ
μ—­ν• : NestJS API둜 파일 μ‹œμŠ€ν…œ μ „μš© μ„œλ²„ κΈ°λŠ₯: μ„œλΉ„μŠ€ λ°±μ—”λ“œ μ„œλ²„μ˜ 파일 μ‹œμŠ€ν…œ(I/O) κΈ°λŠ₯이 λ…λ¦½ν™”λœ 별도 μ„œλΉ„μŠ€
β–ͺ
맀개체 μ—­ν• : NAS와 μ„œλΉ„μŠ€ λ°±μ—”λ“œ μ„œλ²„ κ°„μ˜ 파일 κ΄€λ ¨ 맀개체 μ—­ν•  μˆ˜ν–‰ (λ¦¬λ²„μŠ€ ν”„λ‘μ‹œ)
β€’
μ„œλΉ„μŠ€ λ°±μ—”λ“œ μ„œλ²„:
β—¦
μ—­ν• : NestJS 기반의 μ„œλΉ„μŠ€ κ΄€λ ¨ API μ„œλ²„
β—¦
κΈ°λŠ₯: μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 기본적인 CRUD κΈ°λŠ₯ 제곡
β—¦
데이터 μ €μž₯: 파일 경둜λ₯Ό λ°μ΄ν„°λ² μ΄μŠ€μ— URL Path ν˜•νƒœλ‘œ μ €μž₯
β€’
μ„œλΉ„μŠ€ ν”„λ‘ νŠΈμ—”λ“œ μ„œλ²„:
β—¦
μ—­ν• : μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 전체 λ·° νŽ˜μ΄μ§€ λ Œλ”λ§ λ‹΄λ‹Ή
β—¦
κΈ°λŠ₯: λ°±μ—”λ“œ API와 톡신을 ν†΅ν•œ 동적 νŽ˜μ΄μ§€ λ Œλ”λ§ 파일 제곡: 각쒅 νŒŒμΌμ€ λ°±μ—”λ“œλ‘œλΆ€ν„° μ „λ‹¬λ°›λŠ” URL Pathλ₯Ό 톡해 제곡
NAS νŒŒμΌμ„œλ²„ ꡬ좕과 μ›Ήμ„œλ²„(Nginx)λ₯Ό ν†΅ν•œ 파일 μ„œλΉ™

문제 인식

HTTPS 배포λ₯Ό 톡해 λͺ¨λ“  μ„œλ²„λ“€μ€ SSL을 톡해 HTTPS μš”μ²­/응닡을 λ°›λŠ” ꡬ쑰둜 λ³€κ²½λ˜κ³  있음
β€’
이 쀑 PixelStreaming을 ν•˜λŠ” μ›Ήμ‹œκ·Έλ„λ§μ„œλ²„(WebRTC/Stun-Turn Server)κ°€ λ™μΌν•œ 도메인 μΈμ¦μ„œλ₯Ό μ‚¬μš©ν•˜λ©΄μ„œ ν”„λ‘ νŠΈμ—”λ“œ μ„œλΉ„μŠ€ 내에 iFrame으둜 PixelStreaming 화면을 μž„λ² λ”© ν•˜λŠ” λΆ€λΆ„μ˜ 였λ₯˜κ°€ λ°œμƒ
β€’
동일 μ˜€λ¦¬μ§„μ— λ”°λ₯Έ 문제
β€’
chrome-error://chromewebdata/:1 Refused to display 'https://metaverseacademy.site:8443/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

ν•΄κ²° λ°©μ•ˆ 탐색

ν•΄κ²° μ‹œλ„
β€’
λ³΄μ•ˆμ„ μœ„ν•˜μ—¬ λ‹€λ₯Έ μ‚¬μ΄νŠΈμ—μ„œ λ‘œλ“œν•  λ•Œ ν—ˆμš© λ²”μœ„κ°€ μ§€μ •λ˜μ–΄ μžˆλ‹€.
β€’
ν˜ΈμΆœν•˜λŠ” μ‚¬μ΄νŠΈ(A ν”„λ‘œμ νŠΈ)λŠ”Β ν˜ΈμΆœ λ‹Ήν•˜λŠ” μ‚¬μ΄νŠΈ(B ν”„λ‘œμ νŠΈ)μ—μ„œ 막은거라 ν•  수 μžˆλŠ” 일은 μ—†λ‹€.
β€’
호좜 λ‹Ήν•˜λŠ” μ‚¬μ΄νŠΈ(B ν”„λ‘œμ νŠΈ)μ—μ„œ X-Frame-Options 섀정을 ν•΄μ€€λ‹€.
β—¦
DENY:Β μ‹œλ„ν•˜λŠ” μ‚¬μ΄νŠΈμ— 관계없이 νŽ˜μ΄μ§€λ₯Ό ν”„λ ˆμž„μ— ν‘œμ‹œ X
β—¦
SAMEORIGIN:Β νŽ˜μ΄μ§€λŠ” λͺ¨λ“  쑰상 ν”„λ ˆμž„μ΄ νŽ˜μ΄μ§€ μžμ²΄μ™€ λ™μΌν•œ 좜처인 κ²½μš°μ—λ§Œ ν‘œμ‹œ
β€’
ν˜ΈμΆœλ‹Ήν•˜λŠ” μž…μž₯인 B ν”„λ‘œμ νŠΈμ—μ„œ 응닡 헀더에 X-Frame-Optionsλ₯Ό μ„ΈνŒ…ν•΄μ„œ 보내주어야 ν•œλ‹€.
β€’
httpResponse.setHeader("X-Frame-Options", "allow-fromΒ Aν”„λ‘œμ νŠΈ IPμ£Όμ†Œ:포트번호");
httpResponse.setHeader("X-Frame-Options", "allow-from http://localhost:8080");
Java
볡사

ν•΄κ²° μ‹œλ„μ™€ κ²°κ³Ό

호좜 λ‹Ήν•˜λŠ” μž…μž₯인 Pixel Streaming의 μ„œλ²„μ—μ„œ 헀더 μΆ”κ°€ μ„€μ • ν•„μš”
β€’
μ•„λž˜λŠ” SignalingWebServer의 cirrus.js의 뢀뢄이닀.
β€’
ν•΄λ‹Ή μ„œλ²„ ν”„λ‘œμ νŠΈλŠ” helmet은 HTTP 헀더λ₯Ό μ„€μ •ν•˜μ—¬ 앱을 일반적인 μ›Ή μ·¨μ•½μ μœΌλ‘œλΆ€ν„° λ³΄ν˜Έν•˜λŠ” 데 도움이 λ˜λŠ” Express.js 미듀웨어λ₯Ό μ‚¬μš©ν•˜κ³  μžˆλŠ” κ²ƒμœΌλ‘œ νŒŒμ•…λ˜μ—ˆλ‹€.
if (config.UseHTTPS) { app.use(helmet()); app.use(hsts({ maxAge: 15552000 // 180 days in seconds })); //Setup http -> https redirect console.log('Redirecting http->https'); app.use(function (req, res, next) { if (!req.secure) { if (req.get('Host')) { var hostAddressParts = req.get('Host').split(':'); var hostAddress = hostAddressParts[0]; if (httpsPort != 443) { hostAddress = `${hostAddress}:${httpsPort}`; } return res.redirect(['https://', hostAddress, req.originalUrl].join('')); } else { console.error(`unable to get host name from header. Requestor ${req.ip}, url path: '${req.originalUrl}', available headers ${JSON.stringify(req.headers)}`); return res.status(400).send('Bad Request'); } } next(); }); }
JavaScript
볡사
β€’
μ‹€μ œλ‘œ νŒŒλΌλ―Έν„°λ‘œ UseHttps boolean을 λ°›λŠ” κ²ƒμœΌλ‘œ 보아 HTTPS μ‚¬μš© μ‹œμ—λ§Œ helmet 적용: helmet λ―Έλ“€μ›¨μ–΄λŠ” config.UseHTTPS κ°€ true 일 λ•Œλ§Œ ν™œμ„±ν™”λ˜κ³  μžˆλ‹€.
β€’
helmet μ„€μ • λ³€κ²½μœΌλ‘œ helmet() 호좜 μ‹œμ— frameguard μ˜΅μ…˜μ„ λͺ…μ‹œμ μœΌλ‘œ μ„€μ •ν•˜μ—¬ X-Frame-Options ν—€λ”μ˜ λ™μž‘μ„ λ³€κ²½ν•˜κ³ μž ν•œλ‹€.
1.
첫번째둜 ν•΄λ‹Ή 뢀뢄이 μ‹€μ§ˆμ μœΌλ‘œ μœ„ 문제λ₯Ό λ°œμƒμ‹œν‚€λŠ”μ§€ ν™•μΈν•˜κΈ° μœ„ν•˜μ—¬ frameguard μ˜΅μ…˜ 자체λ₯Ό λΉ„ν™œμ„±ν™” ν•΄λ³Έλ‹€.
if (config.UseHTTPS) { app.use(helmet({ frameguard: false // frameguard 미듀웨어 λΉ„ν™œμ„±ν™” })); app.use(hsts({ maxAge: 15552000 // 180 days in seconds }));
JavaScript
볡사
β€’
이λ₯Ό 톡해 ν•΄λ‹Ή helmet 미듀웨어가 ν•΄λ‹Ή 뢀뢄을 μ œμ–΄ν•˜κ³  μžˆλŠ” κ²ƒμœΌλ‘œ νŒŒμ•…λ˜μ—ˆλ‹€.
2.
이 μƒνƒœλ‘œλŠ” λ³΄μ•ˆμƒ 취약점을 λ°œμƒ μ‹œν‚¬ 수 μžˆμœΌλ―€λ‘œ λͺ…μ‹œμ μœΌλ‘œ ν•΄λ‹Ή 도메인에 λŒ€ν•œ 좜처 ν—ˆμš©μœΌλ‘œ μŠ€μ½”ν”„λ₯Ό 쒁히고자 ν•œλ‹€.
if (config.UseHTTPS) { app.use(helmet({ frameguard: false // frameguard 미듀웨어 λΉ„ν™œμ„±ν™” })); app.use((req, res, next) => { res.setHeader( "Content-Security-Policy", `frame-ancestors 'self' https://metaverseacademy.site:443 https://www.metaverseacademy.site:443;` ); next(); }); app.use(hsts({ maxAge: 15552000 // 180 days in seconds })); ...
JavaScript
볡사
μ΄λ ‡κ²Œ 헀더λ₯Ό μΆ”κ°€ μ„€μ •ν•΄μ€€λ‹€. 이후 λͺ¨λ°”μΌλ‘œλ„ 문제 없이 μ‹€ν–‰λ˜λŠ” λͺ¨μŠ΅
Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'.

μƒ˜ν”Œ λͺ¨μŠ΅

1.
ν”„λ‘ νŠΈμ—”λ“œμ˜ 파일 μ—…λ‘œλ“œ μš”μ²­ μ‹œμž‘
2.
λ°±μ—”λ“œ 컨트둀러의 μš”μ²­ 흐름
a.
(λ°±μ—”λ“œ) 컨트둀러 μš”μ²­ 도착 β†’ (λ°±μ—”λ“œ) 파일 μ„œλΉ„μŠ€ 전달
b.
(λ°±μ—”λ“œ) 파일 μ„œλΉ„μŠ€ β†’ (NAS) 파일 μ €μž₯ μ„œλ²„ 컨트둀러둜 μš”μ²­
c.
(NAS) 파일 μ €μž₯ 컨트둀러 β†’ NAS 파일 μ„œλΉ„μŠ€ β†’ NAS μŠ€ν† λ¦¬μ§€ λ‚΄ μ €μž₯
d.
(λ°±μ—”λ“œ) 파일 정보 및 NAS 정적 μ„œλΉ™ 경둜 λ°μ΄ν„°λ² μ΄μŠ€ μ €μž₯
3.
ν”„λ‘ νŠΈμ—”λ“œμ˜ 파일 λ°μ΄ν„°λ² μ΄μŠ€ λͺ©λ‘ 쑰회 ν™”λ©΄
4.
κ°•μ˜μ‹€μ˜ μ‹œμ²­ ν™”λ©΄ μ§„μž… λͺ¨μŠ΅
5.
μ‹œμ²­ ν™”λ©΄ μš”μ²­ μ‹œ NAS의 μ›Ήμ„œλ²„λ‘œλΆ€ν„° μ„œλΉ™λ˜λŠ” μ˜μƒμ˜ λͺ¨μŠ΅
λ°±μ—”λ“œμ„œλ²„β†’NAS API 파일 μ—…λ‘œλ“œβ†’NAS μ˜μƒ μ„œλΉ™ λ·° νŽ˜μ΄μ§€ λ°˜ν™˜κΉŒμ§€μ˜ κ΅¬ν˜„ μƒ˜ν”Œ

도메인 ꡬ맀 ν›„, DNS κ΄€λ¦¬νŽ˜μ΄μ§€ -> A Record μ„€μ • -> μ„œλ²„ μ™ΈλΆ€ IP μ—°κ²°

β€’
λ‘κ°œμ˜ μ ‘κ·Ό μ£Όμ†Œ HTTP 일반 배포 μƒνƒœ 확인 (이후 β†’ SSL λ°œκΈ‰ ν›„ HTTPS λ³΄μ•ˆ 배포둜 μ—°κ²°)
자체 μ„œλ²„(둜컬) HTTPS 배포λ₯Ό μœ„ν•œ WACSλ₯Ό ν†΅ν•œ 자체 Let’s Encrypt μΈμ¦μ„œ λ°œκΈ‰κ³Ό μ—°κ²°

Standalone?

Standardalone?
Angularμ—μ„œ "Standalone" μ»΄ν¬λ„ŒνŠΈλŠ” Angular 14 μ΄μƒμ—μ„œ λ„μž…λœ κΈ°λŠ₯으둜, λͺ¨λ“ˆ 없이 λ…λ¦½μ μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€. μ΄λŠ” μ»΄ν¬λ„ŒνŠΈμ˜ μž¬μ‚¬μš©μ„±κ³Ό 관리성을 높이며, 더 κ°„νŽΈν•˜κ²Œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ ꡬ성할 수 있게 ν•΄μ€λ‹ˆλ‹€.
Standalone μ»΄ν¬λ„ŒνŠΈμ˜ νŠΉμ§•
1.
λͺ¨λ“ˆ λΆˆν•„μš”: 기쑴의 Angular μ»΄ν¬λ„ŒνŠΈλŠ” λ°˜λ“œμ‹œ λͺ¨λ“ˆμ— ν¬ν•¨λ˜μ–΄μ•Ό ν–ˆμ§€λ§Œ, Standalone μ»΄ν¬λ„ŒνŠΈλŠ” λ…λ¦½μ μœΌλ‘œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
μ»΄ν¬λ„ŒνŠΈμ˜ standalone의 ν•„μš”μ„±κ³Ό 적용 λ²”μœ„ κ³ λ €