同源策略安全锁只出不进，阿蒙？_同源支付锁流-优快云博客

本文链接：https://blog.youkuaiyun.com/helgeal/article/details/120394893

本文介绍了同源策略的基本概念及其如何阻止跨域请求，并详细解释了JSONP技术的工作原理，包括如何利用JSONP绕过同源策略限制进行跨域数据读取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同源策略

限制一个源的文档和js和另一个源的文档和js进行资源交互，是一种必要的安全措施。//是为了防止CSRF攻击--------利用用户的请求发起恶意的攻击

注意

1.端口：在ie浏览器中未将端口纳入同源策略检测中

2 授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），则不受同源策略限制。

同源源的定义

如果两个URL的‘协议’，‘域名’，‘端口’相同则被定义为同源，路径是可以不同的。

同源策略是如何阻止跨域请求的？

客户端发送请求-------被允许

服务器处理请求-------被允许

服务器响应请求-------被允许

浏览器获取响应回来的数据-------被同源策略拦截

同源策略限制不同源的交互

1 跨域的写操作：比如你想在你的页面中写一个其他网页的链接这明显是被允许的<a href='http://www.xxxxx.com'></a> 大部分情况下都是被允许的

2 跨域资源嵌入：比如说你想在你的网页中直接使用网上的图片，音乐，视频等资源你可以直接写入它的url地址就行了没有必要下载到本地 大部分情况是被允许的

3 跨域的读操作：比如说你想读取一个你随意打开的网站的数据，一般情况下是无法做到的超级无敌的大哥除外但常可以通过内嵌资源来巧妙的进行读取访问。比如JSONP

利用JSONP进行跨域的读取

1 用原生的javascript写一个极简的JSONP：

document页面 :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function json(data) {
            console.log(data);
        }
    </script>
    <script src="json.js"></script>
</body>
</html>

javascript页面

json({
    uname: '张三',
    age: 18,
    gender: 'male'
});

我们使用src属性避开了同源策略的限制，从窗户翻了进来但是要注意的是锁并没有向你打开。如果你试图在network页面当中寻找该资源你会发现你无法在XMLHttpReques的tab被找到而是在js的tab找到它这就说你你并没有发起ajax请求

缺点：只能发起GET请求。为什么这么说？当我们看JSONP的源码时会发现它的本质就是创建一个script标签加上src属性和api的地址将script标签插入head标签内。然鹅这种非正规的hack技术是由缺陷的scr只能发起get请求。这也就是为什么jsonp安全问题可以被保证他只能发起get请求无法对服务器端代码或者内容做更改

其他的库的JSONP

jQuery用$.ajax()对jsonp进行了封装。其本质是：

动态的生成script的标签嵌入老head标签内，请求完成后删除创建的script标签。优点：使得页面更加的美观不会突然的多出几个script标签，使代码的可读性增加。