不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案

CORS也已经成为主流的跨域解决方案,不过CORF也会引发CSRF,本文先分享第三方的一个前端工具箱全面展示那些浏览器版本支持CORS,由于各家浏览器厂商因为各自原因在不同的版本里支持的标准不同,这个工具小而美,可以清晰的比较不同版本浏览器前端技术兼容性对照表。

 

先看图下面这个网站可以很方便的查看不同版本浏览器对CORS的支持力度,IE10,IE11,Chrome,Firefox,Safari太多了一个都少不了,基本涵盖常见或者不常见的浏览器了,话说做前端真不容易啊。

https://caniuse.com/#search=cors

不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案_第1张图片

 如图所示,这个图表不是单纯的显示支持与不支持,还做了一些细分:

1 Does not support CORS for images in 

2 Supported somewhat in IE8 and IE9 using the XDomainRequest object (but has limitations)

3 Does not support CORS for  in : https://bugs.webkit.org/show_bug.cgi?id=135379

4 Does not support CORS for resources which redirect: https://bugzilla.mozilla.org/show_bug.cgi?id=1346749

CORS 跨域 实现思路及相关解决方案   写的很好

其他例如CSS Grid Layout (level 1)

不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案_第2张图片

CSS Flexible Box Layout Module

不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案_第3张图片

ECMAScript 2015 (ES6)

不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案_第4张图片

也可以按不同的浏览器版本直接对比对不同技术规范的支持,比如H5选择最新版本的IE11,Chrome,Firefox,Safari比较:

不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案_第5张图片

分至少部分支持和混合支持:

不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案_第6张图片

如果你遇到跨域问题还没有使用CORS那么赶紧往下看。

同源政策

维基百科上关于同源策略的定义http://en.wikipedia.org/wiki/Same_origin_policy
同源策略是Web应用程序安全模型中的一个重要概念。根据该策略,Web浏览器允许第一个Web页面中包含的脚本访问第二个Web页面中的数据,但前提是两个Web页面具有相同的源。原点定义为URI方案,主机名和端口号的组合。此策略可防止一个页面上的恶意脚本通过该页面的文档对象模型访问另一个网页上的敏感数据。

不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案_第7张图片

放宽同源政策(跨域解决方案)


在某些情况下,同源策略限制性太强,对使用多个子域的大型网站造成问题。首先,使用诸如使用片段标识符或window.name属性的许多变通方法来在驻留在不同域中的文档之间传递数据。现代浏览器支持多种技术,以受控方式放宽同源策略:

1.document.domain属性
如果两个窗口(或框架)包含将域设置为相同值的脚本,则这两个窗口将放宽同源策略,并且每个窗口可以与另一个窗口交互。例如,从orders.example.com和catalog.example.com加载的文档中的协作脚本可能会将其document.domain属性设置为“example.com”,从而使文档看起来具有相同的来源并使每个文档都能够读取另一个的属性。设置此属性会隐式将端口设置为null,大多数浏览器将从端口80或甚至未指定的端口进行不同的解释。要确保浏览器允许访问,请设置两个页面的document.domain属性。

2.跨源资源共享(CORS)
另一种放宽同源策略的技术是以跨源资源共享的名义标准化的。此标准使用新的Origin请求标头和新的Access-Control-Allow-Origin响应标头扩展HTTP。它允许服务器使用标头明确列出可能请求文件或使用通配符的起源,并允许任何站点请求文件。诸如Firefox 3.5,Safari 4和Internet Explorer 10之类的浏览器使用此标头来允许具有XMLHttpRequest的跨源HTTP请求,否则这些请求将被同源策略禁止。

3.跨文档消息
另一种技术是跨文档消息传递,允许来自一个页面的脚本将文本消息传递到另一页面上的脚本,而不管脚本来源如何。在Window对象上异步调用postMessage()方法会在该窗口中触发“onmessage”事件,从而触发任何用户定义的事件处理程序。一个页面中的脚本仍然无法直接访问另一个页面中的方法或变量,但它们可以通过此消息传递技术安全地进行通信。

4.JSONP 
由于允许HTML

你可能感兴趣的:(Ajax,Javascript,HTML5)