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日

相关文章

  • javascript简单事件处理和with用法介绍

    接下来我将为你详细讲解“Javascript简单事件处理和with用法介绍”的完整攻略。 Javascript简单事件处理 在Web开发中,如何对用户的行为做出响应是非常关键的。Javascript通过事件处理机制,使得我们可以方便地响应用户的行为。 常见的事件类型 Javascript中常见的事件类型包括以下几种: click:点击事件 onload:页面…

    JavaScript 2023年6月11日
    00
  • 纯JS实现的读取excel文件内容功能示例【支持所有浏览器】

    下面是详细讲解“纯JS实现的读取excel文件内容功能示例【支持所有浏览器】”的完整攻略。 1. 准备工作 在使用JS读取excel文件之前,需要先引入一些第三方库,下面是这些库的名称和链接: SheetJS – 一个纯JS实现的excel文件读写库,支持xlsx、csv、ods等多种格式。 FileSaver.js – 一个提供了文件保存功能的JS库,用于…

    JavaScript 2023年5月27日
    00
  • 从js向Action传中文参数出现乱码问题的解决方法

    针对“从js向Action传中文参数出现乱码问题的解决方法”,会采取以下步骤: 步骤一:修改前端代码 在前端JS中使用encodeURIComponent()方法将参数进行编码,然后再传递给后端Action。 示例1:传递中文参数username var username = "张三"; var url = "example.c…

    JavaScript 2023年5月19日
    00
  • JS Ajax请求如何防止重复提交

    JS Ajax请求如何防止重复提交的攻略如下: 1. 基于状态锁的防重复提交 1.1 原理 基于状态锁的防重复提交原理是,在第一次请求(提交表单)时,将提交按钮禁用,等到本次请求成功后,再将提交按钮启用。期间再次点击提交按钮不产生任何反应,从而达到防止重复提交的目的。 1.2 代码示例 $(‘#form’).on(‘submit’, function(e) …

    JavaScript 2023年6月11日
    00
  • 如何处理vue router 路由传参刷新页面参数丢失

    处理Vue Router路由传参刷新页面参数丢失的攻略非常重要,下面是完整的步骤以及代码示例。 1. 使用query传参 在路由中使用query传参,是一种非常常见的方法。但是在使用query传参的时候,需要注意以下几点: 如果地址栏中存在多个参数,为了避免参数重叠,参数名最好使用前缀的方式,例如”user_id=12″可以更改为”user[id]=12″或…

    JavaScript 2023年6月11日
    00
  • JavaScript 常用函数

    现在我将为您详细讲解 JavaScript 常用函数的完整攻略。 一、JavaScript 常用函数介绍 JavaScript 提供了很多函数,可以让我们更加方便的处理数据和操作 DOM。在这里,我们将介绍一些常用的 JavaScript 函数,它们在日常工作中非常常用。 1. parseInt() parseInt() 函数可以将一个字符串解析成整数。它的…

    JavaScript 2023年5月18日
    00
  • js时间戳转为日期格式的方法

    当我们从服务端获取到时间戳后,通常需要将其转化为易读的日期格式以便显示在页面上。这个过程有很多方法实现,下面我们就来详细讲解一下“js时间戳转为日期格式的方法”,希望能对你有所帮助。 方法一:使用内置方法 在JavaScript中,Date对象拥有将时间戳转为日期格式的内置方法。以下是一段示例代码: const timestamp = 1605679610;…

    JavaScript 2023年5月27日
    00
  • JS异步文件上传(兼容IE8+)

    首先,让我们来了解一下什么是异步文件上传。 异步文件上传是指在上传过程中,不会阻塞页面的其他操作,而是在后台进行上传操作。这种方式提高了用户体验,同时也提升了网站性能。 现在,我们来了解一下如何使用 JavaScript 实现异步文件上传。 实现步骤 为 input 元素绑定 change 事件,获取用户选择的文件。 使用 FormData 对象封装文件数据…

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