web之同源策略与跨域——(憨憨敬礼)

最新推荐文章于 2024-01-26 16:32:21 发布

zhutubao

最新推荐文章于 2024-01-26 16:32:21 发布

阅读量427

点赞数

原文链接：https://segmentfault.com/a/1190000015764619

版权

web之同源策略与跨域(简易整理)

今天学到了些日后能吹牛用的。。。

文章目录

web之同源策略与跨域(简易整理)

1,首先来回忆一下什么是URL。

(Uniform Resource Locator) ,统一资源定位符,说白就是网址,个人理解成一个地址.

域名拆分:

.com顶级域 zhutubao.com一级域 www.zhutubao.com二级域

http://www.sougou.com 这是域名
http://168.103.123.465 这是IP
https://editor.csdn.net/md?articleId=104381385
以上三种都是URL，也就都是网址

完整的、带有授权部分的普通统一资源标志符语法看上去如下：

2,协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名?参数=值#标志

eg:https://user:password@www.zhutubao.com:443/dir/index.html?id=1#ch=1

3, 源origin(橘子平台) ?

源包括当前页面的 协议、域名、端口号。
http(协议): //www.zhutubao.com(域名):80(端口号)
（www是二级域名）

4,同源?

同源就是当协议、域名、端口号一致时就是同源。同源策略是浏览器的一个安全机制。不同源的客户端脚本在没有明确授权下，不能读写对方的资源。是浏览器为了安全性考虑一种非常重要的策略，
eg1：
http://www.a.com/a.js
http://www.a.com/b.js
域名相同文件夹不同,允许通信.
eg2:
https://www.a.com/a.js
http://90.34.78.21/b/b.js
这里数字即为对应的ip地址,但不允许通信.
eg3:
https://www.a.com/a.js
https://edu.a.com/a.js
两个二级域名不同,不能通信

(没买过域名,不懂啊,淦~~)

5,有什么用呢??

浏览器安全性，用户安全性，不允许不同域名互相访问。

6,跨域？

某些代码可以实现跨域，比如img标签，js，css通过某些手段可以实现跨域。
eg：img src=’图片位置‘ script src=’‘。
src 的特点，可以访问其他域名内的信息。

7,同源策略会限制以下三种问题。

Ajax请求无效问题。
ajax在同源策略下请求无效是请求发不出去还是接受不到？？
答，接受不到，浏览器拒绝
没有办法获取DOM
从DOM出发点出发都无效了
cookie、localstorage、indexedDB无法获取
在浏览器中存储的缓存信息无法获取

8,解决跨域问题

直接解决跨域，协议，域名，端口。是服务器的应用，前端无法解决
1，JSONP json +padding
script 的src 属性去请求资源，url地址拼接callback参数
jsonp.html的代码,src请求跨域地址并传值callback

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function fn(data){
            console.log(data);
        }
    </script>
    <script type="text/javascript" src='http://192.168.33.51/seciton02_jsonP.php?callback=fn'></script>
</head>
<body>
    <h1>区域1的页面_jsonP演示</h1>
</body>
</html>

php代码接受到callback的值并拼接

<?php 
    // echo "alert('天气不错哦')";
    $callBack = $_GET['callback'];
    $arr = array(
        'name' =>'西兰花' ,
        'color' =>'red' 
         );
    echo $callBack."(".json_encode($arr).")";
?>

2，CORS

允许浏览器想跨域服务器发出xhr请求,突破ajax使用限制
原理:需要浏览器和服务器同时支持,在头部信息添加附加的头信息(请求)
条件:IE 不能低于10
1,2两者差别:
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。
JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

3,HTML5跨文档通信API window.postMessage
HTML5中最酷的新功能之一就是跨文档消息传输。下一代浏览器都将支持这个功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。
代码如下,a.com 给b .com发送hello world
a的代码

//a.com
var popup = window.open('http://bbb.com', 'title');打开窗口
popup.postMessage('Hello World!', 'http://bbb.com');
//向b发送信息

b的代码

//b.com
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
  if (event.origin !== 'http://aaa.com') return;//判断发消息的窗口的源是否是aaa网站的源，这里的event.origin和postMessage()方法中的origin不一样！！
  if (event.data === 'Hello World') {
      event.source.postMessage('Hello', event.origin);//这里event.origin指向aaa网站的源即消息接收的窗口的源
  } else {
    console.log(event.data);
  }
}

4，降域 iframe窗口
当两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain来实现iframe窗口相互访问或设置cookie。降域方式只适用于同一站点下不同子域名共享cookie或者iframe页面中嵌套的子域名页面之间的访问。降域不适用访问LocalStorage 和 IndexedDB，postMessage()方法可访问LocalStorage用改写document.domain+iframe的方法来获取目标域数据。

举例来说，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，子域名不同默认情况下会被同源策略阻止访问。只要将两个页面都设置相同的document.domain，两个网页就可以共享Cookie或在iframe窗口下相互访问。
document.domain = ‘example.com’;

Iframe.contentWindow.document 获取窗口内部的节点

9,我吐

前面还能仔细找找资料,后面有些为了完成博客有些敷衍了事,
我淦.
前面理解的还可以 ,后面代码部分需要时间练习,博客模糊不清的会后续补充.
还在学习,自我理解梳理不正确是必然,

10,原文出处:

https://segmentfault.com/a/1190000015764619
https://www.jianshu.com/p/dbd8f410985d
https://baike.baidu.com/item/域名/86062?fr=aladdin
https://baike.baidu.com/item/统一资源定位系统?fromtitle=url&fromid=110640