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同源策略的限制:
- 无法读取非同源网站的 Cookie、LocalStorage 和 IndexedDB
- 无法向非同源网站发起 AJAX 请求
- 无法获取非同源网站的 Document、Window 和 Location 对象
- 无法通过 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 安全的基础之一,掌握同源策略,可以帮助我们更好地处理跨域问题,提升代码的安全性。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js同源策略详解 - Python技术站