同源策略与跨域问题解决

2024-01-05 21:40:16

同源策略(Same-Origin Policy)

引用*上的一句话：

同源策略是指在Web浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有相同的URI、主机名和端口号，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

同源策略保证了用户信息的安全，因为Web应用程序广泛依赖于HTTP cookie
来维持用户会话，所以必须将不相关网站严格分隔，以防止丢失数据泄露。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

违背同源策略就是跨域。

如何解决跨域问题

1、JSONP

（1）概念

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。

（2）工作原理 在web网页上有些HTML标签天生具有跨域能力，比如： img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。 （3）使用 前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>
<body>
    用户名: <input type="text" id="username">
    <p></p>
    <script>
        //获取 input 元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        
        //声明 handle 函数
        function handle(data){
            input.style.border = "solid 1px #f00";
            //修改 p 标签的提示文本
            p.innerHTML = data.msg;
        }

        //绑定事件
        input.onblur = function(){
            //获取用户的输入值
            let username = this.value;
            //向服务器端发送请求 检测用户名是否存在
            //1. 创建 script 标签
            const script = document.createElement('script');
            //2. 设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3. 将 script 插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

后端代码：

const express = require('express');
const app = express();

//用户名检测是否存在
app.get('/check-username',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

这个案例的流程是，你在框中输入任意值，鼠标触发失去焦点事件后，通过发送ajax请求至服务端，经过对应路由的处理逻辑，返回客户端的是一个函数调用结果（handle函数），最后浏览器解析并执行该函数，获取其中data数据。

演示效果图：

2、CORS

（1）概念

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。 （2）工作原理 CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。 （3）使用 主要是服务器端的设置：

app.all('/cors-server', (request, response)=>{
    //设置响应头（请求源/头/方法）
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // 开放指定域名下的资源
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});

参考：浏览器同源政策及其规避方法 - 阮一峰的网络日志

跨源资源共享（CORS） - HTTP | MDN

码农公寓

同源策略(Same-Origin Policy)

如何解决跨域问题

1、JSONP

2、CORS

相关文章