跨域与跨站

lgq2016

已于 2023-06-07 10:41:36 修改

阅读量265

点赞数 2

文章标签：前端 javascript ajax 跨站跨域

于 2023-06-07 10:38:43 首次发布

原文链接：https://sugarat.top/bigWeb/browser/cros.html

版权

同源策略

浏览器有同源策略,如果两个URL的协议,域名,端口完全一致才是同源

有一个不一致就是跨域

示例

以该页面为例：https://sugarat.top/bigWeb/browser/cros.html

协议：https
域名：sugarat.top
端口：443 (https默认443，http默认80)

URL	是否同源	理由
https://sugarat.top	✅	协议,域名,端口均一致
http://sugarat.top:8080	❌	协议，端口不一致
https://sugarat.top:8080	❌	端口不一致
https://ep.sugarat.top	❌	域名不一致
https://imgbed.sugarat.top	❌	域名不一致

同源策略限制

1.DOM: 禁止操作非源页面的DOM与JS对象

这里主要场景是iframe跨域的情况，非同源的iframe是限制互相访问的

2.XmlHttpRequest: 禁止使用XHR对象向不同源的服务器地址发起HTTP请求，即不能发送跨域ajax请求这里主要场景是iframe跨域的情况，非同源的iframe是限制互相访问的

主要用来防止CSRF（跨站请求伪造）攻击

3.本地存储: Cookie、LocalStorage 和 IndexDB 无法跨域读取

非同源也有可以通信的方案，后文会做出介绍

为什么需要同源策略🤔

这里先列举反例

例1:如果iframe可以跨域，就会有以下攻击场景

一个假网站https://a.com，内部嵌套一个全屏的iframe标签指向一个银行网站 https://b.com
用户访问假网站除了域名，别的部分和银行的网站没有任何差别
开发者可以在假网站中注入输入事件监听脚本，跨域访问https://b.com节点中的内容
此时用户的输入都能被监听到，这样假网站就拿到了用户的账号密码

这样一次攻击就完成了

例2:如果ajax可以跨域，就会有以下攻击场景

用户在银行网站https://b.com进行了登录，网站使用cookie鉴权
攻击者直接从网站https://a.com发起一个指向银行网站的攻击请求，此跨域请求会携带上目标站点上的cookie
银行服务端验证用户cookie无误，返回对应的响应数据
此时就造成了用户信息泄露，用户是无法感知到的

这样一次攻击就完成了

采用同源策略限制跨域访问,主要就是为了用户信息的安全考虑

跨域

违反同源策略就是跨域

影响

最常见的两种跨域场景就是

ajax跨域
iframe跨域

跨域示例

ajax跨域

执行下面代码会在开发者工具中的 Console面板看到以下错误信息

Access to fetch at 'https://ep.sugarat.top/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

<body>
    <button id="btn">click me</button>
    <script>
        const $btn = document.getElementById('btn')
        $btn.onclick = function () {
            fetch('https://ep.sugarat.top/', {
                method: 'get'
            })
        }
    </script>
</body>

iframe跨域

无法跨域访问iframe中的DOM元素信息

<body>
    <iframe src="https://sugarat.top/" width="100%" height="1000px" frameborder="0"></iframe>
        
    <script>
        const iframe = document.getElementsByTagName('iframe')[0]
        console.log(iframe.contentWindow.document.children[0].outerHTML)
        // <html><head></head><body></body></html>
    </script>
</body>