해커의 패시브 액티비티 로그 \패킷 까보기\ (feat. 과거 회상 주저리)

https://www.youtube.com/watch?v=S70i1LFa3bI

 

 

위험 (Risk)에 대해 대응하는 방법은 4가지가 있다:

- 위험 감소(완화, Mitigation): 위험 (Risk)는 위협 (Threat) x 취약점 (Vulnerabilities) x 자산 가치 (Asset)이다. 이 세 개의 요소를 조절해서 위험을 줄이는 방법이다. 가장 어렵지만 가장 좋은 방법이다.

- 위험 전가 (Transition): 위험에 대해선 손대지 않고, 책임을 다른 사람에게 떠넘기는 방식이다 (책임보험, 손해보험 등이 그 예)

- 위험 수용 (Acceptance): 위험을 그냥 받아들이는 것이다. 보통 위험이 작거나 다른 방안이 없을 때 쓴다. (아님 신경을 안쓰거나)

- 위험 회피 (Avoidance): 위험 요소를 제거하는 것이다. 보통 위협이나 취약점은 완전히 제거할 수 없으므로, 자산을 제거하는 것이다. 쉽게 말하면 서비스를 내려버리고 포기하는 것.

 

 

...

 

 

나는 하드웨어 설계 - 소프트웨어 개발 - 네트워크 운영의 길을 거쳐

정보보안 기술컨설팅 직무로 오게 되었다.

 

대학 3군데, 학위 5개를 거쳐 족같은 전직장까지 다니고

군대 2년에 퇴사 후 백수 2년을 거치다보니 (물론 그 기간동안 취준 + 대학생활을 하긴 했다)

내 DR (Direct Report) 역할을 하는 사람이 나보다 젊다.

 

 

전산공학, 컴퓨터 사이언스라는 광범위한 테두리 안에서

 

CPU랑 하드웨어 설계도, 어셈블리 - 준 기계어 (C99 말하는거다) -  OOP - 스크립트 언어 (웹은 프로그래밍이 아니라 스크립팅이라고 울부짖는 전형적인 프로그래머부심만 있는 사람 중 하나) - 완전 현대적인 뱀새기 인터프리터 언어 (+ R, 웹, ...) - 네트워크 운영 (이건 내 의지와 무관했음) - 인공지능과 클러스터 컴퓨팅 (클라우드)까지

 

진짜 오래묵은 씨된장급 기술부터 아직 덜구워져 반죽기가 있는 기술까지 기웃거리다 왔다.

 

좋게 보는 사람이 없다.

 

산만하다, 끈기없다, 의지박약에 하고싶은거만 맛보고 퉤 뱉는 미천한 인재로 떨어져버렸다.

 

풍부한 배경지식이 있다고 자신했으나,

특히 엔트리 레벨로 시작해야되는 "일", i.e. 업무라는 놈은

폭넓은 지식을 써먹을데 하나 없이 막노가다부터 해야하는 입장이라

심히 마음이 답답하여 조급함이 끓어오르기 직전까지 올라온다.

 

 

그래도 지금 회사 대표님이 포텐셜을 봐주신거라 믿고있고, 조급함을 끝내 참고있다...

 

 

...

 

 

입사한지 근 한 달이 지난 시점,

분명 사이버대를 다닐 때도 (보안학과 전공) 이전과 차원이 다른 정보보안 실력향상을 느꼈고,

국비교육을 들을 때 또다른 실력향상을 느꼈다만,

지금 일 하면서 모의해킹에 대한 실력향상은 이전에 느껴보지 못한 점핑 갭으로 다가온다.

 

 

기껏해서 스크립트문 WUI에서 틱 던져보고

음. 안먹는군. 하고 말았던게 엊그제같은데

파라미터 미친놈처럼 조작하고, 방화벽(WAF)에서 탁탁 거르는 것들을

미들핑거 올린채 가뿐히 우회하고 있는게 지금 모습이다.

 

 

 

서비스 구축, 서비스 운영, 네트워킹에 대한 경험이 있어서 그런가

서비스 하나 붙잡고 탈탈 털다보면

대충 어떻게 구축해놨고, 어떤 프레임워크와 라이브러리를 갖다 붙였으며, 어떤 놈들이 어떻게 맹글었는지 눈에 보인다.

 

 

 

앞서 떠든 위험 대응 4가지는 여기서 나온다.

