[24/09/26-10/02] 안내 및 질문 모음집

[minjeongss]

📚 분량

38장-39장

🎤 발표자

김민석

질문

38장

async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되어도 괜찮은 예시가 궁금합니다) (김민정)

39장

• Virtual DOM과 DOM의 차이 (김민석)
• HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

[minjeongss]

38장

• async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되- 어도 괜찮은 예시가 궁금합니다) (김민정)

  • 방문자 수 카운터나 광고 관련 스크립트처럼 각각 독립적 역할을 하는 서드 파티 스크립트를 현재 개발 중인 스크립트에 통합할 때 사용
  • 현재 개발 중인 스크립트에 의존하지 않음

  <!-- Google Analytics는 일반적으로 다음과 같이 삽입합니다. -->
  <script async src="https://google-analytics.com/analytics.js"></script>

39장

• Virtual DOM과 DOM의 차이 (김민석)
  • dom: 실제 화면에 나타내는 트리
  • virtual dom: dom을 모방하는 형태로 메모리 상에만 존재하는 가상의 dom
  • virtual dom과 dom의 관계
    • 데이터 변경 발생
    • 전체 UI가 virtual dom에 렌더링 진행
    • 이전 virtual dom과 변경 후 virtual dom을 비교
    • 변경된 부분만 dom에 반영
  • virtual dom의 내부 동작
    • dom fragment*에 변화를 묶어서 적용한 후, dom에 전달
      • dom fragment
        • 메인 dom 트리에 포함되지 않는 가상 메모리에 존재하는 dom 노드 객체
        • 브라우저 리페인트 영향 없이 메모리에서 돔 조작 가능
    • virtual dom은 이 과정을 자동화+추상화 한 것임
      
• HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

  • 사용자 입력을 검증하지 않으면 악성 스크립트가 HTML 문서에 삽입될 수 있음

  • 예시

    • input 태그에 일반적인 string값을 넣는 것이 아닌, script와 같은 값을 입력하는 경우

    <script>alert('XSS')</script>

  • 해결 방법: 사용자 입력 정규 표현식과 같은 방법으로 검증

[joarthvr]

38장

async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되어도 괜찮은 예시가 궁금합니다) (김민정)

1. 광고 스크립트
   • 광고는 페이지 콘텐츠와 독립적으로 로드될 수 있으며, 빠른 로딩이 중요합니다.
2. 외부 위젯
   • 소셜 미디어 위젯이나 댓글 시스템과 같은 외부 위젯도 async로 로드할 수 있습니다

39장

Virtual DOM과 DOM의 차이 (김민석)

성능과 처리 방식 관점

DOM

• 직접적인 조작은 비용이 큰 작업이며, 특히 대규모 애플리케이션에서 성능 이슈를 야기할 수 있습니다
• 변경이 발생할 때마다 브라우저의 레이아웃 계산과 리페인트 과정이 반복

Virtual DOM

• 메모리 상에서 변경 사항을 먼저 처리한 후, 실제 DOM과 비교하여 필요한 부분만 업데이트
• 불필요한 DOM 조작을 줄여 성능을 개선

사용 목적 관점

DOM

• 웹 페이지의 구조, 스타일, 내용을 동적으로 조작하는 데 사용됩니다.

Virtual DOM

• DOM 조작의 비효율성을 해결하고 애플리케이션의 성능을 향상시키기 위해 도입됌
• 특히 React와 같은 프레임워크에서 UI 업데이트를 최적화하는 데 사용됌

렌더링 과정

DOM

• 변경 사항이 발생할 때마다 전체 DOM 트리를 다시 그립니다

Virtual DOM

• 변경 사항을 가상 DOM에 먼저 적용한 후, 이전 상태와 비교하여 실제 DOM에는 변경된 부분만 업데이트합니다

HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

