Jsonp 크로스 도메인 원칙에 대한 자세한 설명과 간단한 적용-JS 튜토리얼-php.cn

Jsonp 크로스 도메인 원칙에 대한 자세한 설명과 간단한 적용

藏色散人

풀어 주다： 2020-01-30 19:08:46

앞으로

3331명이 탐색했습니다.

브라우저의 동일 출처 정책:

동일 출처 정책은 문서나 스크립트가 리소스와 상호 작용하는 방식을 제한하는 Netscape에서 제안한 잘 알려진 보안 정책입니다. 다른 소스에서. 이는 잠재적인 악성 파일을 격리하기 위한 중요한 보안 메커니즘입니다.

동일한 출처의 정의: 프로토콜, 포트(지정된 경우) 및 호스트가 동일한 경우 두 페이지의 출처가 동일합니다. 이를 "프로토콜/호스트/포트 튜플" 또는 간단히 "튜플"이라고 부를 수도 있습니다. ("튜플", "요소"는 (1, 2)와 같이 함께 그룹화되어 전체를 형성하는 일부 항목을 나타냅니다. (1, 2, 3)을 3진이라고 합니다)

프로토콜, 포트, 호스트(도메인 이름이나 IP 주소, IP 주소라면 루트 도메인 이름으로 간주), 서브 도메인 이름, 그 중 하나가 다르면 요청에 도메인 간 문제가 발생하게 됩니다.

다음 표는 http://store.company.com/dir/page.html과 관련된 상동성 탐지의 예를 제공합니다.

Jsonp 크로스 도메인 원칙에 대한 자세한 설명과 간단한 적용

동일 출처 정책 제한 돌파:

1. 스크립트 태그의 src/img 태그의 src 또는 링크 태그의 href는 동일 출처 정책에 의해 제한되지 않습니다.

2. 정적 src 또는 href 링크 리소스는 본질적으로 가져오기 요청입니다.

JSONP란 무엇인가요?

Json(JavaScript Object Notation)은 경량 데이터 교환 형식입니다.

JSONP는 JSON with Padding의 약어입니다. 서버 측에서 스크립트 태그를 통합하고 이를 클라이언트에 반환하여 자바스크립트 콜백 형태로 도메인 간 액세스를 가능하게 하는 비공식 전송 프로토콜입니다.

JSONP의 간단한 구현:

html 코드: (http://zrcloud.com/test.html에서 로컬로 실행)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jsonp简单实例</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h3>JSONP简单实例</h3>
<script type="text/javascript">
  $(function() {
    $.ajax({
      type:&#39;get&#39;,
      async:false,//同步请求
      url:&#39;http://mqcms.com/test.php&#39;,
      dataType:&#39;jsonp&#39;,
      jsonp:&#39;callback&#39;,//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
      jsonpCallback:&#39;test&#39;,//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
      success:function(data){
          console.log(data);
      }
    })
  })
</script>
</body>
</html>

로그인 후 복사

PHP 서버 측 코드:

<?php
header(&#39;Content-Type:application/json; charset=utf-8&#39;);
$callback =isset($_GET[&#39;callback&#39;]) ? trim($_GET[&#39;callback&#39;]) : &#39;&#39;;
$arr=[&#39;name&#39;=>&#39;test&#39;,&#39;age&#39;=>18,&#39;sex&#39;=>1];
echo $callback.&#39;(&#39;.json_encode($arr).&#39;)&#39;;
?>

로그인 후 복사

실행 결과 :

Jsonp 크로스 도메인 원칙에 대한 자세한 설명과 간단한 적용