- 수용: 내 회사 웹페이지가 얼마나 취약한지 알지도 못하면서 수용하는건, 아침마다 피를 토하면서도 암검사를 안받는것과 동일하다.

- 회피: 돈벌라고 사업하는게 영리기업의 활동인데 그걸 접는건 말이 안된다. 에지간히 위험해야 접지.

- 전가: 어느 미친 보험사가 관리 안하는 사이트 보험을 묻따로 insure 해주겠는가.

 

그럼 남는건 감소(완화) 뿐이다.

 

완화 과정에서:

- 위협 감소: 전 세계의 해커 (또는 비스므리하거나 될만한 놈들)을/를 싹 다 죽인다. - 말이 안된다.

- 자산가치 감소: 응 너네 주민번호 카드번호 계정정보 가치없는거야. 라고 하기엔 너무 양아치다. (그렇다고 익명/가명/비식별 처리해서 쓰자니 불가능한게 너무 많다. 당장 ID랑 PW만 해도 비식별처리? 그게 되나?ㅋㅋ)

그럼 남는건 취약점 감소, Vulnerabilities mitation밖에 답이 없다.

 

 

그걸 하기 위해 모의해킹을 하고 인프라진단을 하는 것이다.

그걸 하는 이유는 기업과 사용자를 보호하기 위해서고,

그걸 위해서 나는 모의해킹이나 인프라 진단이 하고싶었다.

(첨에 뭣도 몰랐을때는 (법이랑 경영,정책같은게 재밌고 나름 쫌? 알아서) 관리컨설팅을 지망했었다. 기술지식 있는데 굳이비?)

 

 

나는, 내 개인정보에 극도로 예민떠는 성격이고,

내 정보의 자기결정권을 가지기 어려운게 정보인 터,

적어도 내가 쓰는 서비스는 안전하게 만들고 싶었다.

 

원래 목적대로 쓰지 않는 것도 재밌고 (말그대로 핵, 해킹)

해킹을 하면서 (나쁜목적의 크래킹은 윤리때문에 하질 않았디만) 기술적 재미가 넘쳐 흐르는 것도 있고.

 

삶의 가치관도 부합하고, 흥미도 뿜뿜하고 (마치 칼로 사람 베는게 좋아서 외과 의사를 하는 것마냥)

뭣보다도 돈받으면서 그걸 하려면 모의해킹 같은 기술컨설팅밖에 답이 없었다.

 

 

 

근데, 아쉬운 점이 있다.

회사에서 프로젝트를 따오지 않으면 털 수가 없다.

 

집에서 '오늘은 쏘카나 털어볼까? 내일은 카카오?' 이러면서 공격을 막 날리기 시작하면

정보통신망법 위반인데다 그쪽 서비스에 장애를 낼 수도 있다.

 

내 성향, 에니어그램 1w9,에 반하는 행동이거니와

내 밥줄이 달린 문제라 감히 일반 서비스에 패킷 하나 변조해서 던져보기가 어렵다.

 

 

토르 트래픽을 실어보내게 AWS에 VPN서버 몇개 파서 IP 돌려가며 공격해볼까 싶다가도

결국엔 위법 문제가 걸리다보니 결국 하지 않게 되더라고.

(특히 한국은 결국 인터넷 관문이 하나라 (KT) VPN 트래픽만 찍어봐도 내가 누군지 뻔히 나올거다)

 

 

https://thewanderer.tistory.com/161

웹 모의해킹 Log - (작업중)

 

내가 가진 웹 소스가 몇개라 (ASP, JSP, PHP)

내가 만든 페이지나 혼자 털어봐야지 하다가,

 

한달 근무하면서 머리 좀 텄다고

그세 질렸다. 너무 뻔한 공격밖에 없음.

 

 

그렇다고 허술한 암호화 혼자 적용해놓고

혼자 복호화해서 파라미터 조작하기에는

유추할 수 있는게 아니다보니까

재미도 없고.

 

 

그래서 저 방구석에 처박아놓고 뻔히 보며 모른체 무시하고 있는 프로젝트이다.

 

 

오글거리는 새벽갬성도 아니고

힘든데 글이나 싸지르고싶어지는 퇴근갬성이라

커클랜드 브랜드의 싸구려 위스키만 혼자 홀짝이고 있다.

 

원래 어두침침하고 눅눅한 분위기를 좋아하고 (슬리데린 갔으면 잘했을지도)