• HTML 파싱은 애플리케이션의 보안 경계를 우회할 수 있게 합니다
• 브라우저는 HTML을 파싱하면서 스크립트를 자동으로 실행하기 때문

[se0kcess]

38장

async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되어도 괜찮은 예시가 궁금합니다) (김민정)

async 어트리뷰트는 JavaScript 파일을 비동기적으로 로드할 때 주로 사용됨

1. 외부 API에서 데이터를 가져오는 경우
   <script async src="api-fetch.js"></script>
2. 분석 도구 초기화
   <script async src="analytics.js"></script>
3. 독립적인 유틸함수 정의
   <script async src="utils.js"></script>

39장

Virtual DOM과 DOM의 차이 (김민석)

• DOM : HTML 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다.
• Virtual Dom : 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미한다. 변화가 실제 DOM에 적용되기 전에 가상의 DOM을 한번 거쳐 미리 처리하고 저장한 후 실제 DOM에 업데이트 할 수 있게 해준다.

렌더링 방식
DOM: 변경이 있을 때마다 실제 DOM을 직접 조작한다. 이는 브라우저가 리플로우와 리페인트 과정을 거치게 하여 성능에 영향을 줄 수 있습니다.
Virtual DOM: 변경사항을 먼저 가상 DOM에 적용한 후, 실제 DOM과 비교하여 차이가 있는 부분만 실제 DOM에 적용한다.

데이터가 변경될 때 마다 DOM은 매번 처음부터 다시 화면이 그려지는 불필요한 반복이 발생된다. 그래서 DOM을 조작하는 Virtual DOM이 탄생하게 되었다. Virtual Dom은 변화가 실제 DOM에서 적용되기 전에 가상의 DOM을 거쳐서 계산 단계를 줄이고 효율적인 DOM조작을 가능하게 만들어준다. 만약 데이터가 변경되지 않는 웹 페이지라면 일반 DOM이 성능이 좋을 수 있고, 장바구니 등 사용자에 따라 데이터가 변경되는 웹페이지라면 DOM 조작이 많이 발생하기에 상황에 맞게 virtual DOM을 사용해야 한다

---

HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

• 사용자 입력이나 외부 소스에서 온 데이터를 적절히 검증하거나 이스케이프하지 않고 그대로 HTML에 삽입하면, 공격자가 악의적인 스크립트를 주입할 수 있다.

• 브라우저는 HTML을 파싱할 때 <script> 태그나 이벤트 핸들러 속성(예: onclick)을 만나면 포함된 JavaScript를 실행한다. 적절한 파싱 없이 이러한 요소가 삽입되면 악성 코드가 실행될 수 있다.

• 데이터가 삽입되는 HTML 컨텍스트(속성 값, 태그 내용 등)에 따라 다른 이스케이프 규칙이 적용되어야 하는데, 이를 무시하면 XSS 취약점이 발생할 수 있다.

• 브라우저는 HTML 엔티티(예: <, >)를 해당하는 문자로 해석한다. 이를 고려하지 않고 파싱하면 공격자가 이를 악용할 수 있다.

• URL에 포함된 매개변수를 적절히 디코딩하지 않고 사용하면, 인코딩된 악성 스크립트가 실행될 수 있다.

[shlee9999]

38장

async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가?

(DOM 생성이 완료되기 이전에 실행되어도 괜찮은 예시가 궁금합니다) (김민정)*
외부 분석 스크립트 로딩

Google Analytics나 Mixpanel 같은 외부 분석 스크립트는 일반적으로 페이지 렌더링을 차단하지 않고 비동기적으로 로드하는 것이 좋습니다. 이런 스크립트들은 DOM과 상호작용하지 않으므로 async를 사용해도 안전합니다.

<script async src="https://www.google-analytics.com/analytics.js"></script>

광고 스크립트

