AIR에서의 HTML

Adobe AIR 1.0 이상

HTML 프레임 및 iframe 요소
HTML 요소 이벤트 핸들러
HTML contentEditable 특성
data: URL

AIR 및 WebKit에서는 다음을 포함한 몇 가지의 비 표준 HTML 요소 및 특성을 정의합니다.

HTML 프레임 및 iframe 요소

AIR에서는 응용 프로그램 샌드박스에서 내용의 프레임 및 iframe 요소에 다음과 같은 새 특성을 추가합니다.

sandboxRoot 특성

sandboxRoot 특성은 프레임 src 특성에서 지정한 파일에 대해 원본의 비 응용 프로그램 대체 도메인을 지정합니다. 파일은 지정된 도메인에 해당하는 비 응용 프로그램 샌드박스로 로드됩니다. 파일의 내용과 지정된 도메인에서 로드되는 내용은 서로 크로스 스크립팅할 수 있습니다.

중요: sandboxRoot 값을 도메인의 기준 URL로 설정하는 경우 해당 도메인의 내용에 대한 모든 요청은 해당 요청이 페이지 탐색, XMLHttpRequest 또는 내용을 로드하는 다른 방법 중 무엇을 통해 발생했는지에 관계없이 원격 서버가 아닌 응용 프로그램 디렉토리에서 로드됩니다.

documentRoot 특성

documentRoot 특성은 sandboxRoot에서 지정한 위치 내의 파일로 확인되는 URL을 로드할 로컬 디렉토리를 지정합니다.

프레임 src 특성 또는 프레임에 로드된 내용에서 URL을 확인할 때 sandboxRoot에 지정한 값과 일치하는 URL 부분이 documentRoot에 지정한 값으로 대체됩니다. 따라서 다음 프레임 태그에서

<iframe        src="http://www.example.com/air/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="http://www.example.com/air/"/>

child.html은 응용 프로그램 설치 폴더의 sandbox 하위 디렉토리에서 로드됩니다. child.html의 상대 URL은 sandbox 디렉토리를 기준으로 확인됩니다. www.example.com/air의 원격 서버에 있는 파일은 프레임에서 액세스할 수 없습니다. AIR이 이러한 파일을 app:/sandbox/ 디렉토리에서 로드하려고 하기 때문입니다.

allowCrossDomainXHR 특성

프레임의 내용에서 원격 도메인에 대한 XMLHttpRequests를 만들 수 있게 하려면 여는 프레임 태그에 allowCrossDomainXHR="allowCrossDomainXHR"을 포함합니다. 기본적으로 비 응용 프로그램 내용은 자신의 원래 도메인에 대해서만 이러한 요청을 할 수 있습니다. 크로스 도메인 XHR을 허용할 경우 심각한 보안 영향이 발생할 수 있습니다. 페이지의 코드에서 도메인과 데이터를 교환할 수 있으므로, 악의적인 내용이 페이지에 삽입되는 경우 현재 샌드박스의 코드에 액세스할 수 있는 데이터가 손상될 수 있습니다. 사용자가 만들고 제어하는 페이지에 대해서만, 그리고 크로스 도메인 데이터 로딩이 정말로 필요한 경우에만 크로스 도메인 XHR을 사용합니다. 또한 페이지에서 로드한 모든 외부 데이터의 유효성을 세밀히 검사하여 코드 삽입이나 다른 형태의 공격을 예방합니다.

중요: allowCrossDomainXHR 특성이 프레임 또는 iframe 요소에 포함되어 있는 경우 할당된 값이 "0"이거나 문자 "f" 또는 "n"으로 시작하지 않는 한 크로스 도메인 XHR이 사용됩니다. 예를 들어 allowCrossDomainXHR을 "deny"로 설정해도 크로스 도메인 XHR이 계속 사용됩니다. 크로스 도메인 요청을 사용하지 않으려면 이 특성을 완전히 요소 선언 밖에 둡니다.

ondominitialize 특성

