js同源策略详解

JS同源策略详解：什么是同源？

在网站开发中，我们常常会遇到 JS 同源策略，那么什么是同源？为什么同源策略这么重要？这篇文章将为你一一解答。

同源（Same-origin）是由同一个协议（protocol）、主机名（host）和端口号（port）组成，若三者相同，则是同源。例如：

• https://www.example.com 和 https://www.example.com/blog 是同源。
• https://www.example.com 和 https://blog.example.com 不是同源。
• https://www.example.com 和 https://www.example.com:8080 不是同源。

JS同源策略的作用

同源策略可以保证一个网站的 JavaScript 代码只能与同源网站的接口进行交互，其它源被禁止访问，从而避免了恶意代码的攻击。

例如，一个页面上通过 iframe 引入了一个来自危险网站的恶意脚本，但由于这些代码所属的源与主页面源不一致，因此在同源策略的限制下，这些脚本无法对主页面进行窃取或篡改，保证了网站的安全性。

JS同源策略的限制：

1. 无法读取非同源网站的 Cookie、LocalStorage 和 IndexedDB
2. 无法向非同源网站发起 AJAX 请求
3. 无法获取非同源网站的 Document、Window 和 Location 对象
4. 无法通过 iframe 或 frame 加载非同源页面

JS同源策略的应用：

1. JSONP

JSONP 是一种跨域获取数据的技术，通过在页面中动态插入<script>标签，来加载包含 JSON 数据的脚本文件。JSONP 是基于函数调用来实现的，因为同一个页面内的 JavaScript 函数的调用是没有跨域限制的。

例如，我们可以通过如下代码，获取到http://www.example.com/jsonp接口返回的 JSON 数据：

function handleResult(data){
    console.log(data);
}

const script = document.createElement('script');
script.src = 'http://www.example.com/jsonp';
document.head.appendChild(script);

服务器返回的数据格式如下：

handleResult({ "result": "success" });

2. CORS

CORS（Cross-Origin Resource Sharing）是一个标准，它允许网页从不同的域访问其它域的资源。通过在服务端设置 Access-Control-Allow-* 头部的字段，可以允许其它域名的请求访问资源。

例如，在上传图片时，我们需要将图像转化为数据流，然后上传到服务器：

const canvas = c.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous'; // 允许跨域请求图像
img.src = 'https://www.example.com/image.jpg';
img.onload = function(){
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.drawImage(img, 0, 0);
    const imageData = canvas.toDataURL('image/png');
    fetch('https://www.example.com/upload', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `imageData=${encodeURIComponent(imageData)}`,
    }).then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
}

在服务器端，需要添加如下头部字段，允许来自任意域名的请求：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type

综上，JS同源策略作为 Web 安全的基础之一，掌握同源策略，可以帮助我们更好地处理跨域问题，提升代码的安全性。