SSR就是一台服务器,可以利用 SSR 在远程的服务器上配置 SSR,使其能够成为 SSR 节点,这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR(简称 SSR)是 Shadowsocks 分支,在 Shadowsocks 的基础上增加了一些数据...
一、Visual Studio Code下载地址:https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...
方式一 script标签跨域:这是由于script不受同源策略的限制 缺点:只能够get单向请求,无法获取服务端返回的数据 方式二 JSONP跨域:也是利用script标签天生可以跨域的原理 缺点:只能够get请求,不能注册success error函数,安全系数不高
一、什么是跨域?
在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。
什么是同源策略?
同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送
二、9种跨域解决方案
1、JSONP跨域
jsonp的原理就是利用
[removed]
标签没有跨域限制,通过[removed]
标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。1)原生JS实现:
服务端返回如下(返回时即执行全局函数):
2)jquery Ajax实现:
3)Vue axios实现:
后端node.js代码:
2、跨域资源共享(CORS)
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
浏览器将CORS跨域请求分为简单请求和非简单请求。
只要同时满足一下两个条件,就属于简单请求
(1)使用下列方法之一:
head
get
post
(2)请求的Heder是
Accept
Accept-Language
Content-Language
Content-Type: 只限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain
不同时满足上面的两个条件,就属于非简单请求。浏览器对这两种的处理,是不一样的。
简单请求
对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。
上面的头信息中,Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。
CORS请求设置的响应头字段,都以 Access-Control-开头:
1)Access-Control-Allow-Origin:必选
它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。
2)Access-Control-Allow-Credentials:可选
它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。
3)Access-Control-Expose-Headers:可选
CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader(‘FooBar’)可以返回FooBar字段的值。
非简单请求
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
预检请求
预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。请求头信息里面,关键字段是Origin,表示请求来自哪个源。除了Origin字段,"预检"请求的头信息包括两个特殊字段。
1)Access-Control-Request-Method:必选
用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT。
2)Access-Control-Request-Headers:可选
该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header。
预检请求的回应
服务器收到"预检"请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。
HTTP回应中,除了关键的是Access-Control-Allow-Origin字段,其他CORS相关字段如下:
1)Access-Control-Allow-Methods:必选
它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
2)Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。
3)Access-Control-Allow-Credentials:可选
该字段与简单请求时的含义相同。
4)Access-Control-Max-Age:可选
用来指定本次预检请求的有效期,单位为秒。
CORS跨域示例
1)前端设置:
原生ajax:
jquery ajax:
2)服务端设置:
nodejs代码
3、nginx代理跨域
nginx代理跨域,实质和CORS跨域原理一样,通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。
1)nginx配置解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。
2)nginx反向代理接口跨域
实现思路:通过Nginx配置一个代理服务器域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域访问。
nginx具体配置:
4、nodejs中间件代理跨域
node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。
1)非vue框架的跨域
使用node + express + http-proxy-middleware搭建一个proxy服务器。
前端代码:
中间件服务器代码:
2)vue框架的跨域
node + vue + webpack + webpack-dev-server搭建的项目,跨域请求接口,直接修改webpack.config.js配置。开发环境下,vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域。
webpack.config.js部分配置:
5、document.domain + iframe跨域
此方案仅限主域相同,子域不同的跨域应用场景。实现原理:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。
1)父窗口:(http://www.domain.com/a.html)
1)子窗口:(http://child.domain.com/a.html)
6、location.hash + iframe跨域
实现原理: a欲与b跨域相互通信,通过中间页c来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。
具体实现:A域:a.html -> B域:b.html -> A域:c.html,a与b不同域只能通过hash值单向通信,b与c也不同域也只能单向通信,但c与a同域,所以c可通过parent.parent访问a页面所有对象。
1)a.html:(http://www.domain1.com/a.html)
2)b.html:(http://www.domain2.com/b.html)
3)c.html:(http://www.domain1.com/c.html)
7、window.name + iframe跨域
window.name属性的独特之处:name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。
1)a.html:(http://www.domain1.com/a.html)
2)proxy.html:(http://www.domain1.com/proxy.html)
中间代理页,与a.html同域,内容为空即可。
3)b.html:(http://www.domain2.com/b.html)
通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
8、postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递
用法:postMessage(data,origin)方法接受两个参数:
data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
1)a.html:(http://www.domain1.com/a.html)
2)b.html:(http://www.domain2.com/b.html)
9、WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
1)前端代码:
2)Nodejs socket后台:
通过设置后端的cors允许跨域
看到大部分回答都在说什么是跨域或如何来实现跨域?
我觉得题主提出这个问题的主要原因在于,没有理解为什么需要跨域?为什么不能单纯的从前端来解决跨域问题?
首先跨域本身不是问题,而是浏览器故意这样设计的,那为什么浏览器需要跨域的限制?
简单说就是为了用户的安全,如果单纯的前端就能解决跨域问题,跨域限制就没有意义了,因为你合法的开发者可以在前端设置跨域,我不合法的开发者是不是可以用同样的方法来模拟你的跨域?
想象一下你请求了一个跨域的api接口,而后端没有了任何跨域限制,开发者的在前端设置了跨域,通过接口拿到数据,这看起来没有任何问题,然后项目上线
那题主有没有想过,你能够在前端设置跨域就能访问这个接口,那我自己做一个网站,用同样的跨域设置是不是也能访问你这个接口?
接下来当用户访问并登录了你的网站,同时我把伪造的网站也发给用户,用户打开伪造的网站,这个伪造的网站是不是就可以任意访问api服务器的接口,就能拿到本来需要授权才能获取的任何用户数据,或者通过这个接口就能任意修改用户数据
当然以上情景可能只有通过cookie进行会话才会出现,现在一般都是通过前端手动维护token或者sessionId维持会话,但这同样是一个极其严重的安全问题
就算不需要授权的数据,你也不希望任何人都能够通过在前端进行跨域设置就能随意读取你的项目中的数据对吗?
前端跨域问题
一:同源策略
1.what's this
所谓同源是指,域名,协议,端口相同。当浏览器运行一个JS脚本时会进行同源检测,如果不同源是不能执行的。
2.源继承
来自about:blank,[removed]和data:URLs中的内容,继承了将其载入的文档所指定的源,因为它们的URL本身未指定任何关于自身源的信息。
3.变更源
变更源可以实现基础域相同的不同页面的跨域问题。
如:a.baidu.com/index.html 通过 iframe 引入 b.baidu.com/index.html ,但是a中的JS是不可以操作b中的内容的,但是可以通过修改源来实现。需要在a和b中都修改domain,即 document.domain = 'baicu.com'
注意:document.doamin的修改必须是当前域或者当前域的基础域,如在a中document.domain = 'b.baidu.com'是报错的
二:跨域方案
共有几种解决方案:
(1)document.domain + iframe
(2)动态创建script
(3)window.name + iframe
(4)window.postMessage
(5)CORS
(6)JSONP
(7)nginx代理
1.document.domain + iframe
这种方式就是上面说的变更源
在a.name.com/a.html中
document.domain =
'a.com'
;
var
ifr = document.createElement(
'iframe'
);
ifr.src =
'http://b.name.com/b.html'
;
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload =
function
(){
var
doc = ifr.contentDocument || ifr.contentWindow.document;
//在这里操作doc,也就是b.html
ifr.onload =
null
;
};
在b.name.com/b.html中
document.domain =
'name.com'
;
2.动态创建script
因为script标签不受同源策略的限制
function
loadScript(url, func) {
var
head = document.head || document.getElementByTagName(
'head'
)[0];
var
script = document.createElement(
'script'
);
script.src = url;
script.onload = script.onreadystatechange =
function
(){
if
(!
this
.readyState ||
this
.readyState==
'loaded'
||
this
.readyState==
'complete'
){
func();
script.onload = script.onreadystatechange =
null
;
}
};
head.insertBefore(script, script[0]);
}
window.baidu = {
sug:
function
(data){
console.log(data);
}
}
loadScript(
'https://www.baidu.com'
,
function
(){console.log(
'loaded'
)});
3.window.name + iframe
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置
a.com/a.html
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset="utf-8">
<
title
>
title
>
<
script
>
function getData(){
//此时window.name已被修改为b.com/b.html页面设置的数据
var iframe = document.getElementById('proxy');
iframe.onload = function(){
var data = iframe.contentWindow.name;//获取iframe中window.name,也就是b.com/b.html页面设置的数据
alert(data);
}
iframe.src = 'about:block'; //赊着src的目的是为了让iframe与当前页面同源。src被修改后会重新load然后触发上面的onload
}
script
>
head
>
<
body
>
<
iframe
id="proxy" src="b.com/b.html" onload="getData()">
iframe
>
body
>
html
>
4.postMessage(HTML5中的XMLHttpRequest Level 2中的API)
window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 * 。
需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。
上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。在讨论第二种方法的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,而且也可以使用window.postMessage这个方法。下面看一个简单的示例,有两个页面
a.com/index.html
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset="utf-8">
<
title
>
title
>
<
script
>
var iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage('我是a.com/index.hmtl的消息', '*');
script
>
head
>
<
body
>
<
iframe
id="iframe" src="b.com/index.html">
iframe
>
body
>
html
>
b.com/index.html
<
script
>
[removed] = function(e){
e = e || event;
alert(e.data)
}
script
>
5.CORS(Cross-Origin Resource Sharing)
跨源资源共享(CORS)是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等),来限制哪些域的请求和哪些请求类型可以接受,而客户端在发起请求时必须声明自己的源(Orgin),否则服务器将不予处理,如果客户端不作声明,请求甚至会被浏览器直接拦截都到不了服务端。
前端:
function
getHello() {
var
xhr =
new
XMLHttpRequest();
xhr.open(
"post"
,
"https://b.example.com/Test.ashx"
,
true
);
xhr.setRequestHeader(
"Content-Type"
,
"application/x-www-form-urlencoded"
);
xhr.onreadystatechange =
function
() {
if
(xhr.readyState == 4 && xhr.status == 200) {
var
responseText = xhr.responseText;
console.info(responseText);
}
}
xhr.send();
}
服务端:(https://b.example.com/Test.ashx)
header(
'Access-Control-Allow-Origin:*'
)
*也可以指定具体的来源
6.JSONP
function
handleResponse(response){
console.log(
'The responsed data is: '
+response.data);
}
var
script = document.createElement(
'script'
);
script.src =
'http://www.baidu.com/json/?callback=handleResponse'
;
document.body.insertBefore(script, document.body.firstChild);
7.Nginx反向代理
前端调用的服务 /apis/xxxx/xxxx 和当前页是同源的,nginx来做一个代理到想要的地方,来实现跨域
nginx.conf 配置一个反向代理路径
location /apis {
rewrite ^.+apis/?(.*)$ /$
1
break
;
include uwsgi_params;
proxy_pass http:
//www.baicu.com/xxxx
}
一、什么是跨域?
在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。
什么是同源策略?
同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送
二、9种跨域解决方案
1、JSONP跨域
jsonp的原理就是利用
[removed]
标签没有跨域限制,通过[removed]
标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。1)原生JS实现:
服务端返回如下(返回时即执行全局函数):
2)jquery Ajax实现:
3)Vue axios实现:
后端node.js代码:
2、跨域资源共享(CORS)
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
浏览器将CORS跨域请求分为简单请求和非简单请求。
只要同时满足一下两个条件,就属于简单请求
(1)使用下列方法之一:
head
get
post
(2)请求的Heder是
Accept
Accept-Language
Content-Language
Content-Type: 只限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain
不同时满足上面的两个条件,就属于非简单请求。浏览器对这两种的处理,是不一样的。
简单请求
对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。
上面的头信息中,Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。
CORS请求设置的响应头字段,都以 Access-Control-开头:
1)Access-Control-Allow-Origin:必选
它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。
2)Access-Control-Allow-Credentials:可选
它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。
3)Access-Control-Expose-Headers:可选
CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader(‘FooBar’)可以返回FooBar字段的值。
非简单请求
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
预检请求
预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。请求头信息里面,关键字段是Origin,表示请求来自哪个源。除了Origin字段,"预检"请求的头信息包括两个特殊字段。
1)Access-Control-Request-Method:必选
用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT。
2)Access-Control-Request-Headers:可选
该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header。
预检请求的回应
服务器收到"预检"请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。
HTTP回应中,除了关键的是Access-Control-Allow-Origin字段,其他CORS相关字段如下:
1)Access-Control-Allow-Methods:必选
它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
2)Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。
3)Access-Control-Allow-Credentials:可选
该字段与简单请求时的含义相同。
4)Access-Control-Max-Age:可选
用来指定本次预检请求的有效期,单位为秒。
CORS跨域示例
1)前端设置:
原生ajax:
jquery ajax:
2)服务端设置:
nodejs代码
3、nginx代理跨域
nginx代理跨域,实质和CORS跨域原理一样,通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。
1)nginx配置解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。
2)nginx反向代理接口跨域
实现思路:通过Nginx配置一个代理服务器域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域访问。
nginx具体配置:
4、nodejs中间件代理跨域
node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。
1)非vue框架的跨域
使用node + express + http-proxy-middleware搭建一个proxy服务器。
前端代码:
中间件服务器代码:
2)vue框架的跨域
node + vue + webpack + webpack-dev-server搭建的项目,跨域请求接口,直接修改webpack.config.js配置。开发环境下,vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域。
webpack.config.js部分配置:
5、document.domain + iframe跨域
此方案仅限主域相同,子域不同的跨域应用场景。实现原理:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。
1)父窗口:(http://www.domain.com/a.html)
1)子窗口:(http://child.domain.com/a.html)
6、location.hash + iframe跨域
实现原理: a欲与b跨域相互通信,通过中间页c来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。
具体实现:A域:a.html -> B域:b.html -> A域:c.html,a与b不同域只能通过hash值单向通信,b与c也不同域也只能单向通信,但c与a同域,所以c可通过parent.parent访问a页面所有对象。
1)a.html:(http://www.domain1.com/a.html)
2)b.html:(http://www.domain2.com/b.html)
3)c.html:(http://www.domain1.com/c.html)
7、window.name + iframe跨域
window.name属性的独特之处:name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。
1)a.html:(http://www.domain1.com/a.html)
2)proxy.html:(http://www.domain1.com/proxy.html)
中间代理页,与a.html同域,内容为空即可。
3)b.html:(http://www.domain2.com/b.html)
通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
8、postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递
用法:postMessage(data,origin)方法接受两个参数:
data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
1)a.html:(http://www.domain1.com/a.html)
2)b.html:(http://www.domain2.com/b.html)
9、WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
1)前端代码:
2)Nodejs socket后台:
方式一 script标签跨域:这是由于script不受同源策略的限制 缺点:只能够get单向请求,无法获取服务端返回的数据 方式二 JSONP跨域:也是利用script标签天生可以跨域的原理 缺点:只能够get请求,不能注册success error函数,安全系数不高
一:同源策略
1.what's this
所谓同源是指,域名,协议,端口相同。当浏览器运行一个JS脚本时会进行同源检测,如果不同源是不能执行的。
2.源继承
来自about:blank,[removed]和data:URLs中的内容,继承了将其载入的文档所指定的源,因为它们的URL本身未指定任何关于自身源的信息。
3.变更源
变更源可以实现基础域相同的不同页面的跨域问题。
如:a.baidu.com/index.html 通过 iframe 引入 b.baidu.com/index.html ,但是a中的JS是不可以操作b中的内容的,但是可以通过修改源来实现。需要在a和b中都修改domain,即 document.domain = 'baicu.com'
注意:document.doamin的修改必须是当前域或者当前域的基础域,如在a中document.domain = 'b.baidu.com'是报错的
跨域方案
共有几种解决方案:
(1)document.domain + iframe
(2)动态创建script
(3)window.name + iframe
(4)window.postMessage
(5)CORS
(6)JSONP
(7)nginx代理
相关问题推荐
相对前几年来说,要高上不少了,毕竟入行的人也是越来越多了,基础的工作对应想要参与的人群基数越来越大,但是对于高端人才的需求还是很多,人才还是相对稀缺性的。所以,想要学web或者其他技术也一样,别等,别观望。web前端就业方向特别多包括web前端开发...
相对定位和绝对定位是定位的两种表现形式,区别如下:一、主体不同1、相对定位:是设置为相对定位的元素框会偏移某个距离。2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。二、特点不同1、相对定位:在使用相对定位时,无论是否进行移...
抓包(packet capture)就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析,可以得到有用的信息。目前流行的...
常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等
前端是目的就业前景非常不错的一个计算机技术,但是自学的话还是有一定难度的,网络上自学是碎片化的,同时互联网技术跟新换代快,自己的话比较吃力也学习不到最新的技术。
SSR就是一台服务器,可以利用 SSR 在远程的服务器上配置 SSR,使其能够成为 SSR 节点,这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR(简称 SSR)是 Shadowsocks 分支,在 Shadowsocks 的基础上增加了一些数据...
计算机培训方向比较多,建议找适合自己的方向选择培训编程类:JAVA、WEB、Python、C/C++、C#等测试类:软件测试运维类:云计算、网络安全设计类:UI设计、3D建模等
1、代码判断xAxis: {type: 'time',splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time,然后设置对应X轴......
HTML5 + CSS + JavaScript 开发 跨平台重用代码
采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。
iView UI、ioni、SUI
jQTouch
如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app(对应vue语法)taro(对应react) 或者纯原生 这个没有限制的,自己怎么舒服怎么来
因为可以运用在网页和小程序的开饭中,而且开源,用着便宜,企业都很喜欢
一、Visual Studio Code下载地址:https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...
jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个