跨域访问的方式与同源策略

发布时间：2020-12-17 08:56:34 所属栏目：安全来源：网络整理

导读：什么是同源策略？理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。何谓同源 : URL 由协议、域名、端口和路径组成，如果两个 URL 的协议、域名和端口相同，则表示他们同源。同源策略 : 浏览器的同源策略，限制

  什么是同源策略？
   理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
   何谓同源:
   URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
   同源策略:
   浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。 （白帽子讲web安全[1]）
   从一个域上加载的脚本不允许访问另外一个域的文档属性。

   举个例子：
   比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

   在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。
   另外同源策略只对网页的HTML文档做了限制，对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。
 跨域:
   域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。
   当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。
    有一种简明的说法来解释广域跨域：跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。
    由于安全原因，跨域访问是被各大浏览器所默认禁止的在广域网环境中，由于浏览器的安全限制，网络连接的跨域访问时不被允许的，XmlHttpRequest也不例外。
    但有时候跨域访问资源是必需的
   URL说明是否允许通信
   http://www.a.com/a.js与http://www.a.com/b.js同一域名下允许
   http://www.a.com/lab/a.js与http://www.a.com/script/b.js同一域名下不同文件夹允许
   http://www.a.com:8000/a.js与http://www.a.com/b.js同一域名，不同端口不允许
   http://www.a.com/a.js与https://www.a.com/b.js同一域名，不同协议不允许
   http://www.a.com/a.js与http://70.32.92.74/b.js域名和域名对应ip不允许
   http://www.a.com/a.js与http://script.a.com/b.js主域相同，子域不同不允许
   http://www.a.com/a.js与http://a.com/b.js同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）
   http://www.cnblogs.com/a.js与http://www.a.com/b.js不同域名不允许

解决跨域访问:
   同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同，
   那么同源策略不阻止将动态脚本元素插入文档中所以脚本元素是可以跨域访问的
   1.jsonp方式
       jsonp的原理
       jsonp原始的实现方式
       ajax中jsonp的实现方式
       angular中jsonp的实现方式
   2.post设置请求头的方式

   jsonp:

      为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，
      该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，
      这样客户端就可以随意定制自己的函数来自动处理返回数据了
         简单的说就是把数据封装成函数返回到本地的javaScript中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <button onclick="getData()">点击获取数据</button>

</body>
<script>

    function getData(){

        var script = document.createElement('script');
        script.type = 'text/javascript';

        var myUrl = 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html';  //网易的接口
        script.src = 'http://localhost:8000/?myUrl=' + myUrl + '&callback=callbackFunc';   //callback后其实是个方法，所以我们写回调方法名字要跟这个一致
        document.getElementsByTagName('head')[0].appendChild(script);

    }

    function callbackFunc(data){
        console.log(data);


        document.getElementById('text').innerHTML = data;

    }

</script>
  <span id="text">

  </span>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
     <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        //jsonp的第二种  ajax方式
        function getDate(){
            var myUrl = 'http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html';
            var url = 'http://localhost:8000/?myUrl=' + myUrl; //  //ajax会给我们生成那个callback  这里不用添加
            var queryTradeObjOneParam = {
                "action": "","time": "1","rannum": "","signature": "","param": [
                    {
                        "page": "1","rows": "3"  }
                ]
            };
            $.ajax({
                /***
                 * 请求路径
                 * 请求方法
                 * 传输协议
                 * 成功、失败回调函数
                 */
                url:'http://IP:端口/v1/action.json',type:'post',dataType:'json',data: JSON.stringify(queryTradeObjOneParam),contentType:'text/plain;charset=UTF-8',success:function(result){  //接口返回的数据对象
//                     console.log(JSON.parse(result));

                    console.log(result.param[0].enterprises);
                },error:function(e){
                     console.log(e);
                }
            });
            
        }
    </script>

</head>
<body>
    <button onclick="getDate()">获取数据</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">

    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script type="text/javascript">
        /*
         response.setHeader("Access-Control-Allow-Origin","*");
         response.setHeader("Access-Control-Allow-Methods","POST");
         response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");

        */

        var app = angular.module('myApp',[]);
        app.controller('myControl',['$scope','$http',function($scope,$http){

            var queryTradeObjOneParam = {
                "action": "22","time": "1","rannum": "222222","signature": "22","param": [
                    {

                        "page": "1","rows": "3"  }
                ]
            };

            $scope.getData = function(){
                var myUrl = 'http://IP:端口/v1/action.json';

                $http({
                        method:'post',url:myUrl,data:queryTradeObjOneParam,header:{
                            "Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"post","Access-Control-Allow-Headers":"x-requested-with,content-type",'content-type':'application/x-www-form-urlencoded'  }
                }).then(function success(response) {
                    console.log(response.status);
                },function error(response) {
                    // 请求失败执行代码
                });
            }

        }]);
    </script>
</head>
<body ng-app="myApp" ng-controller="myControl">

 <button ng-click="getData()">点击 </button>

</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!