프레임의 dominitialize 이벤트에 대한 이벤트 핸들러를 지정합니다. 이 이벤트는 프레임의 Window 및 Document 객체가 만들어진 후 스크립트가 파싱되거나 문서 요소가 만들어지기 전에 발생하는 AIR 관련 이벤트입니다.

dominitialize 핸들러에서 자식 문서에 추가한 객체, 변수 및 함수를 자식 페이지의 스크립트에서 참조할 수 있도록 프레임에서는 dominitialize 이벤트를 로드 시퀀스에서 초기에 전달합니다. 부모 페이지가 자식과 동일한 샌드박스에 있어야만 자식 문서의 객체를 직접 추가하거나 액세스할 수 있습니다. 그러나 응용 프로그램 샌드박스의 부모가 샌드박스 브리지를 설정하여 비 응용 프로그램 샌드박스의 내용과 통신할 수 있습니다.

다음 예에서는 AIR에서의 iframe 태그 사용을 보여 줍니다.

child.html을 원격 서버의 실제 도메인에 매핑하지 않고 원격 샌드박스에 놓습니다.

<iframe        src="http://localhost/air/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="http://localhost/air/"/>

child.html을 원격 샌드박스에 놓아 www.example.com에 대한 XMLHttpRequests만 허용합니다.

<iframe        src="http://www.example.com/air/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="http://www.example.com/air/"/>

child.html을 원격 샌드박스에 놓아 모든 원격 도메인에 대한 XMLHttpRequests를 허용합니다.

<iframe        src="http://www.example.com/air/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="http://www.example.com/air/" 
            allowCrossDomainXHR="allowCrossDomainXHR"/>

child.html을 local-with-file-system 샌드박스에 놓습니다.

<iframe             src="file:///templates/child.html"  
            documentRoot="app:/sandbox/" 
            sandboxRoot="app-storage:/templates/"/>

dominitialize 이벤트를 통해 샌드박스 브리지를 설정하여 child.html을 원격 샌드박스에 놓습니다.

<html> 
<head> 
<script> 
var bridgeInterface = {}; 
bridgeInterface.testProperty = "Bridge engaged"; 
function engageBridge(){ 
    document.getElementById("sandbox").parentSandboxBridge = bridgeInterface; 
} 
</script> 
</head> 
<body> 
<iframe id="sandbox" 
            src="http://www.example.com/air/child.html"  
            documentRoot="app:/" 
            sandboxRoot="http://www.example.com/air/" 
            ondominitialize="engageBridge()"/> 
</body> 
</html>

다음 child.html 문서에서는 자식 내용이 부모 샌드박스 브리지에 액세스하는 방법을 보여 줍니다.

<html> 
    <head> 
        <script> 
            document.write(window.parentSandboxBridge.testProperty); 
        </script>   
    </head>   
    <body></body> 
</html>

자세한 내용은 서로 다른 보안 샌드박스의 내용 크로스 스크립팅 및 Adobe AIR의 HTML 보안을 참조하십시오.

HTML 요소 이벤트 핸들러

AIR 및 Webkit의 DOM 객체는 표준 DOM 이벤트 모델에는 없는 몇 가지 이벤트를 전달합니다. 다음 표에서는 이러한 이벤트의 핸들러를 지정하는 데 사용할 수 있는 관련 이벤트 특성을 나열합니다.

