同源政策/跨域与跨域解决策略/web安全攻击CSRF以及XSS

最新推荐文章于 2025-06-10 11:27:54 发布

望屿

最新推荐文章于 2025-06-10 11:27:54 发布

阅读量3.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：浏览器策略/HTTP/计网文章标签： web安全 csrf xss

本文链接：https://blog.csdn.net/darabiuz/article/details/122848161

本文深入探讨了浏览器的同源策略，包括其起源、影响及解决跨域的策略，如JSONP、CORS和webpack代理。同时，详细介绍了CSRF和XSS攻击的原理与防御措施，以及cookie和session的使用与区别，对Web安全有全面解析。

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

1.同源策略

1. 什么是同源

同源策略是浏览器安全的基石，当前网页的url和ajax请求地址的url必须同源，它要求协议、域名、端口号三者必须相同，只要有一处不同就属于跨域

2. 为什么要有同源策略

想象这样一个场景，你登录并信任了一个购物网站A，然后在没有退出的情况下登陆了恶意网站B，由于浏览器携带了cookie信息，那么B就可以冒充用户向A网站发送请求，比如购买物品之类的违背用户预期的恶意行为，带来严重影响，这其实也就是平时所说的CSRF攻击（具体见下文对于CSRF的介绍），由来同源策略以后，主要限制了以下三种行为

cookie、localstorage、indexDB的获取
- 可见上面的例子
dom的获取
- 想象这样一个场景：你收到一条短信说你的银行账户有问题，请你登录yinghang.com去查看情况，你进入网站，登录自己的账户之后发现一切正常，满意的退出，却不知，登录的是一个钓鱼网站,该钓鱼网站可以轻松获取正规网站yinhang.com的Dom，伪造出一模一样的界面
针对接口的请求的发送
- 服务端可响应接口请求，只不过被浏览器拦截

3. 同源策略带来的影响

随着互联网的发展，同源政策也越来越严格，非同源的话，但是对于一些合理的用途，带来了了很大的不方便，所以引出了下面的跨域解决方案

2.跨域解决策略

1. jsonp

Jsonp原理：网页中的img标签以及script标签发送请求是不受浏览器同源政策的限制的，同时一个页面可以引入多个script标签，这些标签可以互相访问彼此的数据，所以我们可以把请求地址放入其中一个script标签，在另一个script标签之中操作返回的数据
使用jsonp方法，后端需要直接返回一个立即执行的回调函数，并把res结果数据作为回调函数的参数传出，由于前端是用script标签发起的请求，所以返回了这个方法后相当于立马执行，前端需要使用和后端同名的回调函数来处理传递回来的数据
jsonp的一些小注意点
- 服务器返回的不会是一个变量, 而是一个函数的调用，服务器返回函数叫什么名称, 我们本地就必须定义一个叫什么名称的函数，所以可以在发送请求的url地址中，通过cb参数告诉服务器希望设定的回调函数名称cb=Dog
- 由于script标签默认是同步, 前面的script标签没有加载完数据, 后面的script标签就不会被执行,所以请求数据的script标签必须放到后面,可以通过JS动态创建script标签, 因为JS动态创建的script标签默认就是异步的,不用等到前面的标签加载完就可以执行后面的script标签

eg:
利用wamp在自己本机上搭建了一个服务器：地址为http://127.0.0.1:80
客户端请求资源的地址为http://127.0.0.1:63343

客户端代码：

<script>
    function Dog($data) {
   
   
        console.log($data);
    }
</script>
<script src="http://127.0.0.1/22jsonp.php?cb=Dog&name=peter&age=2"></script>
<script>
//或者js异步创建script标签
let oScript = document.createElement("script");
oScript.src = "http://127.0.0.1/22jsonp.php?cb=Dog&name=peter&age=2";
document.body.appendChild(oScript);

服务端代码(php)

<?php
$name=$_GET['name'];
$age=$_GET['age'];
$arr=array('name'=>$name,'age'=>$age);
//返回字符串，包含了 value 值 JSON 形式的表示。
$data=json_encode($arr);

//1. 拿到回调函数的名称
$cb=$_GET