그래서 저 노래도 오늘 브금으로 잡은 것이다.

 

 

 

가끔씩 퇴근하고 놀러오는 친구와 즐거운 번식활동이나 하고 (것도 요즘 많이 줄었다. 둘 다 나이먹었음. 힘들다.)

나머지는 앞날의 막막함만 안은채 의미없는 활동으로 시간이나 때우는게 너무 싫어서

오늘은 퇴근을 하고나니 이제 뭐하지 뭔가 하긴 해야하는데 하는 새로운 막막함 앞을 가린다.

 

 

저번에 대표님이랑 술 맛만 보고 온 날이 떠올라서

재미없는 드림핵이나 끄적이고 있다가

갑자기 아이디어가 떠올랐다.

 

 

능동적인 공격은 망법 위반이지만,

정상사용 패킷을 이리저리 까보고 씹고 맛보고 냄새맡고 더듬어보고 쥐어짜보는건 위반이 아니지 않은가?

 

 

 

ㄱㄱ

(하마터면 이 글의 대/소분류를 해킹으로 안 잡고 직장인 하소연으로 잡을뻔 했다)

 

버프 다운 ㄱㄱ

 

 

 

전 회사 다닐때는 일과 관련된거면 질색을 했고

회사 1분 일찍가는게 그렇게 억울했으며

회사업무의 역량을 집에서 내 시간에 늘리는건 미친놈이나 하는 짓거리였다.

 

 

지금은? 그런게 전혀 없다.

그래서 월급은 반토막이지만 만족한다.

(불만족스러운게 많지만, 충분히 참을만한 업무 만족감이 온다)

 

 

패킷이 우수수 쏟어져 나온다.

 

전같으면 OUT OF THE FUCKING SCOPE! 하고 다 갖다 버렸을 패킷이디만.

지금은 귀한 패킷이다.

 

 

 

ㅅㅂ 내 블로그 한 번 들어왔는데

요청이 170개나 날아갔다.

 

개무겁구만.

 

 

그럼 작업을 시작한다.

(흥미로운 패킷이 있으면 기록하겠다)

 

스태티스틱 관련 패킷을 보며

(내 블로그 진입 직후 오가는 패킷이다)

벌써부터 조작해서 반응을 보고싶은.... 마음이 굴뚝같다.

ㅋㅋ 참자 참아야 하느니라.

 

 

티아라.

카카오의 트래킹 관련 서비스명?인가보다.

 

 

음.. 쏘아... 어디서 많이 봤는데

캐노니컬 네임밖에 기억이 안난다.

 

지식이 줄줄줄줄 새나가고 있다, 이 빡대가리로부터..

https://www.cloudflare.com/ko-kr/learning/dns/dns-records/dns-soa-record/

음... 내일 술 안먹고 봐야겠다.

 

 

 

근데 이새기들 내 운영체제는 왜 알아가는거야

맞고싶냐?

 

 

그 다음패킷은 운영체제 따른 스크립트를 던져주는 것 같다.

난독화를 잘해놨고만.

 

윈도우 가상머신을 켜야겠구만..

 

CDN하면 미디어 디스트리뷰션만 떠올렸는데

js를 CDN으로 배포할거란 생각은 해보질 않았다.

 

신기하다.

 

 

 

아우 피곤해

 

내일 자전거 타고 출근할라 그랬는데

걍 차끌고 가야겠다.

 

날이 너무 좋다.

 

오늘은 이만.

(내 블로그 랜딩페이지 접속할 때 패킷만 대충 보고 접었다. ㅋㅋ;)

 

29th Aug 끝.

 

31st Aug 시작

 

 

내 블로그 접속 후 로그인 버튼을 눌렀다.

GET 파라미터로 이전 주소가 넘어간다.

 

 

암호화된 정보가 넘어왔다.

 

흠.

 

 

큐알 로그인 진입

 

Alive? 패킷처럼

1초마다 로그인 확인 요청 패킷이 날아간다.

 

 

로그인 실패시 -3001, 성공시 0으로

스테이터스 코드가 날아온다.

 

 

당연하지만 이걸 0으로 조작해도

넘어오는 계정정보는 서버에서 안줘버림 그만인지라.

 

 

해보고싶다...ㅋㅋ

 

 

31st Aug 끝

 

<@7th Septembre

 

