Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

转载 2016年06月01日 17:36:52

同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。

相信每个开发人员都曾遇到过跨域请求的情况,虽然情况不一样,但问题的本质都可以归为浏览器出于安全考虑下的同源策略的限制。

跨域的情形有很多,最常见的有Ajax跨域、Socket跨域和Canvas跨域。下面列举一些我们常见的跨域情形下,某些浏览器控制台给出的错误提示:

 

FireFox下的提示:

 

已阻止交叉源请求:同源策略不允许读取***上的远程资源。可以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。

 

Canvas跨域Chrome下的提示:

 

UncaughtSecurityError:Failed to execute'getImageData' on 'CanvasRenderingContext2D':The canvas has been taintedby cross-origin data.

 

或:

 

Imagefrom origin 'http://js.xx.com' has been blocked from loading by Cross-OriginResource Sharing policy: No 'Access-Control-Allow-Origin' header is present onthe requested resource. Origin 'http://act.xx.com' is therefore not allowedaccess.


 

网上有许多解决跨域的方法,大体上有这几种:

 

1)document.domain+iframe的设置

2)动态创建script

3)利用iframe和location.hash

4)window.name实现的跨域数据传输

5)使用HTML5 postMessage

6)利用flash

7)通过代理,js访问代理,代理转到不同的域

http://developer.yahoo.com/javascript/howto-proxy.html

8)jQuery JSONP(不能成为真正的Ajax,本质上仍是动态创建script)

http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

9)跨域资源共享(CORS) 这是HTML5跨域问题的标准解决方案

说明:方案1~方案6见Rain Man所写的文章《JavaScript跨域总结与解决办法》

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

 

下面主要就我总结的几种解决跨域的方法,展开说一下。

1)  绕开跨域。

适用情形是:动静分离。

example1.com域名下的页面中跨域请求是以JavaScript内联方式实现的,而请求的目标静态资源是放在example2.com域名下,这时可以将执行跨域请求的JavaScript代码块独立出来,放到example2.com上,而example1.com页面通过外联方式引入该静态域名下的js文件。这样,js与请求的图片等资源都在example2.com下,即可正常访问到。这种方法其实是一种巧妙避开跨域的方法。

 

2)  后台抓取克隆图片。

适用情形:动静不分离(两个域名均运行访问静态资源)。

example1.com请求example2.com下的资源图片,可以使用PHP抓取图片并在example2.com下生成一份,这样就可以间接访问到example1.com的静态资源。

 

html模板示例代码:

 

$("#scratchpad").wScratchPad({     //刮刮卡示例,当前域名http://act.xxx.com

         width:283,

         height:154,

         //color: "#a9a9a7",

         image2:"imgdata.php?url=http://js.xxx.com/static/activity/sq/guagua315/images/card_inner.jpg",

scratchMove:function() {

}

});

                           

或:

 

xi=newXMLHttpRequest();

xi.open("GET","imgdata.php?url="+yourImageURL,true);

xi.send();

 

xi.onreadystatechange=function() {

  if(xi.readyState==4 && xi.status==200) {

    img=newImage;

    img.onload=function(){

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    }

    img.src=xi.responseText;

  }

}

 

PHP处理代码:

 

<?php//imgdata.php

 

  $url=$_GET['url'];

  $img =file_get_contents($url);

  $imgname = substr(strrchr($url,"/"),1);

  file_put_contents($fn,$img);

  echo $imgname;

 

?>

 

上述代码在当前php目录下生成了克隆生成了一张图片。

 

3)  后台程序设置Access-Control-Allow-Origin

适用情形:Ajax获取跨域接口的JSON数据。

example1.com请求example2.com的数据接口,则需要在example2.com的数据接口添加跨域访问授权。

PHP程序中开始出添加header('HeaderName:HeaderValue'); 这样的header标记:

header('Access-Control-Allow-Origin:*');

 

4)修改服务器配置启用CORS

适用情形:跨域访问静态资源。

Access-Control-Allow-Origin是什么作用呢?用于授权资源的跨站访问。比如,静态资源图片都放在example2.com 域名下, 如果在返回的头中没有设置 Access-Control-Allow-Origin , 那么别的域是没有权限外链你的图片的。

 

要实现CORS跨域,服务端需要这个一个流程,图片引自html5rocks,附图如下

 

a.      对于简单请求,如GET,只需要在HTTP Response后添加Access-Control-Allow-Origin。

 

