Javascript 크로스 도메인 지식에 대한 자세한 소개
- 高洛峰원래의
- 2016-12-08 13:58:351340검색
JS 크로스 도메인 지식 요약:
"크로스 도메인"이라는 단어가 자주 등장하기 전에는 실제로 이 단어를 자주 사용했습니다. 예를 들어, 웹사이트 A의 img에서 src는 웹사이트 B의 특정 이미지 주소를 가리킵니다. 이는 (핫링크 방지 기술에 관계없이) 일반적인 상황에서 정상적으로 표시될 수 있다는 점에는 의심의 여지가 없습니다. 스크립트 태그의 일부는 다른 웹사이트의 스크립트 리소스를 가리킬 수 있습니다(어떤 경우에는 다른 웹사이트의 로드를 최대한 활용하고 자체 서버의 동시성을 줄이기 위해 권장되기도 합니다). 그러나 js를 사용하여 ajax와 같은 다른 웹사이트에서 데이터를 적극적으로 요청하면 일반적으로 크로스 도메인이라고 부르는 크로스 도메인 문제에 직면하게 됩니다. 보안상의 이유로 주요 브라우저에서는 기본적으로 도메인 간 액세스가 금지되어 있습니다. 여기에는 동일 출처 정책의 개념이 포함됩니다. 동일 출처 정책은 한 도메인에서 로드된 스크립트가 다른 도메인의 문서 속성을 얻거나 조작하는 것을 방지합니다. 즉, 요청한 URL의 도메인은 현재 웹페이지의 도메인과 동일해야 합니다. 이는 브라우저가 서로 다른 소스의 콘텐츠를 격리하여 소스 간 작업을 방지한다는 의미입니다.
블로거는 도메인 간 문제로 인해 발생하는 구체적인 보안 문제를 자세히 다루지 않았으므로 모든 사람이 스스로 결정을 내릴 수 있습니다.
그러나 많은 경우, 특히 오늘날 인터넷이 계속해서 발전함에 따라 도메인 간 액세스 방법이 표준화되기 전에(클라이언트 측 크로스) 다른 파트너나 데이터 제공자에게 프런트엔드 인터페이스를 요청해야 합니다. -domain 액세스에 대한 필요성이 w3c의 관심을 끌었던 것 같습니다. 정보에 따르면 html5 WebSocket 표준은 도메인 간 데이터 교환을 지원하며 향후 도메인 간 데이터 교환을 위한 선택적 솔루션이 되어야 합니다. 모직물을 우회하는 방법은 무엇입니까? 많은 답변이 있지만(모두 번거롭기는 하지만) 가장 일반적으로 사용되는 것은 소위 JSONP 크로스 도메인입니다.
JSONP 원칙
JSONP의 가장 기본적인 원칙은 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 동적으로 추가하는 것이며, 스크립트 태그의 src 속성에는 도메인 간 제한이 없습니다. 이러한 방식으로 이 크로스 도메인 방법은 ajax XmlHttpRequest 프로토콜과 아무 관련이 없습니다.
JSONP는 패딩이 포함된 JSON입니다. 동일 출처 정책의 제한으로 인해 XmlHttpRequest는 현재 소스(도메인 이름, 프로토콜, 포트)에서만 리소스를 요청할 수 있습니다. 도메인 간 요청을 하려면 HTML 스크립트 태그를 사용하여 도메인 간 요청을 하고 응답에서 실행할 스크립트 코드를 반환하면 됩니다. 이 도메인 간 통신 방법을 JSONP라고 합니다.
간단한 예를 들어보겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>
원리와 프로세스를 간략하게 설명합니다. 먼저 클라이언트에 콜백을 등록한 다음 콜백을 넣습니다. 이름이 서버에 전달됩니다(여기서 클라이언트와 서버는 키를 jsonp의 쿼리 문자열 값으로 전달하는 데 동의합니다). 이 시점에서 서버는 먼저 json 데이터를 생성합니다. 그런 다음 자바스크립트 구문을 사용하여 함수를 생성하고 함수 이름은 전달된 매개변수 jsonp입니다. 마지막으로 json 데이터는 매개변수로 함수에 직접 배치되므로 js 구문 문서가 생성되어 클라이언트에 반환됩니다. 클라이언트 브라우저는 스크립트 태그를 파싱하고 반환된 자바스크립트 문서를 실행합니다. 즉, 미리 정의된 콜백 함수를 실행합니다.
위의 간략한 설명에서 추론할 수 있습니다. js 코드 조각을 함수 형태로 반환하는 것 외에도 서버는 사양을 충족하는 실행 가능한 모든 js 조각을 자연스럽게 반환할 수 있습니다.
JSONP의 단점은 GET 요청만 지원하고 POST와 같은 다른 유형의 HTTP 요청은 지원하지 않으며 도메인 간 HTTP 요청만 지원하고 서로 다른 두 페이지 간에 진행하는 방법에 대한 문제를 해결할 수 없다는 것입니다. 도메인.JavaScript 호출 문제. (아래도 마찬가지)
jQuery의 Jsonp
앞서 언급했듯이 jsonp는 ajax 요청이 아니지만 jQuery는 여전히 도메인 간 요청에 대해 jQuery.ajax와 일치하는 메서드를 제공합니다.
$.ajax({
url: 'http://crossdomain.com/jsonServerResponse',
type: 'GET',
dataType: 'jsonp',
jsonp: "callback",
jsonpCallback: 'functionName',
success: function (data, textStatus, jqXHR) { }
//……
});
위에 표시된 대로 dataType은 jsonp로 설정되어 이것이 도메인 간 요청임을 나타냅니다. jsonp는 전송 함수 이름의 쿼리 문자열 키로 설정됩니다. jsonpCallback은 js 함수 이름입니다. jsonpCallback이 설정되지 않은 경우 jQuery는 자동으로 임의의 함수 이름을 생성합니다(창 개체에 전역 함수를 로드하면 코드가 삽입될 때 함수가 실행되고 위 코드에서는 자동으로 생성된 함수가 성공 함수를 콜백할 것으로 유추됩니다. (jsonpCallback에 수동으로 값을 할당할 때 성공 함수가 콜백할지, 아니면 jQuery가 미리 정의된 함수를 찾아서 찾을 수 없으면 오류를 보고할지 궁금합니다. 블로거가 게으르니 나중에 다시 시도해 주세요.) 물론 jQuery는 간단한 버전인 $.getJSON을 여기서 설명하지 않습니다.
주목해야 할 것은 성공 함수의 jqXHR 매개변수입니다. ajax 요청에서는 XMLHTTPRequest 객체(상속되거나 캡슐화됨)로 간주될 수도 있는 정통 jqXHR 객체입니다. jsonp 요청의 경우 XMLHTTPRequest에서 가장 유용한 정보를 제공하는 것이 거의 불가능합니다. XMLHTTPRequest의 요청 상태 정보가 부족하여 오류, 완료 등과 같은 대부분의 콜백 기능을 트리거할 수 없습니다. (jQuery1.9.0) , 그러나 콜백의 성공 함수에 의해 추론될 수 있습니다. 이는 스크립트 태그의 로드 이벤트에 의해 트리거되어야 하며 이는 XMLHTTPRequest의 상태에 의존하는 ajax의 메커니즘과 완전히 다릅니다. 테스트 결과 jQuery에서 탄생한 zepto(v1.1.3)는 jsonp 요청에 오류가 있습니다. 예를 들어 js 문서를 로드할 때 헤더가 401 오류를 반환하면 오류 함수가 실행되지만 이 함수의 jqXHR 매개변수도 실제 jqXHR 유형이 아니므로 이를 통해 응답 헤더 정보를 얻을 수도 없습니다. 이 경우 특정 링크에서 문제가 발생했다는 메시지만 표시되지만 알 수는 없습니다. 구체적인 오류 정보. 응답 헤더에 유용한 정보가 전달되는 시나리오와 유사하게, 블로거는 jsonp 사용을 권장하지 않습니다. jsonp 사용을 위한 전제 조건은 다음과 같습니다. 네트워크 이상과 같은 비비즈니스 예외 외에 모든 비즈니스 예외(요약하면, 서버에서 수신된 요청) 반환 응답 기간 동안 발생한 모든 예외)는 클라이언트 콜백 분석을 용이하게 하기 위해 요청 결과 형식으로 클라이언트에 직접 반환되어야 합니다.