mark-up-like 으로 묶어보기로 하였다.

가독성이 얼마나 올라갈지 모르겠다.

 

좋은 소기업, 사이즈에 걸맞는 월급,

ㅅㅂ 이 월급 받고 다녀야되나 (갈만한 기업 옮기면 연봉이 두 배가 된다)

싶다가도 하고싶은 일이 이거라 참고 잊으려하는 요즘 급여가 가진 단 하나의 장점이 있다.

 

근로장려금.

 

좋같은 월급 많이 안올려주면

빨리 노하우만 간장게장 속살 빼먹듯이 훑어먹고

도망가야지...

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

꿍시렁 대면서 버프스위트를 켰다.

 

최근에 금융사 일을 하나 받아서 탈탈 털고 있어서

본인인증관련 우회가 어떻게 일어날 수 있고

어떻게 처리가 되야하는지 알고 있다.

(긕뎡원 공문을 통해 예시를 잘 보았다)

 

어떻게 조작할만한 껀덕지가 있는지 한 번 까보자.

 

흐멜이 굉장히 인터레스팅 하다.

 

<![CDATA[
            
        ]]>

이거 어디서 굉장히 많이 본건데 (공기업)

흠...

ㅅㅂ 이게 뭘까...

 

 

 

 

베이스64 인디코딩 스크립트가 넘어왔다.

 

왜..?

 

 

19th Septembre 2024

 

티스토리 페이지에 접근할 경우 Tiara 라는 서비스? 명이 보인다.

 Daum 과 연관된 서비스인데, 정황상 카카오에서 개발/운용하는  Authentication  관련 서비스로 추정된다.

 

지피티가 분석한 의견은 다음과 같다.

The response you received is the JavaScript file tiara.min.js from Kakao's service, which is responsible for handling tracking and analytics, most likely associated with user activity and engagement on Kakao's platforms. Here's a breakdown of key components of the response:

1. Cache Control: The file is cached for 7200 seconds (2 hours) to optimize performance, reducing repeated network requests.
2. Cookies: It modifies the __T_ and __T_SECURE cookies, possibly for tracking purposes and to ensure secure handling (SameSite=None; Secure).
3. User Agent Data: It checks for user agent details using navigator.userAgentData, which retrieves more granular information about the user’s device and platform (e.g., mobile, platform, model). This is useful for analytics and customizing content for different devices.
4. Tracking URLs: The script decides which tracking URL to use based on the domain (e.g., stat.tiara.kakao.com for Kakao, stat.tiara.daum.net for Daum). This ensures data is routed to the correct tracking endpoint based on the service being accessed.
5. Session Management: A session timeout of 1800 seconds (30 minutes) is set, likely indicating the period after which user session data is considered expired.
6. Analytics Data Collection:
   • The script collects a variety of data points, including screen size, timezone, cookie status, and page metadata.
   • It tracks specific actions via event listeners (e.g., mouse clicks) and sends this information to the tracking server (stat.tiara.kakao.com or similar) using an XMLHttpRequest (AJAX) or an image-based tracking pixel (for environments where XMLHttpRequest is restricted).
7. Unique Identifiers: The script generates unique UUIDs and timestamps, likely to track individual sessions or users anonymously.
8. Click Tracking: The script also implements logic to track user interactions on the page, including capturing click positions, targeted elements, and additional metadata associated with the interaction (e.g., search terms, content IDs).

This script is part of Kakao's broader tracking system, possibly integrated with their "Tiara" analytics platform to monitor user behavior, page performance, and user engagement across various services under the Kakao ecosystem.

If you're analyzing or looking into this for security or privacy reasons, it's important to note that such scripts are typically used for analytics, but they can also be involved in more detailed tracking for personalization or targeted advertisements.

 

이걸 왜 분석했냐면,

카카오로 티스토리 로그인시 넘어오는 리스폰스 패킷 중에

 TSJSESSION 쿠키가 보였기 때문이다.

 

딱봐도 세션쿠키 만들라는건데

( duh)

TSJ?  이게 뭐지 싶었다.

 

필자

With ASP, PHP or JSP, the session's name contains the server side language's name, like JSPSESSION or somthing like that. What could TSJSESSION possibly mean?

 

피티

The session name "TSJSESSION" could indicate a custom or proprietary session management mechanism, with "TS" likely referring to a specific framework, library, or technology stack used in combination with JSP or another server-side language.