b.      对于非简单请求,比如POST、PUT、DELETE等,浏览器会分两次应答。第一次preflight(method: OPTIONS),主要验证来源是否合法,并返回允许的Header等。第二次才是真正的HTTP应答。所以服务器必须处理OPTIONS应答。

 

这里是一个nginx启用CORS的参考配置示例http://enable-cors.org/server_nginx.html。代码:

  1. #  
  2. # A CORS (Cross-Origin Resouce Sharing) config for nginx  
  3. #  
  4. # == Purpose  
  5. #  
  6. # This nginx configuration enables CORS requests in the following way:  
  7. # - enables CORS just for origins on a whitelist specified by a regular expression  
  8. # - CORS preflight request (OPTIONS) are responded immediately  
  9. # - Access-Control-Allow-Credentials=true for GET and POST requests  
  10. # - Access-Control-Max-Age=20days, to minimize repetitive OPTIONS requests  
  11. # - various superluous settings to accommodate nonconformant browsers  
  12. #  
  13. # == Comment on echoing Access-Control-Allow-Origin  
  14. #   
  15. # How do you allow CORS requests only from certain domains? The last  
  16. # published W3C candidate recommendation states that the  
  17. # Access-Control-Allow-Origin header can include a list of origins.  
  18. # (See: http://www.w3.org/TR/2013/CR-cors-20130129/#access-control-allow-origin-response-header )  
  19. # However, browsers do not support this well and it likely will be  
  20. # dropped from the spec (see, http://www.rfc-editor.org/errata_search.php?rfc=6454&eid=3249 ).  
  21. #   
  22. # The usual workaround is for the server to keep a whitelist of  
  23. # acceptable origins (as a regular expression), match the request's  
  24. # Origin header against the list, and echo back the matched value.  
  25. #  
  26. # (Yes you can use '*' to accept all origins but this is too open and  
  27. # prevents using 'Access-Control-Allow-Credentials: true', which is  
  28. # needed for HTTP Basic Access authentication.)  
  29. #  
  30. # == Comment on  spec  
  31. #  
  32. # Comments below are all based on my reading of the CORS spec as of  
  33. # 2013-Jan-29 ( http://www.w3.org/TR/2013/CR-cors-20130129/ ), the  
  34. # XMLHttpRequest spec (  
  35. # http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/ ), and  
  36. # experimentation with latest versions of Firefox, Chrome, Safari at  
  37. # that point in time.  
  38. #  
  39. # == Changelog  
  40. #  
  41. # shared at: https://gist.github.com/algal/5480916  
  42. # based on: https://gist.github.com/alexjs/4165271  
  43. #  
  44.   
  45. location / {  
  46.   
  47.     # if the request included an Origin: header with an origin on the whitelist,  
  48.     # then it is some kind of CORS request.  
  49.   
  50.     # specifically, this example allow CORS requests from  
  51.     #  scheme    : http or https  
  52.     #  authority : any authority ending in ".mckinsey.com"  
  53.     #  port      : nothing, or :  
  54.     if ($http_origin ~* (https?://[^/]*\.mckinsey\.com(:[0-9]+)?)$) {  
  55.         set $cors "true";  
  56.     }  
  57.   
  58.     # Nginx doesn't support nested If statements, so we use string  
  59.     # concatenation to create a flag for compound conditions  
  60.   
  61.     # OPTIONS indicates a CORS pre-flight request  
  62.     if ($request_method = 'OPTIONS') {  
  63.         set $cors "${cors}options";    
  64.     }  
  65.   
  66.     # non-OPTIONS indicates a normal CORS request  
  67.     if ($request_method = 'GET') {  
  68.         set $cors "${cors}get";    
  69.     }  
  70.     if ($request_method = 'POST') {  
  71.         set $cors "${cors}post";  
  72.     }  
  73.   
  74.     # if it's a GET or POST, set the standard CORS responses header  
  75.     if ($cors = "trueget") {  
  76.         # Tells the browser this origin may make cross-origin requests  
  77.         # (Here, we echo the requesting origin, which matched the whitelist.)  
  78.         add_header 'Access-Control-Allow-Origin' "$http_origin";  
  79.         # Tells the browser it may show the response, when XmlHttpRequest.withCredentials=true.  
  80.         add_header 'Access-Control-Allow-Credentials' 'true';  
  81.         # # Tell the browser which response headers the JS can see, besides the "simple response headers"  
  82.         # add_header 'Access-Control-Expose-Headers' 'myresponseheader';  
  83.     }  
  84.   
  85.     if ($cors = "truepost") {  
  86.         # Tells the browser this origin may make cross-origin requests  
  87.         # (Here, we echo the requesting origin, which matched the whitelist.)  
  88.         add_header 'Access-Control-Allow-Origin' "$http_origin";  
  89.         # Tells the browser it may show the response, when XmlHttpRequest.withCredentials=true.  
  90.         add_header 'Access-Control-Allow-Credentials' 'true';  
  91.         # # Tell the browser which response headers the JS can see, besides the "simple response headers"  
  92.         # add_header 'Access-Control-Expose-Headers' 'myresponseheader';  
  93.     }  
  94.   
  95.     # if it's OPTIONS, then it's a CORS preflight request so respond immediately with no response body  
  96.     if ($cors = "trueoptions") {  
  97.         # Tells the browser this origin may make cross-origin requests  
  98.         # (Here, we echo the requesting origin, which matched the whitelist.)  
  99.         add_header 'Access-Control-Allow-Origin' "$http_origin";  
  100.         # in a preflight response, tells browser the subsequent actual request can include user credentials (e.g., cookies)  
  101.         add_header 'Access-Control-Allow-Credentials' 'true';  
  102.   
  103.         #  
  104.         # Return special preflight info  
  105.         #  
  106.           
  107.         # Tell browser to cache this pre-flight info for 20 days  
  108.         add_header 'Access-Control-Max-Age' 1728000;  
  109.   
  110.         # Tell browser we respond to GET,POST,OPTIONS in normal CORS requests.  
  111.         #  
  112.         # Not officially needed but still included to help non-conforming browsers.  
  113.         #  
  114.         # OPTIONS should not be needed here, since the field is used  
  115.         # to indicate methods allowed for "actual request" not the  
  116.         # preflight request.  
  117.         #  
  118.         # GET,POST also should not be needed, since the "simple  
  119.         # methods" GET,POST,HEAD are included by default.  
  120.         #  
  121.         # We should only need this header for non-simple requests  
  122.         # methods (e.g., DELETE), or custom request methods (e.g., XMODIFY)  
  123.         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  
  124.           
  125.         # Tell browser we accept these headers in the actual request  
  126.         #  
  127.         # A dynamic, wide-open config would just echo back all the headers  
  128.         # listed in the preflight request's  
  129.         # Access-Control-Request-Headers.  
  130.         #  
  131.         # A dynamic, restrictive config, would just echo back the  
  132.         # subset of Access-Control-Request-Headers headers which are  
  133.         # allowed for this resource.  
  134.         #  
  135.         # This static, fairly open config just returns a hardcoded set of  
  136.         # headers that covers many cases, including some headers that  
  137.         # are officially unnecessary but actually needed to support  
  138.         # non-conforming browsers  
  139.         #   
  140.         # Comment on some particular headers below:  
  141.         #  
  142.         # Authorization -- practically and officially needed to support  
  143.         # requests using HTTP Basic Access authentication. Browser JS  
  144.         # can use HTTP BA authentication with an XmlHttpRequest object  
  145.         # req by calling  
  146.         #   
  147.         #   req.withCredentials=true,  and  
  148.         #   req.setRequestHeader('Authorization','Basic ' + window.btoa(theusername + ':' + thepassword))  
  149.         #  
  150.         # Counterintuitively, the username and password fields on  
  151.         # XmlHttpRequest#open cannot be used to set the authorization  
  152.         # field automatically for CORS requests.  
  153.         #  
  154.         # Content-Type -- this is a "simple header" only when it's  
  155.         # value is either application/x-www-form-urlencoded,  
  156.         # multipart/form-data, or text/plain; and in that case it does  
  157.         # not officially need to be included. But, if your browser  
  158.         # code sets the content type as application/json, for example,  
  159.         # then that makes the header non-simple, and then your server  
  160.         # must declare that it allows the Content-Type header.  
  161.         #   
  162.         # Accept,Accept-Language,Content-Language -- these are the  
  163.         # "simple headers" and they are officially never  
  164.         # required. Practically, possibly required.  
  165.         #  
  166.         # Origin -- logically, should not need to be explicitly  
  167.         # required, since it's implicitly required by all of  
  168.         # CORS. officially, it is unclear if it is required or  
  169.         # forbidden! practically, probably required by existing  
  170.         # browsers (Gecko does not request it but WebKit does, so  
  171.         # WebKit might choke if it's not returned back).  
  172.         #  
  173.         # User-Agent,DNT -- officially, should not be required, as  
  174.         # they cannot be set as "author request headers". practically,  
  175.         # may be required.  
  176.         #   
  177.         # My Comment:  
  178.         #  
  179.         # The specs are contradictory, or else just confusing to me,  
  180.         # in how they describe certain headers as required by CORS but  
  181.         # forbidden by XmlHttpRequest. The CORS spec says the browser  
  182.         # is supposed to set Access-Control-Request-Headers to include  
  183.         # only "author request headers" (section 7.1.5). And then the  
  184.         # server is supposed to use Access-Control-Allow-Headers to  
  185.         # echo back the subset of those which is allowed, telling the  
  186.         # browser that it should not continue and perform the actual  
  187.         # request if it includes additional headers (section 7.1.5,  
  188.         # step 8). So this implies the browser client code must take  
  189.         # care to include all necessary headers as author request  
  190.         # headers.  
  191.         #   
  192.         # However, the spec for XmlHttpRequest#setRequestHeader  
  193.         # (section 4.6.2) provides a long list of headers which the  
  194.         # the browser client code is forbidden to set, including for  
  195.         # instance Origin, DNT (do not track), User-Agent, etc.. This  
  196.         # is understandable: these are all headers that we want the  
  197.         # browser itself to control, so that malicious browser client  
  198.         # code cannot spoof them and for instance pretend to be from a  
  199.         # different origin, etc..  
  200.         #  
  201.         # But if XmlHttpRequest forbids the browser client code from  
  202.         # setting these (as per the XmlHttpRequest spec), then they  
  203.         # are not author request headers. And if they are not author  
  204.         # request headers, then the browser should not include them in  
  205.         # the preflight request's Access-Control-Request-Headers. And  
  206.         # if they are not included in Access-Control-Request-Headers,  
  207.         # then they should not be echoed by  
  208.         # Access-Control-Allow-Headers. And if they are not echoed by  
  209.         # Access-Control-Allow-Headers, then the browser should not  
  210.         # continue and execute actual request. So this seems to imply  
  211.         # that the CORS and XmlHttpRequest specs forbid certain  
  212.         # widely-used fields in CORS requests, including the Origin  
  213.         # field, which they also require for CORS requests.  
  214.         #  
  215.         # The bottom line: it seems there are headers needed for the  
  216.         # web and CORS to work, which at the moment you should  
  217.         # hard-code into Access-Control-Allow-Headers, although  
  218.         # official specs imply this should not be necessary.  
  219.         #   
  220.         add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';  
  221.   
  222.         # build entire response to the preflight request  
  223.         # no body in this response  
  224.         add_header 'Content-Length' 0;  
  225.         # (should not be necessary, but included for non-conforming browsers)  
  226.         add_header 'Content-Type' 'text/plain charset=UTF-8';  
  227.         # indicate successful return with no content  
  228.         return 204;  
  229.     }  
  230.     # --PUT YOUR REGULAR NGINX CODE HERE--  
  231. }  
  232.     

服务器解析流程如下:

a.首先查看http头部有无origin字段;

b.如果没有,或者不允许,直接当成普通请求处理,结束;

c.如果有并且是允许的,那么再看是否是preflight(method=OPTIONS);

d.如果是preflight,就返回Allow-Headers、Allow-Methods等,内容为空;

e.如果不是preflight,就返回Allow-Origin、Allow-Credentials等,并返回正常内容。

 

若服务器为nginx,可以nginxconf文件中加入以下内容:

  1. location / {  
  2.   add_header Access-Control-Allow-Origin *;  
  3. }  

若服务器为Apache,则可以按照如下配置:

  1. <IfModule mod_setenvif.c>  
  2.     <IfModule mod_headers.c>  
  3.         <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">  
  4.             SetEnvIf Origin ":" IS_CORS  
  5.             Header set Access-Control-Allow-Origin "*" env=IS_CORS  
  6.         </FilesMatch>  
  7.     </IfModule>  
  8. </IfModule>  

为安全起见,Access-Control-Allow-Origin也可设为特定域名的方式。

在HTML5中,有些HTML元素为CORS提供了支持,如img、video新增了crossOrigin属性,属性值可以为anonymoususe-credentials。比如,canvas绘图要用到跨域图片,在JavaScript中要设置img.crossOrigin="Anonymous";

 

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
  1. var img = new Image,  
  2.     canvas = document.createElement("canvas"),  
  3.     ctx = canvas.getContext("2d"),  
  4.     src = "http://example.com/image"; // insert image url here  
  5.   
  6. img.crossOrigin = "Anonymous";  
  7.   
  8. img.onload = function() {  
  9.     canvas.width = img.width;  
  10.     canvas.height = img.height;  
  11.     ctx.drawImage( img, 0, 0 );  
  12.     localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );  
  13. }  
  14. img.src = src;  
  15. // make sure the load event fires for cached images too  
  16. if ( img.complete || img.complete === undefined ) {  
  17.     img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";  
  18.     img.src = src;  
  19. }  

