웹 메시징
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
웹 메시징은 웹 페이지 간에 메시지를 주고받을 수 있게 해주는 기술이다. `postMessage` 메서드를 사용하여 한 도메인에서 다른 도메인으로 텍스트 메시지를 전송하며, 주로 iframe, 팝업 창 등 다른 프레임이나 창 간의 통신에 사용된다. 메시지는 `data`, `origin`, `source` 속성을 가지며 비동기적으로 처리된다. 보안을 위해 `origin` 속성을 확인하여 예상치 못한 출처로부터의 메시지를 차단해야 한다. 주요 웹 브라우저와 레이아웃 엔진에서 지원된다.
더 읽어볼만한 페이지
- HTML - Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다. - HTML - 폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다. - API - Tk (소프트웨어)
Tk는 Tcl 스크립팅 언어의 크로스 플랫폼 GUI 툴킷으로, 다양한 플랫폼 이식과 여러 프로그래밍 언어 바인딩을 지원하며 사용자 정의 가능한 위젯들을 제공한다. - API - ASIO
ASIO는 독일 스타인버그에서 개발한 오디오 입출력 API 규격으로, 낮은 지연 시간과 멀티 채널 I/O를 지원하며 윈도우 운영체제에서 주로 사용된다.
| 웹 메시징 | |
|---|---|
| 웹 메시징 | |
| 정의 | 웹 브라우저 간 메시지 통신 방법 |
| 종류 | WebSocket SSE WebRTC 데이터 채널 MessageChannel |
| 기술 | |
| WebSocket | 실시간 양방향 통신 헤더 오버헤드 적음 WebSocket 프로토콜 사용 |
| Server-Sent Events (SSE) | 서버에서 클라이언트로 단방향 실시간 업데이트 텍스트 기반 HTTP 프로토콜 사용 |
| WebRTC Data Channels | 브라우저 간 P2P 데이터 통신 파일 공유, 게임 등에 활용 WebRTC API 사용 |
| MessageChannel | 동일 페이지 또는 다른 페이지의 스크립트 간 통신 postMessage API 사용 |
| 활용 분야 | |
| 실시간 애플리케이션 | 채팅 온라인 게임 스트리밍 서비스 |
| 협업 도구 | 공동 문서 편집 화상 회의 |
| 알림 서비스 | 실시간 업데이트 푸시 알림 |
| 기타 | 광고 소셜 미디어 피드 |
| 장점 | |
| 실시간성 | 즉각적인 데이터 전송 가능 |
| 효율성 | 연결 유지 및 데이터 전송에 효율적 |
| 확장성 | 다양한 플랫폼 및 장치 지원 |
| 단점 | |
| 복잡성 | 구현 및 관리가 복잡할 수 있음 |
| 보안 | 보안 취약점 발생 가능성 존재 |
| 호환성 | 일부 구형 브라우저에서 지원되지 않을 수 있음 |
2. 요구 사항 및 속성
웹 메시징 API의 핵심 메서드인 `postMessage`를 사용하면, 텍스트 메시지를 한 도메인에서 다른 도메인으로 안전하게 전송할 수 있다. 메시지를 수신하면 `event`가 발생하는데, 이 이벤트는 다음과 같은 속성을 가진다:
- `data`: 수신 메시지의 데이터, 즉 실제 내용이다.
- `origin`: 발신자 문서의 출처이다. 일반적으로 스키마, 호스트 이름 및 포트를 포함한다. 경로나 fragment identifier는 포함하지 않는다.
- `source`: 문서가 온 곳의 `WindowProxy` (출처 창)이다.
`postMessage`는 블로킹 호출이 아니며, 메시지는 비동기적으로 처리된다.[1]
2. 1. 메시지 전송
`postMessage` 메서드를 사용하면, 일반 텍스트 메시지를 한 도메인에서 다른 도메인으로 보낼 수 있다. 예를 들어, 부모 문서에서 IFRAME으로 메시지를 보낼 수 있다. 이를 위해서는 작성자가 먼저 수신 문서의 `Window` 객체를 얻어야 한다. 메시지는 다음과 같은 위치로 전송될 수 있다.- 발신자 문서 창 내의 다른 프레임 또는 iframe
- 발신자 문서가 JavaScript 호출을 통해 명시적으로 여는 창
- 발신자 문서의 부모 창
- 발신자 문서를 연 창
수신되는 메시지 `event`는 다음과 같은 속성을 갖는다.
- `data`: 수신 메시지의 데이터 (실제 내용)
- `origin`: 발신자 문서의 출처 (일반적으로 스키마, 호스트 이름 및 포트를 포함하며, 경로나 fragment identifier는 포함하지 않음)
- `source`: 문서가 온 곳의 `WindowProxy` (출처 창)
`postMessage`는 블로킹 호출이 아니며, 메시지는 비동기적으로 처리된다.[1]
2. 2. 메시지 수신
수신된 메시지는 `message` 이벤트 형태로 전달되며, 속성은 다음과 같다.| 속성 | 설명 |
|---|---|
| `data` | 수신 메시지의 데이터 (실제 내용) |
| `origin` | 발신 문서의 출처 (일반적으로 스키마, 호스트 이름, 포트 포함. 경로나 fragment identifier는 미포함) |
| `source` | 문서가 온 곳의 `WindowProxy` (출처 창) |
웹 메시징 사용 예시를 살펴보자. `example.net`에서 로드된 문서 A가 `example.com`의 `iframe`이나 팝업 창에 로드된 문서 B와 통신하는 상황을 가정한다. 이때 문서 A와 문서 B는 서로 다른 출처(origin)를 가지고 있기 때문에, 웹 메시징을 사용하여 안전하게 통신할 수 있다.
`postMessage`는 블로킹 호출이 아니며, 메시지는 비동기적으로 처리된다.[1]
3. 사용 예시
문서 A는 `postMessage` 메서드를 사용하여 문서 B에게 메시지를 보낸다. 이때 메시지와 함께 대상 문서(문서 B)의 출처를 지정해야 한다. 문서 B는 이벤트 리스너를 통해 메시지를 수신하고, `event.origin` 속성으로 메시지를 보낸 측의 출처를 확인한다. 이 값이 예상된 출처(`example.net`)와 일치하면 메시지를 처리하고, 필요에 따라 `postMessage`를 사용하여 다시 문서 A에게 응답할 수 있다.
이러한 과정을 통해 서로 다른 출처를 가진 문서 간에도 안전하게 데이터를 주고받을 수 있다.
3. 1. 문서 A (example.net)
`example.net`에서 로드된 문서 A가 `example.com`에서 `iframe` 또는 팝업 창으로 로드된 문서 B와 통신하려는 경우를 생각해 보자. 문서 A의 자바스크립트 코드는 다음과 같다.
```javascript
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello B', 'http://example.com/');
```
`contentWindow` 객체의 출처는 `postMessage`에 전달된다. 이 출처는 통신하려는 문서(이 경우 문서 B)의 `origin`과 일치해야 한다. 그렇지 않으면 보안 오류가 발생하고 스크립트가 중지된다.
3. 2. 문서 B (example.com)
문서 B의 자바스크립트 코드는 다음과 같다.
```javascript
function receiver(event) {
if (event.origin == 'http://example.net') {
if (event.data == 'Hello B') {
event.source.postMessage('Hello A, how are you?', event.origin);
}
else {
alert(event.data);
}
}
}
window.addEventListener('message', receiver, false);
```
이벤트 리스너는 문서 A에서 메시지를 수신하도록 설정된다. `origin` 속성을 사용하여 보낸 측의 도메인이 예상되는 도메인(http://example.net)과 일치하는지 확인한다. 그런 다음 문서 B는 메시지를 확인하여 사용자에게 표시하거나 문서 A에 메시지로 응답한다.
4. 보안
웹 메시징을 사용할 때 부실하게 출처를 확인하면 교차 문서 메시징을 사용하는 애플리케이션에 위험을 초래할 수 있다. 외부 도메인의 악성 코드로부터 보호하기 위해, `origin` 속성을 확인하여 메시지를 예상한 도메인에서 수신하는지 확인해야 한다. 수신 데이터의 형식 역시 예상 형식과 일치하는지 확인해야 한다.
5. 지원 현황
웹 메시징 API는 현재 인터넷 익스플로러, 모질라 파이어폭스, 사파리, 구글 크롬, 오페라, 오페라 미니, 오페라 모바일, 안드로이드 웹 브라우저에서 지원된다. 해당 API는 트라이던트, 게코, 웹킷, 프레스토 레이아웃 엔진에서 지원된다.
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com