sourcetip

도메인 간 AJAX 콜

fileupload 2023. 3. 9. 22:15
반응형

도메인 간 AJAX 콜

AJAX 크로스 도메인 정책에 대해 알고 있습니다.따라서 단순히 Ajax HTTP 요청을 통해 "http://www.google.com"에 전화를 걸어 결과를 내 사이트 어딘가에 표시할 수 없습니다.

실제로 동작하는 data type "jsonp"로 시도했지만 구문 오류가 발생함(수신된 데이터가 JSON 형식이 아니기 때문임)

외부 도메인에서 데이터를 수신/표시할 수 있는 다른 방법이 있습니까? iFrames도 동일한 정책을 따르고 있습니다.

AJAX를 사용하여 교차 도메인 데이터를 얻는 유일한 (간단한) 방법은 Andy E가 지적한 대로 서버 측 언어를 프록시로 사용하는 것입니다.다음은 jQuery를 사용하여 이를 구현하는 간단한 예입니다.

jQuery 부분:

$.ajax({
    url: 'proxy.php',
    type: 'POST',
    data: {
        address: 'http://www.google.com'
    },
    success: function(response) {
        // response now contains full HTML of google.com
    }
});

PHP(proxy.php):

echo file_get_contents($_POST['address']);

그렇게 간단하다.스크랩된 데이터로 무엇을 할 수 있는지 알아두기만 하면 됩니다.

데이터를 참조하는 페이지에 스크립트태그를 동적으로 삽입해야 합니다.JSONP를 사용하면 스크립트가 로드되었을 때 콜백 기능을 실행할 수 있습니다.

JSONP의 Wikipedia 페이지에는 스크립트태그라는 간결한 예가 있습니다.

<script type="text/javascript" src="http://domain1.com/getjson?jsonp=parseResponse">
</script>

를 JSON으로 .parseResponse:

parseResponse({"Name": "Cheeso", "Rank": 7})

다름)getjsondomain1.com domain1.com 。

태그를 동적으로 삽입하는 코드는 다음과 같습니다.

var s = document.createElement("script");
s.src = "http://domain1.com/getjson?jsonp=parseResponse";
s.type = "text/javascript";
document.appendChild(s);

YQL을 사용하여 자신의 프록시를 호스트할 필요 없이 요청을 수행할 수 있습니다.명령어를 보다 쉽게 실행할 수 있도록 간단한 기능을 만들었습니다.

function RunYQL(command, callback){
     callback_name = "__YQL_callback_"+(new Date()).getTime();
     window[callback_name] = callback;
     a = document.createElement('script');
     a.src = "http://query.yahooapis.com/v1/public/yql?q="
             +escape(command)+"&format=json&callback="+callback_name;
     a.type = "text/javascript";
     document.getElementsByTagName("head")[0].appendChild(a);
}

jQuery가 있는 경우 $.getJ를 사용할 수 있습니다.대신 SON.

예를 들면 다음과 같습니다.

RunYQL('select * from html where url="http://www.google.com/"',
       function(data){/* actions */}
);

불행히도(혹은 다행스럽게도) 그렇지 않다.교차 도메인 정책이 존재하는 데는 이유가 있기 때문에 쉽게 회피할 수 있다면 보안 대책으로는 그다지 효과적이지 않을 것입니다.JSONP 이외의 유일한 옵션은 자신의 서버를 사용하여 페이지를 프록시하는 것입니다.

iframe을 사용하는 경우 동일한 정책이 적용됩니다.물론 외부 도메인의 데이터를 표시할 수 있지만 조작은 할 수 없습니다.

크로스 도메인 에이잭스 호출에 이 코드를 사용합니다.여기서는 여러 가지 도움이 되었으면 좋겠습니다.프로토타입 라이브러리를 사용하고 있으며 JQuery 또는 Dojo 또는 다른 모든 기능을 사용할 수 있습니다.

스텝 1: 새로운 js 파일을 만들고 이 클래스를 안에 넣습니다.이 클래스를 xss_ajax.js라고 부릅니다.

var WSAjax = Class.create ({
    initialize: function (_url, _callback){
        this.url = _url ;
        this.callback = _callback ;
        this.connect () ;
    },
    connect: function (){
        var script_id = null;
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', this.url);
        script.setAttribute('id', 'xss_ajax_script');

        script_id = document.getElementById('xss_ajax_script');
        if(script_id){
            document.getElementsByTagName('head')[0].removeChild(script_id);
        }

        // Insert <script> into DOM
        document.getElementsByTagName('head')[0].appendChild(script);
    },
    process: function (data){
        this.callback(data) ;
    }

}) ;

