jsonp前传--同源策略

Last updated on September 2, 2025 pm

欠了好久的文章（之前一直想着要好好学安全的，但是玩起来就忘我了=_=），今天终于有时间能写写了。

什么是同源策略

之前刚刚学习的时候，那是做一个前后端分离的项目，有一串json数据要从后端提取，前端用的语言是 vue，使用了8080端口，后端为php语言，80端口。后来发现这个数据愣是找不到，一番检查之下，发现是同源策略的问题。

那么问题来了，为什么会有同源策略呢？其实简单的思考一下就能想到，同一个后端接口，我能访问到，别人也能访问到，这就构成了一个很严重的数据安全问题。

浏览器的同源策略规定，不同域的客户端脚本在没有明确授权的情况下，不能读写对方的资源

那么概念理解完了，所谓的“同源”是什么意思呢？

  • 相同协议
  • 相同域名
  • 相同端口号

同源策略允许的行为

  • 链接 <a> 标签
  • 重定向
  • 嵌入资源
    • <script src=””> 可以加载跨域的js 但是收到 cors 的限制
    • link 标签， 可以加载跨域的css
    • img video audio 等标签
    • iframe 标签，可以加载跨域的页面，但是无法使用 js 读取其内容
    • @font-face
    • <object> <embed> <applet>

合法绕过同源策略

通常使用 CORS 方法

CORS - 跨域资源共享

需要后端服务器的支持，服务器在响应头中设置 Access-Control-Allow-Origin 字段

前端 http://localhost

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div onclick="showJson()" id="text">测试</div>
</body>
<script>
  function showJson(){
    var xhr =  new XMLHttpRequest();
    
    xhr.onreadystatechange = function(){
      if(xhr.status=='200' && xhr.readyState== '4'){
        document.getElementById('text').innerHTML=xhr.responseText;
      }
    }
    xhr.open('GET','http://localhost:8888',true);
    xhr.send();
  }
</script>
</html>

后端： http://localhost:8888

1
2
3
4
5
<?php
header("Access-Control-Allow-Origin: http://localhost");
echo "1";

?>

JSONP 方式 - 目前已经过时

  • 利用 script 标签没有跨域限制的特性来实现。
  • 客户端定义一个回调函数，然后通过script标签的src来请求一个 api地址，并带上回调函数名，服务器将数据包装在这个回调函数中返回，浏览器接收到后就会执行这个函数
  • 缺点是只支持get请求，错误处理困难，并且存在严重的安全风险。

还有一些其他的方法如 ： websocket 、代理服务器等。

开发
#同源策略
jsonp前传--同源策略
https://blog.lixey.top/posts/f6aaed80/
Author
Lixiney
Posted on
September 1, 2025
Licensed under