JSONP 요청이 작동하는 방식에 대해 혼동됨

JSONP 요청이 작동하는 방식에 대해 혼동됨

저는 jsonp 요청이 어떻게 작동하는지에 대한 세부 사항을 이해하는 데 어려움을 겪고 있습니다.저는 jsonp의 wiki를 포함한 여러 소스를 읽었지만, jsonp 호출이 이루어질 때 콜백이 실제로 서버에서 반환되는 기능을 어떻게 보유하는지 아직도 매우 혼란스럽습니다.예를 들어 Wiki에서 요청의 원본은 다음과 같이 설정됩니다.

src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"

jsonp = parseResponse는 실제로 무엇을 수행/실행합니까?그리고 나서 그들은 페이로드가 다음과 같이 말합니다.

parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});

이것은 어떻게 작동합니까?전체 콜백 기능에 대해 혼동이 있습니다.함수 이름 parseResponse는 서버로 전달되고 반환된 데이터는 어떻게 해서든지 이 함수에 대한 매개 변수가 됩니까?누가 jsonp 요청에서 데이터가 어떻게 검색/사용되는지 정확하게 설명해 주시겠습니까?

콜백은 사용자가 자신의 코드에 정의한 기능입니다.jsonp 서버는 지정된 콜백 함수와 동일한 이름의 함수 호출로 응답을 감쌀 것입니다.

어떻게 되는 거지?

코드가 JSONP 요청을 생성하고, 이로 인해 새 코드가 생성됩니다.<script>다음과 같은 블록:

<script src="http://server2.example.com/RetrieveUser?UserId=1234&jsonp=parseResponse"></script>

브라우저에서 새 스크립트 태그를 실행하여 JSONP 서버에 요청합니다.으로 응답합니다.

parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});

이 요청은 스크립트 태그에서 왔기 때문에 문자 그대로 배치한 것과 거의 동일합니다.

<script>
    parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});
</script>

당신의 페이지로.

이제 이 새 스크립트가 원격 서버에서 로드되었으니 이제 실행되고 함수 호출만 하면 됩니다.parseResponse()함수 호출의 유일한 매개 변수로 JSON 데이터를 전달합니다.

코드의 다른 부분에는 다음과 같은 정보가 있습니다.

function parseResponse(data) {
     alert(data.Name); // outputs 'Foo'
}

기본적으로 JSONP는 타사 서버가 사용자의 페이지에 직접 함수 호출을 삽입하도록 함으로써 브라우저의 동일한 원본 스크립트 보안 정책을 우회하는 방법입니다.이는 의도적으로 매우 안전하지 않습니다.당신은 원격 서비스가 명예롭고 악의적인 의도가 없다고 믿고 있습니다.불량 서비스가 귀하의 은행/페이스북/자격 증명을 도용하는 JS 코드를 반환하는 것을 막을 수 있는 것은 없습니다. 예를 들어, JSONP 응답이 있었을 수 있습니다.

 internalUseOnlyFunction('deleteHarddrive');

parseResponse(...) 대신 사용합니다.원격 사이트가 코드의 구조를 알고 있는 경우 해당 코드로 임의 작업을 수행할 수 있습니다. 이는 해당 사이트가 원하는 모든 작업을 수행할 수 있도록 현관문을 활짝 열었기 때문입니다.

편집: Jon이 말했듯이, 여기에 더 나은 설명이 있습니다.

JSONP는 스크립트 태그를 사용하여 오리진 간 요청을 만듭니다.스크립트 태그는 스크립트를 포함하는 데 사용되므로 서버는 유효한 JavaScript를 반환해야 합니다.자바스크립트를 클라이언트에게 전달하는 방법은 함수 호출을 통해서입니다.스크립트가 호출할 함수를 서버에 알려준 다음 로컬로 해당 함수를 작성합니다.스크립트 로드가 완료되면 데이터를 매개 변수로 하여 함수가 호출됩니다.

따라서 언급한 URL에서 JSONP 요청을 수행한 경우 언급한 페이로드가 반환되면 다음을 수행하여 데이터에 액세스할 수 있습니다.

function parseResponse(data) {
    console.log("JSONP request complete", data);
}

parseResponse 함수 이름이 서버로 전달되고 반환된 데이터가 이 함수에 대한 매개 변수가 됩니다.

방금 설명하신 것 같은데요jsonp=parseResponse이 앱이 콜백 함수를 설정하는 방법입니다. 그래서 그것은 당신의 json 데이터가 들어 있는 함수를 반환합니다.

parseResponse({"Name": "Foo", "Id" : 1234, "Rank": 7});

로드될 때 호출되며 다음과 같은 JS의 함수에 의해 처리됩니다.

function parseResponse(data){
    console.log(data);
}

언급URL : https://stackoverflow.com/questions/10193085/confused-on-how-a-jsonp-request-works