javascript 之 跨域技术 CORS

原创 2013年12月03日 21:19:41

图像Ping

只要请求完成,就能得到通知,发送一个name参数,常用于跟踪用户点击页面或动态广告曝光次数.

缺点:

1.只能发送GET 请求

2.无法访问服务器的响应文本

    <script>
        var img = new Image();
        img.onload = img.onerror = function(){
            alert("Done!");
        };
        img.src = "http://www.example.com/test?name=Nicholas"; 

    </script>

JSONP

JSONP是通过动态<script>元素来使用,可以为其src属性指定一个跨域URL

    <script>
    
        function handleResponse(response){
            alert("You're at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);
        }
    
        var script = document.createElement("script");
        script.src = "http://freegeoip.net/json/?callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);
    </script>

优点:可以直接访问响应文本

在使用非Web服务时,要保证其安全可靠

要确定JSONP请求是否失败也不容易

Comet

IE不支持

    <script>
    
        function createStreamingClient(url, progress, finished){        
            
            var xhr = new XMLHttpRequest(),
                received = 0;
                
            xhr.open("get", url, true);
            xhr.onreadystatechange = function(){
                var result;
                
                if (xhr.readyState == 3){
                
                    //get only the new data and adjust counter
                    result = xhr.responseText.substring(received);
                    received += result.length;
                    
                    //call the progress callback
                    progress(result);
                    
                } else if (xhr.readyState == 4){
                    finished(xhr.responseText);
                }
            };
            xhr.send(null);
            return xhr;
        }

        var client = createStreamingClient("streaming.php", function(data){
                        alert("Received: " + data);
                     }, function(data){
                        alert("Done!");
                     });
        
    </script>

CORS

        function createCORSRequest(method, url){
            var xhr = new XMLHttpRequest();
            if ("withCredentials" in xhr){
                xhr.open(method, url, true);
            } else if (typeof XDomainRequest != "undefined"){
                xhr = new XDomainRequest();
                xhr.open(method, url);
            } else {
                xhr = null;
            }
            return xhr;
        }

        var request = createCORSRequest("get", "http://www.somewhere-else.com/xdr.php");
        if (request){
            request.onload = function(){
                //do something with request.responseText
            };
            request.send();
        }

确保XHR访问的URL安全

1.要求以SSL连接来访问可以通过XHR请求的资源

2.要求每一次请求都要附带验证码

注意,以下方法无效,很容易伪造

1.要求发送POST

2.检查来源URL

3.基于cookie

不要把用户名和密码放在javascrip里





相关文章推荐

【JavaScript】跨源资源共享CORS和其他跨域技术(Comet、JSONP、SSE、Web Sockets)

通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略。默认情况下XHR对象只能访问与包含它的页面位于同一个域中的资源,这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求也是很重要的。一...

关于AJAX/javascript 跨域访问的解决办法及 CORS(Cross-Origin Resource Sharing) 简单介绍

这么多年了, javascript的跨域访问问题终于得到了终极解决,所谓终极,是在浏览器相关的标准里面得到了正式的支持,而不是所谓iframe之类的方法。 而支持这种方案的浏览器必须是 ff 3...
  • e_wsq
  • e_wsq
  • 2012年05月11日 20:20
  • 798

JavaScript--跨域--CORS

CORS通过XHR实现ajax通信的主要限制来源于跨域安全策略,默认情况下只能访问与包含它的页面的同一个域中的资源,这种安全策略可以预防恶意行为。 CORS(跨域资源共享):背后的基本思想,就是使用...

JavaScript 跨域(CORS)

1、概念 通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略。默认情况与下,XHR 对象只能访问同一域中的资源。这种安全策略可以预防某些恶意行为。 但是,实现合理的跨域请求在现代web应...

JavaScript跨域问题之CORS方法与JSONP的对比

什么是跨域? 只要协议、域名、端口有任何一个不同,都会被当成不同的域。而JavaScript同源政策的限制,无法进行跨域调用解决方法: 1.跨域资源共享(CORS): 定义了在...

CORS跨域访问框架jra包

  • 2017年11月15日 11:34
  • 28KB
  • 下载

Java之旅--跨域(CORS)

CORS全称:Cross-Origin Resource Sharing 在前后台分离的应用开发中,跨域是经常需要处理的场景。指的是访问不同域名的资源,对于静态资源的访问,比如CSS、GIF、Form...

cors跨域Tomcat文件

  • 2017年04月21日 15:45
  • 37KB
  • 下载

geoserver cors跨域

  • 2015年08月25日 14:19
  • 30KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 之 跨域技术 CORS
举报原因:
原因补充:

(最多只允许输入30个字)