콜백 특성 이름	설명
oncontextmenu	선택한 텍스트에서 명령 클릭이나 마우스 오른쪽 버튼 클릭과 같은 동작을 통해 컨텍스트 메뉴를 호출할 때 호출됩니다.
oncopy	요소에서 선택 내용을 복사할 때 호출됩니다.
oncut	요소에서 선택 내용을 잘라낼 때 호출됩니다.
ondominitialize	프레임 또는 iframe에 로드된 문서의 DOM을 만들 때 DOM 요소가 만들어지거나 스크립트가 파싱되기 전에 호출됩니다.
ondrag	요소를 드래그할 때 호출됩니다.
ondragend	드래그하고 마우스 버튼을 놓을 때 호출됩니다.
ondragenter	드래그 동작이 요소 경계로 들어갈 때 호출됩니다.
ondragleave	드래그 동작이 요소 경계 밖으로 나갈 때 호출됩니다.
ondragover	드래그 동작이 요소 경계 내에 있을 때 연속적으로 호출됩니다.
ondragstart	드래그 동작이 시작될 때 호출됩니다.
ondrop	드래그 동작이 요소 위에 있는 동안 마우스 버튼을 놓을 때 호출됩니다.
onerror	요소를 로드하는 동안 오류가 발생하면 호출됩니다.
oninput	양식 요소에 텍스트를 입력할 때 호출됩니다.
onpaste	요소에 항목을 붙여넣을 때 호출됩니다.
onscroll	스크롤할 수 있는 요소의 내용을 스크롤할 때 호출됩니다.
onselectstart	선택이 시작될 때 호출됩니다.

HTML contentEditable 특성

HTML 요소에 contentEditable 특성을 추가하여 사용자가 요소의 내용을 편집할 수 있도록 할 수 있습니다. 예를 들어 다음 예제 HTML 코드에서는 첫 번째 p 요소를 제외하고 전체 문서를 편집할 수 있도록 설정합니다.

<html> 
<head/> 
<body contentEditable="true"> 
    <h1>de Finibus Bonorum et Malorum</h1> 
    <p contentEditable="false">Sed ut perspiciatis unde omnis iste natus error.</p> 
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p> 
</body> 
</html>

참고: document.designMode 속성을 on으로 설정하면 개별 요소의 contentEditable 설정에 관계없이 문서의 모든 요소를 편집할 수 있게 됩니다. 그러나 designMode를 off로 설정해도 contentEditable이 true인 요소를 편집할 수 없게 되지는 않습니다. 자세한 내용은 Document.designMode 속성을 참조하십시오.

data: URL

AIR는 다음 요소에 대해 data: URL을 지원합니다.

img
input type="image"
이미지(예: 배경 이미지)를 허용하는 CSS 규칙

data: URL을 사용하면 이진 이미지 데이터를 base64 인코딩 문자열로 CSS 또는 HTML 문서에 직접 삽입할 수 있습니다. 다음 예에서는 data: URL을 반복되는 배경으로 사용합니다.

<html> 
<head> 
<style> 
body { 
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF%2F6cA%2F%2F%2F%2Fgxp3lwAAAAJ0Uk5T%2FwDltzBKAAABF0lEQVR42uzZQQ7CMAxE0e%2F7X5oNCyRocWzPiJbMBZ6qpIljE%2BnwklgKG7kwUjc2IkIaxkY0CPdEsCCasws6ShXBgmBBmEagpXQQLAgWBAuSY2gaKaWPYEGwIEwg0FRmECwIFoQeQjJlhJWUEFazjFDJCkI5WYRWMgjtfEGYyQnCXD4jTCdm1zmngFpBFznwVNi5RPSbwbWnpYr%2BBHi%2FtCTfgPLEPL7jBctAKBRptXJ8M%2BprIuZKu%2BUKcg4YK1PLz7kx4bSqHyPaT4d%2B28OCJJiRBo4FCQsSA0bziT3XubMgYUG6fc5fatmGBQkL0hoJ1IaZMiQsSFiQ8vRscTjlQOI2iHZwtpHuf%2BJAYiOiJSkj8Z%2FIQ4ABANvXGLd3%2BZMrAAAAAElFTkSuQmCC'); 
background-repeat:repeat; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

data: URL을 사용할 때는 추가 공백에 유의해야 합니다. 즉, 데이터 문자열을 분리되지 않은 단일 행으로 입력해야 합니다. 그렇지 않으면 행 분리가 데이터의 일부로 간주되어 이미지를 디코딩할 수 없게 됩니다.