• "JSESSION" is commonly associated with Java Servlet Pages (JSP) and is used to track user sessions in web applications.
• The "TS" prefix could refer to:
  • Tibco Software: If the system involves Tibco, a company specializing in enterprise integration and analytics software, "TS" might relate to its products.
  • Tornado Server: Though less common, it might be related to a Tornado web server, a Python framework, though this is a bit of a stretch for a JSP-based session.
  • Transaction Server: It could be referring to a transaction management system, especially if the application involves complex transaction handling.
  • TypeScript: Unlikely in this case since TypeScript is front-end, but the "TS" could point to a custom implementation if TypeScript is somehow part of the session handling.

Without more context, "TSJSESSION" could either be a modified version of JSESSION related to a proprietary or specialized system, or it might signify a session associated with another backend technology integrated with JSP or Java. It's not a common session name, which suggests it's unique to the particular architecture you're looking at.

 

필자

The kakao uses "tiara" service for authentications apparently, then could it mean Tiara-Session?

 

피티

Yes, that's a plausible interpretation! If Kakao is using a service named "Tiara" for authentication, then "TSJSESSION" could very well stand for "Tiara Session" or a session related to the Tiara service.

In this case:

• TS could refer to Tiara Service, and the session name might be a way of tracking authenticated user sessions via Tiara.
• The session identifier could be related to how Tiara manages user sessions, cookies, or tokens, possibly integrating with the broader Kakao infrastructure.

This seems reasonable given the context of Kakao's authentication mechanisms, and it aligns with how other platforms often prepend session identifiers with relevant service names or initials.

 

필자

do you still think that TSJ SESSION could be related to this Tiara thingy

 

피티

Based on the response you shared for the Tiara JavaScript file, it does appear that Tiara is used for tracking and analytics on Kakao-related websites, collecting user data, session information, and other telemetry details. The Tiara script sends data back to Kakao's servers and tracks users across multiple Kakao domains like .kakao.com, .daum.net, .melon.com, and others.

The TSJ SESSION you mentioned earlier might not be directly part of Tiara. Tiara seems focused on tracking user interactions, device metadata, and generating unique IDs, but the TSJ SESSION token could still be related to authentication or session management, which may be used in parallel with Tiara.

Tiara and TSJ SESSION could both be involved in the broader ecosystem of user session management:

• Tiara: Likely focuses on analytics and tracking.
• TSJ SESSION: Could be part of the actual user authentication or session validation, making sure that users are correctly logged in and maintaining their session data.

Both could coexist, but they serve different purposes — Tiara for monitoring and TSJ SESSION for managing user authentication or session continuity. More details about how TSJ SESSION interacts with other parts of the Kakao service (login mechanisms, etc.) might clarify the exact relationship.

 

필자

Dang I was wrong about Tiara being a auth service, arent i

 

피티

Yes, it seems Tiara is not an authentication service as you initially suspected. Instead, it's more focused on tracking and analytics. Tiara is designed to monitor user behavior across Kakao's various services, collecting data for things like user interactions, page views, and device information, which is common for tracking frameworks.

Authentication services, like what TSJ SESSION might represent, typically handle user credentials, session management, and ensuring that a user's identity is verified across different requests. Tiara, by contrast, is more of a data collection tool to enhance user engagement, deliver targeted content, and provide insights for developers and marketers.

It’s an easy mistake to make, though, given that both tracking and authentication involve managing user sessions in different ways!

 

 

젠장.

TSJ가 뭘까.

 

일단은 넘어가자.

 

내 개인 웹페이지를 (내부망 전용으로) 만들 예정이다.

2024.09.17 - [1.A. High Level Computing/On Premise Computing] - 해커의 개인용 웹서비스 구축 Log (줘또없는 화이트해커의 DevSecOps) - 진행중

해커의 개인용 웹서비스 구축 Log (줘또없는 화이트해커의 DevSecOps) - 진행중

이왕 프로젝트 하는 김에

내가 잘 모르는 미들웨어를, 것도 시장에서 제일 많이 쓰이는 순으로 정렬해서, 고르기로 결정했다.

 

Node.js로 만들 예정인데,

지식이 사실 없다고 봐야해서 이런 저런 사이트들 기웃거리며

관련 정보들을 유추하고 있다.

 

아래는 지피티 컨설턴트와의 해당 대화 내역이다

 

 

필자

