参考答案:
同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制内容有:
但是有三个标签是允许跨域加载资源:
<img src=XXX>
<link href=XXX>
<script src=XXX>
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。
特别说明两点:
跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求,为什么 Ajax 就不会?因为归根结底,跨域是为了阻止用户读取到另一个域名下的内容,Ajax 可以获取响应,浏览器认为这不安全,所以拦截了响应。但是表单并不会获取新的内容,所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF,因为请求毕竟是发出去了。
这里只介绍几种开发中用的比较多的,几乎用不到的比如:
就不过多展开了
CORS 通信过程都是浏览器自动完成,需要浏览器(都支持)和服务器都支持,所以关键在只要服务器支持,就可以跨域通信,CORS请求分两类,简单请求
和非简单请求
另外CORS请求默认不包含Cookie以及HTTP认证信息,如果需要包含Cookie,需要满足几个条件:
Access-Control-Allow-Credentials: true
xhr.withCredentials = true
Access-Control-Allow-Origin不要设为星号
,指定明确的与请求网页一致的域名,这样就不会把其他域名的Cookie上传需要同时满足两个条件,就属于简单请求:
HEAD
、GET
、POST
,三者之一需要这些条件是为了兼容表单,因为历史上表单一直可以跨域
浏览器直接发出CORS请求,具体来说就是在头信息中增加Origin字段,表示请求来源来自哪个域(协议+域名+端口),服务器根据这个值决定是否同意请求。如果同意,返回的响应会多出以下响应头信息
1Access-Control-Allow-Origin: http://juejin.com // 和 Orign 一致 这个字段是必须的 2Access-Control-Allow-Credentials: true // 表示是否允许发送 Cookie 这个字段是可选的 3Access-Control-Expose-Headers: FooBar // 指定返回其他字段的值 这个字段是可选的 4Content-Type: text/html; charset=utf-8 // 表示文档类型
在简单请求中服务器至少需要设置:Access-Control-Allow-Origin
字段
比如 PUT 或 DELETE 请求,或 Content-Type 为 application/json ,就是非简单请求。
非简单 CORS 请求,正式请求前会发一次 OPTIONS 类型的查询请求,称为预检请求
,询问服务器是否支持网页所在域名的请求,以及可以使用哪些头信息字段。只有收到肯定的答复,才会发起正式XMLHttpRequest请求,否则报错
预检请求的方法是OPTIONS,它的头信息中有几个字段
OPTIONS请求次数过多也会损耗性能,所以要尽量减少OPTIONS请求,可以让服务器在请求返回头部添加
1Access-Control-Max-Age: Number // 数字 单位是秒
表示预检请求的返回结果可以被缓存多久,在这个时间范围内再请求就不需要预检了。不过这个缓存只对完全一样的URL才会生效
配置一个代理服务器向服务器请求,再将数据返回给客户端,实质和CORS跨域原理一样,需要配置请求响应头Access-Control-Allow-Origin等字段
1server { 2 listen 81; server_name www.domain1.com; 3 location / { 4 proxy_pass http://xxxx1:8080; // 反向代理 5 proxy_cookie_domain www.xxxx1.com www.xxxx2.com; // 修改cookie里域名 6 index index.html index.htm; 7 // 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用 8 add_header Access-Control-Allow-Origin http://www.xxxx2.com; // 当前端只跨域不带cookie时,可为* 9 add_header Access-Control-Allow-Credentials true; 10 } 11}
在 Vue 中 vue.config.js 中配置
1module.export = { 2 ... 3 devServer: { 4 proxy: { 5 [ process.env.VUE_APP_BASE_API ]: { 6 target: \'http://xxxx\',//代理跨域目标接口 7 ws: true, 8 changeOrigin: true, 9 pathRewrite: { 10 [ \'^\' + process.env.VUE_APP_BASE_API ] : \'\' 11 } 12 } 13 } 14 } 15}
Node + express
1const express = require(\'express\') 2const proxy = require(\'http-proxy-middleware\') 3const app = express() 4app.use(\'/\', proxy({ 5 // 代理跨域目标接口 6 target: \'http://xxxx:8080\', 7 changeOrigin: true, 8 // 修改响应头信息,实现跨域并允许带cookie 9 onProxyRes: function(proxyRes, req, res) { 10 res.header(\'Access-Control-Allow-Origin\', \'http://xxxx\') 11 res.header(\'Access-Control-Allow-Credentials\', \'true\') 12 }, 13 // 修改响应信息中的cookie域名 14 cookieDomainRewrite: \'www.domain1.com\' // 可以为false,表示不修改 15})); 16app.listen(3000);
WebSocket是HTML5标准中的一种通信协议,以ws://
(非加密)和wss://
(加密)作为协议前缀,该协议不实行同源政策,只要服务器支持就行
因为WebSocket请求头信息中有Origin字段,表示请求源来自哪个域,服务器可以根据这个字段判断是否允许本次通信,如果在白名单内,就可以通信
postMessage是HTML5标准中的API,它可以给我们解决如下问题:
跨域传递
postMessage 接受两个参数,用法如下:
(协议 + 域名 +端口
),也可以设置为*
,表示任意窗口,为/
表示与当前窗口同源的窗口原理就是通过添加一个<script>标签,向服务器请求JSON数据,这样不受同源政策限制。服务器收到请求后,将数据放在一个callback回调函数中传回来。比如axios。
不过只支持GET请求
且不安全
,可能遇到XSS攻击,不过它的好处是可以向老浏览器或不支持CORS的网站请求数据
1 let script = document.createElement('script') 2 script.type = 'text/javascript' 3 script.src = 'http://juejin.com/xxx?callback=handleCallback' 4 document.body.appendChild(script) 5 6 function handleCallback(res){ 7 console.log(res) 8 }
服务器返回并立即执行
1handleCallback({ code: 200, msg: 'success', data: [] })
指的就是对第三方使用 Cookie 的设置,在 Cookie 信息中添加 SameSite
属性
1Set-Cookie: widget_session=123456; SameSite=None; Secure
SameSite 有三个值:
strict
:严格模式,完全禁止使用Cookielax
:宽松模式,允许部分情况使用Cookie,跨域的都行
,a标签跳转,link标签,GET提交的表单none
:任何情况下都会发送Cookie,但必须同时设置Secure属性,意思是需要安全上下文,Cookie 只能通过https发送
,否则无效Chrome 80之前默认值是none,之后是lax
不过在最新的 Chrome91
版本中这个已经被移除
了,所以在 91之前的版本依然可以使用
如果 Chrome 或 Edge 版本大于91小于94的话,可以通过Chromium支持的command-line flag
1 --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure
并且官方说的到 94 版本会连 comman-line 也会移除
官方的说法是任由开发者控制这两个选项,容易被攻击
最近更新时间:2024-08-10
题库维护不易,您的支持就是我们最大的动力!