前端基础入门三大核心之HTML篇 —— 同源策略的深度解析与安全实践

前端基础入门三大核心之HTML篇 —— 同源策略的深度解析与安全实践

    • 一、同源策略:定义与起源
      • 1.1 定义浅析
      • 1.2 何为“源”?
      • 1.3 起源与意义
    • 二、同源策略的运作机制
      • 2.1 限制范围
      • 2.2 安全边界
    • 三、跨越同源的挑战与对策
      • 3.1 JSONP
      • 3.2 CORS
      • 3.3 postMessage
    • 四、实战技巧与安全最佳实践
      • 4.1 避免全局污染
      • 4.2 CORS策略细化
      • 4.3 安全地处理跨域数据
    • 五、排查与解决方案
      • 5.1 CORS错误处理
      • 5.2 跨域请求失败
    • 结语:同源策略与跨域的平衡之道

在浩瀚的Web开发海洋中,"同源策略"如同一位沉默的守护者,默默维护着数据的安全与隐私。它是浏览器设计的核心原则之一,影响着每一个前端开发者的工作日常。本文将带你深入探索同源策略的内涵、缘起、运作机制及其在现代Web开发中的重要性,同时结合实例剖析如何在实际工作中妥善处理同源策略带来的限制,以及如何在不违背安全原则的前提下实现跨域通信。无论你是前端新手还是经验丰富的开发者,本文都将助你提升安全意识,增强实战技能。

一、同源策略:定义与起源

1.1 定义浅析

同源策略(Same-origin policy)是一种约定,由Netscape公司于1995年引入,旨在防止不同源的网页之间相互干扰和恶意操作。简而言之,该策略规定了浏览器允许脚本访问的资源范围,仅限于与当前网页同源的资源。所谓“同源”,指的是协议、域名和端口号完全相同。

1.2 何为“源”?

  • 协议:HTTP、HTTPS、FTP等。
  • 域名:example.com、sub.example.com。
  • 端口号:默认端口(HTTP: 80, HTTPS: 443)无需显式指定,否则需明确。

1.3 起源与意义

同源策略的诞生是对早期互联网安全威胁的直接回应,尤其是跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。它通过限制脚本的权限,有效降低了网站被恶意攻击的风险。

二、同源策略的运作机制

2.1 限制范围

同源策略主要影响了JavaScript的以下操作:

  • 读写Cookie:只能访问同源的Cookie。
  • DOM操作:只能修改同源页面的DOM。
  • Ajax请求:默认情况下,XMLHttpRequest仅允许同源请求。

2.2 安全边界

理解同源策略的关键在于识别哪些操作会受到限制,哪些则不受约束。例如,<img src=""><link><script src=""> 等资源加载不受同源策略限制,但JavaScript却无法直接访问这些资源的内容。

三、跨越同源的挑战与对策

3.1 JSONP

作为早期跨域解决方案,JSONP(JSON with Padding)利用<script>标签的跨域特性实现数据获取。尽管简单,但存在安全风险,如注入攻击。

function handleResponse(data) {console.log('Received data:', data);
}const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.head.appendChild(script);

3.2 CORS

跨源资源共享(Cross-Origin Resource Sharing,CORS)是现代Web跨域通信的标准方式。服务器通过设置Access-Control-Allow-Origin等响应头,来允许特定源的请求。

服务器端设置示例(Node.js Express):

const express = require('express');
const app = express();app.use((req, res, next) => {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");next();
});// 更多路由处理...

3.3 postMessage

HTML5引入的postMessage方法允许来自不同源的脚本采用安全的方式进行通信,适用于iframe、Web Workers等场景。

发送端:

window.postMessage('Hello from source', 'https://target.example.com');

接收端:

window.addEventListener('message', (event) => {if (event.origin !== 'https://source.example.com') return;console.log('Received:', event.data);
});

四、实战技巧与安全最佳实践

