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 安全的基础之一,掌握同源策略,可以帮助我们更好地处理跨域问题,提升代码的安全性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js同源策略详解 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • Django操作cookie的实现

    下面是关于Django操作cookie的实现的完整攻略。 什么是Cookie Cookie是一段很小的文本信息,由网站发送到访问者的浏览器中,并在之后的访问中由浏览器向服务器发送。Cookie通常用于存储用户的偏好设置、登录状态、购物车信息等。 Django中创建和读取Cookie Django使用HttpRequest对象来操作Cookie。其中,创建Co…

    JavaScript 2023年6月11日
    00
  • C#模拟http 发送post或get请求的简单实例

    下面我将为你详细讲解关于C#模拟http发送post或get请求的简单实例攻略。 一、引入 在介绍如何用C#模拟http发送post或get请求之前,我们先简单了解一下http请求。 在Web应用中,客户端与服务端通信的方式是通过HTTP请求和响应来完成的。而HTTP请求则分为GET和POST两种方式。GET请求一般用于向服务器获取数据,而POST请求一般用…

    JavaScript 2023年5月28日
    00
  • JavaScript es6中var、let以及const三者区别案例详解

    JavaScript es6中var、let以及const三者区别案例详解 var、let和const简介 在ES6以前,JavaScript的变量定义只有var一种方式。在ES6中新增了let和const两种定义变量的方式。 var定义的是一个可变的变量,它在函数作用域或全局作用域内都是有效的,并且可以被重新赋值。 let定义的是一个块级作用域的变量,它只…

    JavaScript 2023年6月11日
    00
  • JavaScript如何实现防止重复的网络请求的示例

    要实现防止重复的网络请求,可以采用以下几种方法: Promise + debounce Promise 是 ES6 中新增加的异步编程解决方案,它可以有效地避免回调地狱的问题,通过 Promise 的方式来实现网络请求防重。而 debounce 是一个防抖函数,用来控制网络请求的触发时间间隔,防止因为用户快速连续点击而发送重复的网络请求。 下面是示例代码: …

    JavaScript 2023年5月28日
    00
  • Java设置httponly cookie的实现示例

    下面我会为你详细讲解“Java设置httponly cookie的实现示例”的完整攻略,并且提供两个示例说明。 概述 HTTPOnly是一种用来增强Cookie安全性的标志,其作用是防止跨站脚本攻击(XSS)窃取用户的Cookie。如果设置了HTTPOnly标志,那么JavaScript脚本将无法读取到Cookie。 在Java应用程序中,使用HTTPOnl…

    JavaScript 2023年6月11日
    00
  • JavaScript里实用的原生API汇总

    JavaScript里实用的原生API汇总 什么是原生API? 在 JavaScript 中,原生 API 是指可以直接在浏览器中使用的 JavaScript 函数和对象。它们已经被封装到浏览器中了,可以直接使用,无需安装额外的库或框架。 以下是一些常见的原生 API: DOM API:用于操作文档对象模型(DOM)的 API。 BOM API:用于操作浏览…

    JavaScript 2023年5月28日
    00
  • 5个JavaScript经典面试题

    以下是对于“5个JavaScript经典面试题”的完整攻略: 1. 说一下对JS变量提升的理解 JavaScript 的变量和函数声明都会被提升到代码开头,这种行为被人们称为变量提升(hoisting)。在代码执行前,JavaScript 引擎会处理所有的函数和变量的声明。变量的值会被设置为 undefined,而函数的代码也会被提前进行编译。 下面是一个示…

    JavaScript 2023年5月28日
    00
  • javascript对XMLHttpRequest异步请求的面向对象封装

    那我来详细讲解一下“javascript对XMLHttpRequest异步请求的面向对象封装”的完整攻略。 首先需要了解的是什么是XMLHttpRequest?XMLHttpRequest是一个内置的对象,它可以发送HTTP、HTTPS请求,从而实现异步请求数据。面向对象封装指的是把XMLHttpRequest作为一个类,通过封装把它的属性和方法进行封装,以…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部