同源策略和跨域方法

魏宪会发布于2019-08-20 18:00 / 1576人阅读

摘要：同源策略的控制者是浏览器，浏览器可以控制不同域之间的资源的访问或相互操作，但不控制自己对不同域之间的资源的操作和访问。

同源与跨域

一般情况下，禁止一个域从另一个域读取数据，却可以使用某些从其他域拿到的资源。比如说，允许一个域执行、渲染、应用从其他域获取到的脚本、图片、样式；同样，一个域可以展示从其他域获取的内容，比如在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

跨域方法

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

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

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来完成跨域。

form表单提交，这样可以提交数据，但是进行交互有点困难；

window.name + iframe的使用，可以使用iframe定义一个窗口window，通过后端或者页面iframe的src页面的js脚本配合，把数据放在这个window.name上，最大可以存储2M的数据，然后主域可以把这个iframe的src设置为何主域同域的中间页，而此时iframe的window.name并不会变，这样主页就可以获取该iframe的window.name来获取数据。参考链接

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

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

WebSocket可以随便玩

专线服务服务器托管同源策略端跨域跨域 cdn跨域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83995.html

同源策略和跨域知识点学习

摘要：同源策略在这之前需要先熟悉一下这个概念，同源指请求协议相同，主机名相同，端口相同，涉及安全的策略。同源策略主要限制的是不同源之间的交互操作，对于跨域内嵌的资源不受该策略限制。问题起因是在使用weibo api的时候，发现有一个报错。weibo api是https协议，我本地是模拟的回调域名，然后进行数据通信，本地http协议，于是乎就报错了。出于对postMessage的不是很熟悉，...

baiy 2019-08-20 12:08 评论0 收藏0
同源策略和跨域

摘要：一些技术都默认采取了同源策略，这些技术范围包括但不限于。但是相比较以上的各种场景和绕过同源策略的方法，的跨域请求设置很容易，只需要在目标服务的根目录下在前端开发的过程中，我们经常遇到跨域的问题，以下的文章将列举一下我在工作中碰到的跨域问题。以及稍稍的探讨一下为什么会有跨域问题的出现，和所谓的同源策略同源策略 1. 历史 1995 年由 Netscape 公司提出，之后被其他浏览器厂...

Achilles 2019-08-29 11:29 评论0 收藏0
同源策略和跨域

摘要：一些技术都默认采取了同源策略，这些技术范围包括但不限于。但是相比较以上的各种场景和绕过同源策略的方法，的跨域请求设置很容易，只需要在目标服务的根目录下在前端开发的过程中，我们经常遇到跨域的问题，以下的文章将列举一下我在工作中碰到的跨域问题。以及稍稍的探讨一下为什么会有跨域问题的出现，和所谓的同源策略同源策略 1. 历史 1995 年由 Netscape 公司提出，之后被其他浏览器厂...

ideaa 2019-08-21 14:41 评论0 收藏0
同源策略和跨域

摘要：一些技术都默认采取了同源策略，这些技术范围包括但不限于。但是相比较以上的各种场景和绕过同源策略的方法，的跨域请求设置很容易，只需要在目标服务的根目录下在前端开发的过程中，我们经常遇到跨域的问题，以下的文章将列举一下我在工作中碰到的跨域问题。以及稍稍的探讨一下为什么会有跨域问题的出现，和所谓的同源策略同源策略 1. 历史 1995 年由 Netscape 公司提出，之后被其他浏览器厂...

Seay 2019-08-01 15:52 评论0 收藏0
跨域和跨域请求的方法

摘要：存在跨域的情况网络协议不同，如协议访问协议。域名和域名对应如访问跨域请求资源的方法代理定义和用法代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。定义和用法是现代浏览器支持跨域资源请求的一种最常用的方式。 1、什么是跨域？由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：网络协议不同，...

wwq0327 2019-08-23 12:30 评论0 收藏0