4.1 避免全局污染

在使用JSONP或postMessage时,确保函数名或处理逻辑不会被恶意覆盖。

4.2 CORS策略细化

  • 仅允许信任的源访问。
  • 使用Access-Control-Allow-Methods限制允许的HTTP方法。
  • 利用Access-Control-Allow-Headers控制自定义请求头。

4.3 安全地处理跨域数据

  • 验证接收到的数据,避免XSS攻击。
  • 使用HTTPS以加密通信,防止数据被窃取或篡改。

五、排查与解决方案

5.1 CORS错误处理

面对常见的CORS错误(如No 'Access-Control-Allow-Origin' header is present on the requested resource),首先检查服务器是否正确设置了响应头。

5.2 跨域请求失败

当跨域请求失败时,利用开发者工具的网络面板分析请求详情和响应头,确认是否有遗漏的CORS配置或安全策略冲突。

结语:同源策略与跨域的平衡之道

同源策略作为Web安全的基石,其重要性不言而喻。然而,在日益复杂的Web应用环境中,灵活而安全地处理跨域通信成为了前端开发者必备的技能。通过本文的深入解析与实战指导,希望能帮助你更好地掌握同源策略的本质,以及如何在保障安全的同时,实现高效、可靠的跨域数据交换。未来,随着Web标准的演进,跨域通信的技术也将更加丰富和强大,但不变的是我们对安全的坚守与追求。欢迎在评论区分享你的见解与经验,共同探讨Web安全的无限可能。


欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。


推荐:DTcode7的博客首页。
一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟!


【专栏导航】

  • 《微信小程序相关博客》:结合微信官方原生框架、uniapp等小程序框架,记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
  • 《Vue实战相关博客》:详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅。
  • 《HTML网站开发相关博客》:以实战为线素,逐步深入HTML开发各个环节,掌握web前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
  • 《前端基础入门三大核心之html相关博客》:前端基础入门三大核心之html板块的内容,入坑前端或者辅助学习的必看知识。
  • 《前端基础入门三大核心之JS相关博客》:前端JS是JavaScript语言在网页开发中的应用,负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客,共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等,JS使页面能够响应用户行为,实现数据动态展示和页面流畅跳转,是现代Web开发的核心。
  • 《前端基础入门三大核心之CSS相关博客》:介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法,同时收集精美的CSS效果代码,用来丰富你的web网页。
  • 《canvas绘图相关博客》:Canvas是HTML5中用于绘制图形的元素,通过JavaScript及其提供的绘图API,开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力,使得前端绘图技术更加丰富和多样化。
  • 《算法系列相关博客》:算法与数据结构学习总结,通过JS来编写处理复杂有趣的算法问题,提升你的技术思维。
  • 《python相关博客》:Python,简洁易学的编程语言,强大到足以应对各种应用场景,是编程新手的理想选择,也是专业人士的得力工具。
  • 《sql数据库相关博客》:SQL数据库:高效管理数据的利器,学会SQL,轻松驾驭结构化数据,解锁数据分析与挖掘的无限可能。
  • 《IT信息技术相关博客》:作为信息化人员所需要掌握的底层技术,涉及软件开发、网络建设、系统维护等领域的知识。
  • 《信息化技能面试宝典相关博客》:涉及信息化相关工作基础知识和面试技巧,提升自我能力与面试通过率,扩展知识面。
  • 《前端开发习惯与小技巧相关博客》:罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
  • 《AIGC相关博客》:AIGC、AI生产力工具的介绍,例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
  • 《photoshop相关博客》:基础的PS学习记录,含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
  • 《日常开发&办公&生产【实用工具】分享相关博客》:分享介绍各种开发中、工作中、个人生产以及学习上的工具,丰富阅历,给大家提供处理事情的更多角度,学习了解更多的便利工具,如Fiddler抓包、办公快捷键、虚拟机VMware等工具。

吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/14768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VUE 创建组件常见的几种方式

在 Vue.js 中&#xff0c;组件的创建和使用通常遵循以下三种方法&#xff1a; 1. 全局组件 全局组件是通过 Vue.component() 方法创建的&#xff0c;注册后的组件可以在任何新创建的 Vue 实例&#xff08;包括根实例&#xff09;的模板中使用。 Vue.component(my-component,…

【MySQL精通之路】系统变量-持久化系统变量

MySQL服务器维护用于配置其操作的系统变量。 系统变量可以具有影响整个服务器操作的全局值&#xff0c;也可以具有影响当前会话的会话值&#xff0c;或者两者兼而有之。 许多系统变量是动态的&#xff0c;可以在运行时使用SET语句进行更改&#xff0c;以影响当前服务器实例的…

[AI Google] 10个即将到来的Android生态系统更新

新的体验带来了更强的防盗保护、手表电池寿命优化&#xff0c;以及对电视、汽车等的娱乐功能改进。 昨天&#xff0c;我们分享了Android如何以人工智能为核心重新构想智能手机。今天&#xff0c;我们推出了Android 15的第二个测试版&#xff0c;并分享了更多我们改进操作系统的…

java原型模式 (Prototype Pattern) 介绍

原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它通过复制现有的实例来创建新对象&#xff0c;而不是通过实例化类来创建对象。这个模式允许你创建对象时避免复杂的初始化步骤&#xff0c;并且能够动态地创建对象的副本。 原型模式的关键…

Python导入Shapefile到PostGIS的常见问题和解决方案

导入Shapefile到PostGIS的常见问题和解决方案 先决条件&#xff1a; 已经拥有含有GDAL的python环境&#xff08;如果大家需要&#xff0c;我可以后面出一片文章 问题一&#xff1a;QGIS连接到PostGIS数据库失败 错误描述&#xff1a; Connection to server at &quo…

Vue3实战笔记(40)—组件逻辑复用:自定义Hooks的完全指南

文章目录 前言一、状态管理二、副作用处理三、 生命周期钩子总结 前言 自定义Hooks是Vue3中的一个重要特性&#xff0c;它允许您创建可重用的函数&#xff0c;以便在组件之间共享状态和逻辑。以下是一些关于自定义Hooks的常见用法。 一、状态管理 使用reactive或ref来创建响应…

题解:CF1969B(Shifts and Sorting)

题解&#xff1a;CF1969B&#xff08;Shifts and Sorting&#xff09; 一、题目翻译 给定一个二进制字符串&#xff0c;你可以将其中一个子段&#xff08;注意不是子串&#xff0c;是连续的&#xff09;进行循环移位——将最后一个字符放在第一个字符之前&#xff0c;其代价为…

2024 CCF国际AIOps挑战赛·赛题与赛制解读

本文根据本届挑战赛程序委员会主席、中国科学院计算机网络信息中心副研究员裴昶华在2024 CCF国际AIOps挑战赛线下宣讲会上为《2024 CCF国际AIOps挑战赛赛题与赛制》的分享整理而成&#xff0c;全文分为挑战赛背景介绍、题目简介、流程说明和评分规则等部分&#xff0c;最后简要…

别对我动心短视频:成都鼎茂宏升文化传媒公司

别对我动心短视频&#xff1a;时代的爱情哲学与心理探索 在短视频的海洋里&#xff0c;"别对我动心"这样的标题&#xff0c;如同一颗石子投入平静的湖面&#xff0c;激起了层层涟漪。它不仅仅是对一段情感的拒绝&#xff0c;更是一种现代人情感态度的表达&#xff0…

14 vue学习:透传Attributes

Attributes 继承 “透传 attribute”指的是传递给一个组件&#xff0c;却没有被该组件声明为 [props]或 [emits]的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。 当一个组件以单个元素为根作渲染时&#xff0c;透传的 attribute 会自动被添加到根元…