In my understanding, the javascript is client side language. With Node.js and express, I believe the javascript can run as serverside script. Am I correct? Not familiar with Node.js but am with Java, JSP and other types of Web App Services

 

피티

Yes, you're correct! JavaScript was originally designed as a client-side scripting language, running in web browsers to make websites interactive. However, with the introduction of Node.js, JavaScript can now be used on the server side as well.

Node.js is a runtime environment that allows JavaScript to run on the server, outside the browser, using the V8 engine (which is also used by Chrome). This makes it possible to build server-side applications using JavaScript. Express.js is a popular framework built on top of Node.js that simplifies creating web servers and handling requests and responses.

So, just like how Java or JSP works on the server side in web applications, with Node.js and Express, you can write JavaScript to manage backend logic, databases, and API calls, making JavaScript a full-stack language.

 

필자

If so, an website sending JSON and renderes diferrent pages with the same HTML could mean it is based on Node.js?

 

피티

Yes, that's possible! A website that sends JSON responses and renders different pages using the same HTML template can indeed be using a Node.js-based backend, though it's not the only possible setup.

In a typical Node.js setup, frameworks like Express.js often use templating engines (like EJS, Handlebars, or Pug) to render different views using the same HTML structure but with different data. The server might respond with JSON data to the client, which can then be used to dynamically render content on the page without reloading the entire page—this technique is common in Single Page Applications (SPAs).

Here’s how it works in brief:

• Node.js + Express.js: The server handles routes and sends either HTML or JSON data based on the request.
• Client-side rendering: JavaScript (often using frameworks like React, Vue, or Angular) takes the JSON and renders it dynamically into the page using the same HTML structure.

While this approach is common with Node.js, other server-side technologies (like Python with Flask/Django or Ruby with Rails) can also serve JSON and use templating systems. However, Node.js is often used in modern web apps, especially when JSON APIs are involved.

 

필자

With SPAs, does the systems usually distributes js file? I'm studying packets from / to Kakao's service and it uses cdn network to send out the js files. Assuming it is for SPA I wonder.

 

피티

Yes, in Single Page Applications (SPAs), it is common for the system to distribute JavaScript files, often through a Content Delivery Network (CDN). In an SPA, the client-side JavaScript is responsible for rendering the UI and managing the application logic after the initial page load. These JS files are typically larger and more complex because they contain most of the app's logic, including routing, state management, and UI rendering.

The use of a CDN to distribute these JS files is also very common. CDNs allow faster delivery by caching content in servers distributed across multiple geographic locations, improving load times for users globally.

In your case, Kakao might be using a CDN to ensure that their JavaScript files are delivered quickly and efficiently, which is a common practice for SPAs to ensure performance optimization. These JS files would handle fetching data, updating the UI dynamically, and possibly rendering different "views" based on the JSON responses they receive.

This setup strongly suggests the use of SPA architecture.

 

 

카카오가 (정확히는 티스토리가) SPA + node.js  기반일 것같은 추측이 들어서

뒤적거리다가 svg 파일을 다시 발견했다.

 

 

필자

exlaplain svg files

 

피티

SVG (Scalable Vector Graphics) files are a type of image format based on XML (Extensible Markup Language) for defining vector-based graphics. Unlike raster images like JPEG or PNG, which are made up of pixels, SVGs are composed of shapes such as paths, circles, and polygons, which can be scaled to any size without losing quality.

Here’s a breakdown of key aspects of SVG files:

1. Scalability

• SVG images are resolution-independent because they rely on mathematical equations to draw shapes rather than pixels. This makes them ideal for responsive design, where the same image can be used on different screen sizes and still appear sharp and clear.

2. Text-Based (XML)

• SVG files are stored as text files using XML, meaning you can open and edit them in any text editor. For example, a circle in an SVG file might be represented as:
  xml

  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  This makes it easy to manipulate the images programmatically or through CSS and JavaScript in web development.

3. Interactivity and Animation

• Since SVG is XML-based, it can be styled and manipulated using CSS or JavaScript, adding hover effects, dynamic interactions, or animations.
  • CSS can control properties like color or opacity.
  • JavaScript can control behavior, such as responding to user actions (clicks, hovers, etc.).

4. Lightweight

• SVG files are typically smaller in size compared to other image formats, especially when dealing with simple graphics (e.g., logos, icons). This makes them ideal for web use where performance and fast load times are important.

