Firefox 3에서는 W3C 접근 제어 초안을 구현하였으며, 이는 다른 웹 사이트로 XMLHttpRequests를 수행할 수 있는 기능을 제공합니다.
개요
W3C Access Control 구조는 브라우저 기반의 요청(XMLHttpRequest)을 통해 문서를 요청되는 경우 누가 할 수 있는지 또는 없는지에 대한 제어를 가능하게 해 줍니다.
Additionally, this access control scheme gives applications the ability to allow for cross-site requests. Thus one could, theoretically, request a document from google.com, via an XMLHttpRequest in a page on yoursite.com (once the access control points were put in place). This level of control gives content creators greater amounts of flexibility when it comes to allowing their users to build mashups and applications using their information.
사용법
Firefox 3에서 두 가지 방법으로 W3C Access Controls을 사용할 수 있습니다. 첫 번째는 HTTP 응답 헤더에 새로운 Access-Control 헤더(모든 유형의 리소스에 대해서 사용할 수 있으며 여러분이 사용하는 웹서버를 직접 관리할 수 있을 때 가능)를 추가하는 방법이고, 두 번째는 XML 문서인 경우에만 사용 가능한 것으로 문서에 접근 제어 처리 지시자(access control processing instruction)를 추가하는 방법입니다.
Access-Control 헤더
이 방법은 크로스 사이트 XMLHttpRequest를 허용케 하는 가장 유연한 수단입니다. Specifically, if you provide an additional Access-Control header in your request response, like the following, which will grant access to any web application on mozilla.org.
Access-Control: allow <mozilla.org>
Access-Control 헤더는 요청의 방법과 원 위치(origin)를 기반으로 리소스 접근에 대한 허용 또는 차단을 제어할 수 있게 해 줍니다.
다음은 유효한 Acess-Control 헤더들의 예제입니다.
// 모든 사람이 제한 없이 리소스에 접근하는 것을 허용합니다. Access-Control: allow <*> // 모든 사람이 예외 없이 대상 리소스에 접근하는 것을 거부합니다. Access-Control: deny <*> // 'mozilla.org'에서 호스트되는 사이트만이 이 리소스에 접근할 수 있습니다. // (서브 도메인을 포함합니다.) Access-Control: allow <mozilla.org> // mozilla.org의 developer.mozilla.org를 제외한 모든 서브 도메인에서 해당 리소스에 접근할 수 있습니다. Access-Control: allow <mozilla.org> exclude <developer.mozilla.org> // GET, POST 요청으로 접근하는 developer.mozilla.org 도메인의 80 포트에서만 리소스에 접근할 수 있습니다. Access-Control: allow <developer.mozilla.org:80> method GET, POST
W3C Access Control working draft에서 더 많은 샘플 패턴의 예제를 찾을 수 있습니다.
예제
다음 예제는 별도의 웹사이트에서 HTML 파일을 요청하는 것입니다. 해당 HTML 파일은 별도의 Access-Control 헤더가 포함되도록 PHP 스크립트로 생성됩니다. 여러분의 웹 서버에 header.html을 올려두더라도 모든 사이트가 허가되도록 되어 있으므로 여전히 요청이 동작하는 것을 확인할 수 있을 것입니다.
<html>
<head>
<script>
window.onload = function(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://dev.jquery.com/~john/xdomain/test.php", true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
document.body.innerHTML = "My Name is: " + xhr.responseText;
} else {
document.body.innerHTML = "ERROR";
}
}
};
xhr.send(null);
};
</script>
</head>
<body>
Loading...
</body>
</html>
Change this to allow <yourdomain.com> to make it accessible to your site, or allow <*> for ANYONE to be able to access it.
<?php header('Access-Control: allow <ejohn.org>'); ?>
<b>John Resig</b>
XML 처리 지시자
XML에는 XML 프로세서가 특별한 처리를 할 수 있도록 별도의 명령을 포함할 수 있는 기능을 제공합니다. Access Control 초안에서는 크로스 사이트의 방법으로 XML 문서가 원격에서 접근이 가능하도록 하는 특별한 명령을 제공하고 있습니다.
예를 들어 다음의 acess-control 처리 지시자는 mozilla.org에 있는 모든 사이트가 해당 처리 지시자를 포함하는 XML 문서에 접근할 수 있게 해 줍니다.
<?access-control allow="mozilla.org"?>
아래는 XML 문서로의 접근 권한을 제어하는 access-control 처리 지시자를 사용하는 예제들입니다.
// 모든 사람이 제한 없이 리소스에 접근하는 것을 허용합니다. <?access-control allow="*"?> // 모든 사람이 예외 없이 대상 리소스에 접근하는 것을 거부합니다. <?access-control deny="*"?> // 'mozilla.org'에서 호스트되는 사이트만이 이 리소스에 접근할 수 있습니다. // (서브 도메인을 포함합니다.) <?access-control deny="mozilla.org"?> // developer.mozilla.org를 제외한 mozilla.org 및 이의 모든 서브 도메인에서 해당 리소스에 접근할 수 있습니다. <?access-control allow="mozilla.org" exclude="developer.mozilla.org"?> // developer.mozilla.org 도메인의 80 포트에서 GET, POST 요청인 경우만 해당 리소스에 접근할 수 있습니다. <?access-control allow="developer.mozilla.org" method="GET POST"?>
W3C Access Control working draft에서 더 많은 샘플 패턴의 예제를 찾을 수 있습니다.
예제
다음 예제는 별도의 웹사이트에서 XML 파일을 요청하는 것입니다. 해당 XML 파일에는 어떤 웹사이트에서도 접근이 가능하다는 것을 알려주는 접근 제어(access-control) 처리 지시자를 포함하고 있습니다. 여러분의 웹 서버에 ac.html 파일을 올려두더라도 모든 사이트가 허가되도록 되어 있으므로 여전히 요청이 동작하는 것을 확인할 수 있을 것입니다.
<html>
<head>
<script>
window.onload = function(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://dev.jquery.com/~john/xdomain/test.xml", true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
document.body.innerHTML = "My Name is: " +
xhr.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
} else {
document.body.innerHTML = "ERROR";
}
}
};
xhr.send(null);
};
</script>
</head>
<body>
Loading...
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
Change this to allow="yourdomain.com" to make it accessible to your site, or allow="*" for ANYONE to be able to access it.
<?access-control allow="ejohn.org"?>
<simple><name>John Resig</name></simple>