【FAQ】HarmonyOS SDK 闭源开放能力 —Account Kit(2)

1.问题描述&#xff1a; 怎么判断登录的华为帐号有变动&#xff1f; 解决方案&#xff1a; 华为帐号登录成功后会返回唯一标识OpenID和UnionID&#xff0c;如果切换不同的华为帐号登录&#xff0c;这个唯一标识会变。 OpenID是华为帐号用户在不同类型的产品的身份ID&#x…

JWT Authorization header using the Bearer scheme

文章目录 引言I Json web token (JWT)1.1 JWT1.2 authentication_schemes(token authentication)1.3 SecurityScheme的实现II Swagger添加bearer token参数2.1 Swagger效果2.2 .net core Swagger实现Bearer Authentication2.3 java OpenAPI 3.0实现Bearer Authentication2.4 …

【全部更新完毕】2024长三角数学建模A题思路代码文章教学-“抢救”落水手机

文章摘要部分&#xff1a; “抢救”落水手机 摘要 文章主要探讨了如何科学地处理和搜索在水体中意外掉落的物品&#xff1a;华为 Mate 60 Pro手机和居民身份证。本文基于物理模型和动力学分析&#xff0c;为不同水体环境中的掉落物品提供了详尽的搜索策略和打捞建议。 本文…

[安洵杯 2019]crackMe

直接就退出程序了 找到关键函数了&#xff0c;好像用到了 hook 还有一个 嘿嘿&#xff0c;看着就是像 base64 只是 补‘’改成了‘ &#xff01; ’ 交叉引用啊&#xff0c;翻到一个应该是最后比较函数 1UTAOIkpyOSWGv/mOYFY4R!! 那一坨对 a1数组的操作没看懂 先总结一下就是…

SpringBoot搭建Eureka注册中心

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 1、Spring-Cloud Euraka介绍 Spring-Cloud Euraka是Spring Cloud集合中一…

vue3 + vite 实用依赖与配置

mark一下日常 vue3 vite 项目配置 实用依赖与配置 1. amfe-flexible&#xff08;2&#xff09;安装&#xff08;3&#xff09;使用 2. postcss-pxtorem&#xff08;1&#xff09;介绍&#xff08;2&#xff09;安装&#xff08;3&#xff09;使用 3. autoprefixer&#xff08;…

Convolutional Occupancy Networks【ECCV2020】

论文&#xff1a;https://arxiv.org/pdf/2003.04618 代码&#xff1a;GitHub - autonomousvision/convolutional_occupancy_networks: [ECCV20] Convolutional Occupancy Networks 图 1&#xff1a;卷积占据网络。传统的隐式模型 (a) 由于其全连接网络结构&#xff0c;表现能力…

继承初级入门复习

注意&#xff1a;保护和私有在类中没有区别&#xff0c;但是在继承中有区别&#xff0c;private在继承的子类不可见&#xff0c;protect在继承的子类可见 记忆方法&#xff1a;先看基类的修饰符是private&#xff0c;那都是不可见的。如果不是&#xff0c;那就用继承的修饰和基…

对this对象的理解

This 是指函数被调用是的上下文&#xff0c;它指向最后一次调用这个方法的对象。this的值并不是在函数定义时确定的&#xff0c;而是在函数被调用时确定的。在实际开发中&#xff0c;this 的指向一般可以通过四种调用模式来判断。 1、函数调用 当一个函数不是一个对象的属性时…

使用keepalived实现mysql主从复制的自动切换

使用Keepalived实现MySQL主从复制的自动切换通常涉及配置一个虚拟IP&#xff08;VIP&#xff09;作为MySQL服务器对客户端的访问点。Keepalived会监控MySQL主服务器的健康状况&#xff0c;如果主服务器宕机&#xff0c;Keepalived会自动将虚拟IP移至备用服务器&#xff0c;从而…