同源与跨域

一般情况下,禁止一个域从另一个域读取数据,却可以使用某些从其他域拿到的资源。比如说,允许一个域执行、渲染、应用从其他域获取到的脚本、图片、样式;同样,一个域可以展示从其他域获取的内容,比如在frame中显示html文档。网络资源也可以选择性的让其他域来读取自己的信息,比如使用Cross-Origin Resource Sharing,这种情况下访问权是针对单个域授权的。同源策略的控制者是浏览器,浏览器可以控制不同域之间的资源的访问或相互操作,但不控制自己对不同域之间的资源的操作和访问。

同源策略

源:由协议【https、http】+域名【a.com】+端口【80、443】组成,(ie中略有不同),同源策略是浏览器的核心安全策略,目的是将来自不同源的资源进行隔离,并控制不同源资源间的通信,从而减少安全威胁,增强安全性。

跨域中的一些限制以及不限制内容如下:

不限制内容:

  • 脚本文件 js

  • 图片资源

  • 样式资源css

  • iframe展示其他的的资源

  • a链接访问其他资源

  • 多媒体等资源

  • form表单提交

限制内容:

  • 跨域的方法【get、post可以】

  • 跨域请求头不可以添加自定义头部

  • 本地文件系统读写

  • iframe可以访问iframe整体,不能访问内容

  • cookie的限制,使用CORS需要withCredentials=true才可以带上cookie

跨域方法

  1. 使用反向代理,避免跨域,通过后端来完成跨域部分

  2. JSONP方式,利用js文件的跨域允许,并且js文件请求到了,就会执行该js脚本,如此可以在前端定义好function callback(data){};这样去请求后端的js文件,文件的内容包括了需要的数据,但是返回的是一个函数callback(data);这样就会调用前端脚本写好的callback方法,把data当做参数使用

  3. CORS(Cross Origin Resource Sharing),通过协商HTTP Header让浏览器和服务端进行通信,来决定请求或者响应是否有效,默认情况下,浏览器发送跨域请求不带认证信息(比如cookie,证书,代理认证信息等),withCredentials属性值为false,后端响应设置Access-Control-Allow-Origin允许该域,或者为,如果需要cookie认证信息跨域需要withCredentials=true,同时服务端允许Access-Control-Allow-Credentials:true,同时Access-Control-Allow-Origin 值不能为;使用CORS浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request),只要同时满足以下两大条件,就属于简单请求。

    1) 请求方法是以下三种方法之一:
    HEAD
    GET
    POST
    (2)HTTP的头信息不超出以下几种字段:
    Accept
    Accept-Language
    Content-Language
    Last-event-id
    Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

    对于非简单请求、会发起预检请求Options来确认是否允许跨域,这种方法老的浏览器不一定支持。fetch方法在移动端使用较多,也可以配合CORS来完成跨域。

  4. form表单提交,这样可以提交数据,但是进行交互有点困难;

  5. window.name的使用,可以使用iframe定义一个窗口window,通过后端配合,把数据放在这个window.name上,最大可以存储2M的数据,然后主域可以获取该iframe的window.name来获取数据。

  6. document.domain可以完成两个顶级域名下的子域名之间的通信

  7. postMessage是H5中的window之间的通信方式。

  8. WebSocket可以随便玩

同源策略和跨域方法的更多相关文章

  1. 详解Html5页面实现下载文件(apk、txt等)的三种方式

    这篇文章主要介绍了详解Html5页面实现下载文件(apk、txt等)的三种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. 基于HTML十秒做出淘宝页面

    十分钟做出一个网页,看似不可思议,下面小编给大家带来了基于HTML十秒做出淘宝页面,只分为两步,代码超级简单,需要的朋友参考下吧

  4. html5唤起app的方法

    这篇文章主要介绍了html5唤起app的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. 跨域修改iframe页面内容详解

    这篇文章主要介绍了跨域修改iframe页面内容详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. 使用postMessage让 iframe自适应高度的方法示例

    这篇文章主要介绍了使用postMessage让 iframe自适应高度的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  7. ios – Cordova 3.7在每个本机通话中复制iframe

    由于我已升级到Cordova3.7,每个本地调用都将一个新的iframe附加到DOM,如下所示.为了排除我现有的代码影响cordova的可能性,我尝试使用cordovaCLI创建一个新的代码,添加控制台插件,并在设备控制台中的setInterval循环中调用console.log().因此,我在DOM中收到了大量的iframe.我在iPad3,iOS7上尝试过使用xCode6构建应用程序.有没有人遇到这个问题?

  8. swift – 与WKWebView进行JavaScript同步本地通信

    使用WKWebView可以在JavaScript和Swift/Obj-C本机代码之间进行同步通信吗?

  9. android – 如何在webview中使用iframe播放vimeo视频?

    在谷歌研究之后,我写了上面的代码,但没有工作.在这个没有错误发生,但是当我点击播放按钮进度条显示一段时间,然后它消失并再次显示播放按钮…有人可以建议我如何解决这个问题?

  10. html5唤醒APP小记

    这篇文章主要介绍了html5唤醒APP小记的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部