5. Accessibility

• Text within an SVG file can be indexed by search engines and screen readers, which makes SVG images more accessible than raster images.

6. Common Uses

• Logos and icons.
• Illustrations, diagrams, and charts.
• Animations and interactive graphics on websites.

7. Limitations

• SVG files are not ideal for complex images like detailed photographs, as they are better suited for simpler, geometric shapes.

Example Usage

In web development, an SVG can be embedded directly in HTML like this:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

 

This would draw a red circle with a black border that scales smoothly, no matter how much you zoom in.

In summary, SVGs are highly versatile for scalable, interactive graphics and are widely used in web design due to their flexibility and efficiency.

 

필자

With Nginx, Node.js and Express, and PostgreSQL setup, where does the svg fits in?

(이건 내가 만들 서비스에서 svg를 쓸만한 구석이 어디에 있는건지 궁금해서 물어본 것이다)

 

피티

In a setup involving Nginx, Node.js/Express, and PostgreSQL, the SVG (Scalable Vector Graphics) files play a specific role, mainly in the front-end of the system. Here's how it fits in with each part of the stack:

1. Nginx (Reverse Proxy and Static File Serving)

Nginx is commonly used as a reverse proxy to handle incoming HTTP requests and forward them to the Node.js backend. It can also serve static files directly, such as images, JavaScript, CSS, and SVGs.

• Where SVG fits: Nginx can serve static SVG files directly to the client (browser). When a user requests an SVG file (e.g., a logo or icon), Nginx will fetch it from the server's file system and deliver it to the client without involving Node.js or PostgreSQL. This reduces the load on the backend.

2. Node.js/Express (Backend Server)

Node.js with Express typically handles the backend logic, including API calls, authentication, and dynamic content rendering.

• Where SVG fits: SVGs can be dynamically generated or manipulated using Node.js if needed. For example, an Express route could generate a custom SVG on-the-fly, perhaps by combining data from a database or user input (e.g., creating a custom chart or map). However, more often, static SVG files would be delivered via Nginx rather than dynamically generated by Node.js unless there's a need for customization.

3. PostgreSQL (Database)

PostgreSQL is the database layer, storing structured data for the web application, like user data, content, or any other relevant data.

• Where SVG fits: While PostgreSQL does not directly serve SVGs, it could store references to SVG files (e.g., file paths or URLs) in the database. It can also store data that could be used to create or modify an SVG. For example:
  • You might store vector coordinates, colors, or chart data in PostgreSQL, and then use Node.js to generate or manipulate an SVG based on that data.
  • PostgreSQL could be queried to retrieve relevant data for creating data visualizations (e.g., charts) as SVGs on the client-side or server-side.

Client-side (Browser)

The browser is where SVG files are rendered and used in the front-end of the application. Once Nginx serves an SVG or Node.js dynamically generates one, it is displayed directly in the user’s browser.

• Where SVG fits: SVGs will be loaded and rendered on the web page. JavaScript running on the client-side can further manipulate the SVG (e.g., adding animations, interactivity, or changing styles).

Workflow Example

1. Nginx: Acts as a front-facing web server, serving static assets like SVG files directly from the server’s filesystem.
2. Node.js/Express: Handles backend logic, API requests, and potentially dynamic generation of SVGs based on data from PostgreSQL.
3. PostgreSQL: Stores application data, which could include information needed for rendering or manipulating SVGs (e.g., data visualizations).

Example Scenario:

Imagine a dashboard web app:

• Nginx serves the static assets (e.g., the website’s layout, CSS, and static SVG icons or images).
• Node.js/Express handles API requests for real-time data.
• PostgreSQL stores the data for charts and graphs.
• When the user opens the dashboard, a combination of static SVGs (icons, logos) and dynamically generated SVGs (e.g., data visualizations based on PostgreSQL data) are displayed.

In summary, SVG fits into the front-end and potentially as dynamically generated content via Node.js based on data from PostgreSQL, while Nginx efficiently serves the static SVG assets to the client.

 

필자

With ASP, PHP or JSP, the session's name contains the server side language's name, like JSPSESSION or somthing like that. What could TSJSESSION possibly mean?

 

피티

...

 

 

흠. 일단 알겠다.

 

 

 

 

 

 

 

필자

 

 

피티

 

 

필자

 

 

피티

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7th Septembre/>

 

 

 

End of Document.