광고 스크립트를 비동기로 로드하는 이유는 광고 로딩이 페이지 렌더링을 차단하지 않도록 하기 위함입니다. 비동기 로딩을 사용하면 광고가 로드되는 동안에도 사용자는 페이지의 주요 콘텐츠를 볼 수 있습니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

39장

Virtual DOM과 DOM의 차이 (김민석)

개념

• DOM은 HTML 문서의 구조를 나타내는 실제 객체 모델이다.
• Virtual DOM은 DOM을 추상화한 가상의 객체 모델로, 메모리 상에만 존재한다.

역할

• DOM은 웹 페이지의 HTML 요소들을 구조적으로 표현하고, JavaScript로 조작할 수 있게 해준다.
• Virtual DOM은 DOM의 변경사항을 실제 DOM에 반영하기 전에 버퍼 역할을 하여 성능을 최적화한다.

변경 시 동작

• DOM은 요소가 변경되면 전체 DOM 트리를 다시 렌더링하여 성능 저하가 발생할 수 있다.
• Virtual DOM은 변경된 부분만 실제 DOM에 반영하므로 불필요한 렌더링을 줄일 수 있다.

문법

• DOM은 document.querySelector() 등의 메소드로 요소를 찾는다.
• React의 Virtual DOM은 ref를 사용하여 요소에 접근한다.

성능

• DOM 조작은 브라우저 자원을 많이 소모하므로 성능 이슈가 발생할 수 있다.
• Virtual DOM은 실제 DOM 업데이트를 최소화하여 어플리케이션 속도를 향상시킨다.

따라서 Virtual DOM은 DOM을 추상화하여 변경사항을 효율적으로 관리함으로써, 불필요한 렌더링을 줄이고 성능을 최적화하는 역할을 합니다. React와 같은 라이브러리에서 Virtual DOM을 활용하여 대규모 어플리케이션의 성능을 향상시킬 수 있습니다.

HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

• 특수 문자를 인코딩하지 않고 그대로 출력하면 HTML 태그 구조를 변경할 수 있어 XSS 공격에 악용된다.

[kimjuyoung78]

38장

async 어트리뷰트를 사용하는 자바스크립트 예시는 무엇이 있는가? (DOM 생성이 완료되기 이전에 실행되어도 괜찮은 예시가 궁금합니다) (김민정)

async 어트리뷰트는 DOM 생성이 완료되기 전에 실행되어도 괜찮은 스크립트에 사용된다.

• 외부 API나 서비스를 초기화하는 스크립트
• 애널리틱스 도구를 설정하는 스크립트 (Google Analytics 스크립트) 등이 async로 로딩된다. 이는 페이지 로딩을 방해하지 않으면서 최대한 빨리 데이터 수집을 시작할 수 있다.

39장

Virtual DOM과 DOM의 차이 (김민석)

Virtual Dom은 변화가 실제 DOM에서 적용되기 전에 가상의 DOM을 거쳐서 계산 단계를 줄이고 효율적인 DOM조작을 가능하게 만들어준다. 띠리사 상황에 맞게 DOM을 사용해야 한다.

• DOM: 브라우저가 HTML 문서를 파싱하여 생성하는 실제 문서의 프로그래밍 인터페이스, 브라우저가 직접 수행하며, 변경 시 즉시 렌더링에 반영
• Virtual DOM: 실제 DOM의 가벼운 복사본으로, 메모리에 존재
변경사항을 Virtual DOM에 먼저 적용한 후, 실제 DOM과 비교하여 필요한 부분만 업데이트 -> 성능 최적화를 위해 사용

HTML 마크업 문자 파싱함에 의해 크로스 사이트 스크립팅 공격에 취약해지는 이유는 무엇인가? (김민정)

• innerHTML은 HTML 문자열을 그대로 파싱하여 DOM에 삽입하는데
만약 HTML 문자열에 악의적인 스크립트가 포함되어 있다면, 이 스크립트가 실행될 수 있다. 공격자가 악성 스크립트를 주입할 수 있다.