이 클래스는 src 속성이 JSON 데이터 공급자를 대상으로 하는 동적 스크립트 요소를 만듭니다(실제로 JSON-P는 원격 서버가 다음 형식으로 데이터를 제공해야 합니다: call_back_function(//json_data_here) :: 따라서 스크립트태그가 생성되면 JSON이 함수로 직접 평가됩니다(콜백 메서드 이름 전달에 대해 설명합니다).o server on step 2)의 주요 개념은 img 요소와 같은 스크립트는 SOP의 제약에 관계되지 않는다는 것입니다.

스텝 2: JSON을 비동기적으로 풀(XHTTPRequest 객체를 사용하는 AJAX가 아닌 AJAj - Asynchronous JAvascript + JSON :-)하는 임의의 html 페이지에서 다음과 같이 합니다.

//load Prototype first
//load the file you've created in step1


var xss_crawler = new WSAjax (
     "http://your_json_data_provider_url?callback=xss_crawler.process"
 ,   function (_data){
            // your json data is _data and do whatever you like with it 
        }) ;

스텝 1의 콜백을 기억하십니까?그래서 서버에 콜백을 전달하면 서버에 의해 그 메서드에 포함된 JSON이 반환됩니다.이 경우 서버는 평가 가능한 Javascript 코드 xss_crawler.process(//the_json_data)를 반환하고 xss_crawler는 WSAjax 클래스의 인스턴스임을 기억하십시오.서버 코드는 사용자에 따라 다르지만(사용자의 것인 경우), 대부분의 Ajax 데이터 공급자는 사용자가 콜백 방식을 파라미터로 지정할 수 있도록 합니다.Ruby on rails에서 방금 했어

render :json=>MyModel.all(:limit=>10), :callback => params[:callback],:content_type => "application/json"

이제 JSON 형식에서만 앱(위젯, 지도 등)에서 다른 도메인의 데이터를 가져올 수 있습니다.

도움이 되셨기를 바랍니다.참아주셔서 감사합니다:-) 평화롭고 코드 포맷이 잘 되지 않습니다.

조사를 실시한 후, 이 문제에 대한 유일한 「해결책」은, 다음과 같이 전화하는 것입니다.

if($.browser.mozilla)
   netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');

사용자에게 웹 사이트를 계속할 수 있는지 묻습니다.확인 후 데이터 유형에 관계없이 모든 Ajax 호출이 실행됩니다.

이것은 Mozilla 브라우저에 유효합니다.IE < 8 에서는, 유저가 같은 방법으로 크로스 도메인 콜을 허가할 필요가 있습니다.또, 브라우저 옵션내에서 일부의 버전을 설정할 필요가 있습니다.

크롬/크롬:지금까지 그 브라우저의 설정 플래그를 찾을 수 없었습니다.

JSONP를 데이터 타입으로 사용하는 것도 좋지만, 제 경우 액세스해야 하는 도메인이 그 포맷의 데이터를 지원하는지 모르겠습니다.

또 다른 방법은 HTML5 post Message를 사용하는 것입니다.이것에 의해서, 크로스 도메인에서도 동작합니다만, 유저를 HTML5 브라우저로 다운시킬 수는 없습니다.

php 스크립트를 사용하여 리모트서버로부터 응답을 취득하는 경우는, 선두에 다음의 행을 추가합니다.

header("Access-Control-Allow-Origin: *");

JSONP가 가장 좋은 선택이라고 생각합니다.구문 오류가 발생하는 이유를 알아봅니다. 수신된 데이터가 JSON이 아닌 것이 확실합니까?그럼 API를 잘못 사용하고 있는 것 같네요.

다른 방법으로는 사용할 수 있지만, 고객님의 경우는 해당되지 않는다고 생각합니다만, src가 호출하고 싶은 도메인에 있는 페이지에 iFrame이 있는 것입니다.콜을 대행하고 JS를 사용하여 iFrame과 페이지 간에 통신합니다.이것은 교차 도메인을 바이패스하지만 호출하는 도메인에 iFrame의 src가 있는 경우에만 해당됩니다.

여기에서는, 화려한 것, 또는 JSON을 사용하지 않고, 간단하게 실시할 수 있는 방법이 있습니다.

먼저 요청을 처리하는 서버 측 스크립트를 만듭니다.http://www.example.com/path/handler.php 같은 것

다음과 같은 파라미터를 사용하여 호출합니다. ... / snap.snap1 = 12345 &nap2 = 67890

수신된 데이터를 처리한 후 내부에서는 다음과 같이 출력됩니다.

document.serverResponse('..all the data, in any format that suits you..');
// Any code could be used instead, because you dont have to encode this data
// All your output will simply be executed as normal javascript

클라이언트측 스크립트에서 다음을 사용합니다.

document.serverResponse = function(param){ console.log(param) }

var script = document.createElement('script');
script.src='http://www.example.com/path/handler.php?param1=12345&param2=67890';
document.head.appendChild(script);

이 접근방식의 유일한 제한은 서버에 송신할 수 있는 파라미터의 최대 길이입니다.단, 언제든지 여러 요청을 보낼 수 있습니다.

CORS 기술을 사용하여 두 서버(Javascript가 실행되고 있는 서버와 외부 API 서버)를 모두 구성할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

p.s.: 답변 https://stackoverflow.com/a/37384641/6505594도 이 접근방식을 제안하고 있으며 외부 API 서버를 다른 모든 사용자에게 개방하고 있습니다.

이틀 동안 같은 문제에 직면했고 해결책을 찾았는데, 많이 검색해 보니 우아하다.계층 웹 사이트에서 Rails 앱으로 데이터 스트림을 가져오는 위젯 클라이언트를 위해 xss Ajax가 필요했습니다.제가 한 방법은 이렇다.

언급URL : https://stackoverflow.com/questions/2558977/ajax-cross-domain-call

반응형