上述配置完成后,重启服务器,CORS启用。

然后我们再刷新页面,查询请求头的参数,可以发现多出一个:Access-Control-Allow-Origin:*

,到此证明服务器配置已经生效。同时我们的canvas绘图也可以正常使用了。

 

刷新页面返回请求响应结果后,HTTP Request Headers的内容:

 

Remote Address:222.132.18.xx:80

Request URL:http://js.xx.com/static/activity/sq/guagua315/images/card_inner.jpg

Request Method:GET

Status Code:200 OK

Request Headersview source

Accept:image/webp,*/*;q=0.8

Accept-Encoding:gzip, deflate, sdch

Accept-Language:zh-CN,zh;q=0.8

Cache-Control:no-cache

Connection:keep-alive

Host:js.xx.com

Origin:http://act.xx.com

Pragma:no-cache

RA-Sid:7CCAD53E-20140704-054839-03c57a-85faf2

RA-Ver:2.8.8

Referer:http://act.xx.com/sq/guagua315?uuid=46124642&fid=2&sign=xxx

User-Agent:Mozilla/5.0 (Windows NT 6.1;WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115Safari/537.36

Response Headersview source

Accept-Ranges:bytes

Access-Control-Allow-Origin:*

Connection:close

Content-Length:4010

Content-Type:image/jpeg

Date:Thu, 12 Mar 2015 02:29:43 GMT

ETag:"54f7d1b4-faa"

Last-Modified:Thu, 05 Mar 2015 03:47:00 GMT

Powered-By-ChinaCache:MISS fromCNC-WF-3-3X6

Powered-By-ChinaCache:MISS fromCNC-WF-3-3X5

Server:Tengine

Switch:FSCS

附图:


参考文章:

CORS enabled image  https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

CORS on Nginx   http://enable-cors.org/server_nginx.html

Nginx CORS实现JS跨域  http://blog.csdn.net/oyzl68/article/details/18741057

转载请注明出处,文章来自于freshlover的CSDN空间《Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法》 

http://blog.csdn.net/freshlover/article/details/44223467

相关文章推荐

Unity 3D WebPalyer跨域处理问题

当使用WWW访问Web服务时,安全策略会阻止跨域的请求访问,会返回类似“Rejected because no crossdomain.xml policy file was found”等错误信息。...
  • yuer417
  • yuer417
  • 2013年08月21日 16:30
  • 936

Unity3D关于跨域访问的处理

当使用WWW访问Web服务时,安全策略会阻止跨域的请求访问,会返回类似“Rejected because no crossdomain.xml policy file was found”等错误信息。...

Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。 相信每个开发人员都曾遇到过跨域请求的情况,虽然情况不一样,但问题的本质都可以归为浏览器出于安全考虑下的同源策略...

Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。 相信每个开发人员都曾遇到过跨域请求的情况,虽然情况不一样,但问题的本质都可以归为浏览器出于安全考虑下的同...

ajax请求总是不成功?浏览器的同源策略和跨域问题详解

摘要: XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is ...

浏览器拦截跨域请求处理方法(firebug报错,同源策略不允许读取XXX上的远程资源)

1. 如果可以使用get请求的话

浏览器拦截跨域请求处理方法(同源策略不允许读取服务器远程资源)

如题目所示,当浏览器进行跨域请求时,会出现跨域问题。该问题在 Firefox 中会报错:已拦截跨源请求:同源策略禁止读取位于 http://XXXX/x 的远程资源。(原因:CORS 头缺少 'Acc...

跨域访问解决方法-jsonp

  • 2016年01月07日 15:02
  • 4KB
  • 下载

浏览器同源策略与跨域请求的实现方法

最近在项目中遇到了跨域请求的问题,趁着这个机会详细地了解了下相关的知识,现在做个记录。 Reference: http://www.ruanyifeng.com/blog/2016/04/...

同源策略与跨域解决方案

在网上看了这么多有关同源策略的介绍,感觉都说得不是很清楚,都只是提到了一部分,站在巨人的肩膀上我简单总结所谓的 “同源策略” 同源策略: 就是为了保证数据安全的一个实现方法,不允许跨域访问数。    ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
举报原因:
原因补充:

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