HTML页面安全策略汇总(1)：同源策略、CORS、COOP、COEP

最新推荐文章于 2025-09-26 11:20:32 发布
原创 最新推荐文章于 2025-09-26 11:20:32 发布 · 1.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #javascript

本文主要介绍了HTML页面的安全策略，包括同源策略、CORS、COOP（跨源打开程序策略）和COEP（跨源嵌入器策略）。同源策略限制了不同源之间的API访问和数据共享，CORS用于解决资源跨域问题。COOP可以切断页面间的window连接，提供更强的同源安全性，而COEP则控制了非同源资源的引入。通过结合使用COOP和COEP，可以实现跨源隔离，提高页面安全性。

本文为HTML标准解读系列文章，其他文章详见这里。

在所有浏览器的安全策略中，同源策略是最基础、最核心的策略，很多其他衍生出来的策略都只是同源策略的“补丁”，包括本文提到的其他安全策略：CORS、COOP、COEP。

两个URL，只有在协议、域名、端口都相同的情况下才算是“同源”，对于不同源（以下称为“跨源”）的页面或者资源，同源策略会在以下层面给他们施加约束：

  1. js APIs的访问限制：有时候，我们可以通过window.contentWindow、window.parent、window.opener、window.top访问其他页面的window对象。但是当该window对象指向的页面是跨源的时候，该window对象的绝大部分的属性/方法是不可访问的。

    比如，尝试使用window.document访问跨源页面的DOM会报错：

    ❌：Uncaught DOMException: Blocked a frame with origin “https://XXX.com” from accessing a cross-origin frame.

    在跨源window对象上允许使用的为数不多的几个方法中，最有用的是window.postMessage()，这个方法允许你在跨源windows之间安全地进行交流。

  2. 数据隔离：对于indexedDB以及localStorage/sessionStr

最低0.47元/天 解锁文章
水鱼兄
关注
HTML网站安全与防护策略
吃不胖.
08-06 219
同时，由于网站本身对于用户输入数据的处理和存储，网站的安全问题也越来越受到关注。使用SSL和HTTPS协议：在确保SSL证书有效的前提下，我们可以使用HTTPS协议来保护用户输入数据，以确保用户的隐私数据不被黑客窃取。使用SSL证书监管：我们可以使用SSL证书监管工具，比如Google Webmaster Tools，以确保SSL证书的完整性和有效性。使用单点登录（SSO）：对于企业级网站，用户需要登录多个应用程序时，使用单点登录可以减少用户的登录次数，从而增强网站访问的安全性。
Nginx 常用安全头
weixin_43993310的博客
12-24 4947
nginx配置常用安全头
由一个报错引发的浏览器跨域隔离探索
qq_53058639的博客
02-21 1644
1.SharedArrayBuffer是用来和线程之间进行数据交换访问的高效方法，被大量应用，例如WebAssembly 就使用 Worker 模拟了多线程。SharedArrayBuffer等可以用来当作高精度的计时器，为Spectre漏洞带来了方便。2.为了降低Spectre漏洞带来的危害，SharedArrayBuffer等支持高精度时间计算的API及可能方便为spectre漏洞提供内存共享的API都需要在跨域隔离的状态下才能启用。
web安全入门（非常详细），零基础入门到精通，看这一篇就够了
最新发布
Spontaneous_0的博客
09-26 780
Web安全是保护Web应用免受网络威胁、确保数据保密性、完整性和可用性的重要领域。随着Web应用的普及，安全风险日益突出，涉及企业机密、用户隐私和系统稳定性。Web应用通常采用前端、后端和数据库三层架构，各层面临不同安全威胁，如XSS攻击、SQL注入等。常见漏洞还包括命令注入、数据泄露等，可能导致严重经济损失和声誉损害。加强Web安全防护对企业和个人用户都至关重要，需采取有效措施防范各类攻击。
HTML5安全介绍之内容安全策略（CSP）简介
09-28
前言：HTML5出现后，网络安全更加受到广泛的关注。Web对于网络安全有哪些改进？我们如何来面对越来越危险的网络欺诈和攻击？下面的文章谈到了W3C对于这个问题的最新解决方案。未来有机会的话，我会针对XSS、P3P、同源策略、CORS（跨域资源共享）和CSP进行关于HTML5内容
HTML5安全：CORS（跨域资源共享）简介
tempsitegoogle
07-09 897
前言：像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及，在百度或者Google上搜索CORS，搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍，让我等前端同学情何以堪（对比起来，用Google搜到的国外文章，基本都是跨域资源共享的介绍，说明了前端技术在国内外环境和发展的巨大差距）。 我之前《用HTML5实现人脸识别》这篇文章中提到了“Face.com实...
Web页面安全
A_991128a的博客
01-15 258
1、同源:如果两个url协议、域名和端口都相同，那么就称这两个URL同源。浏览器默认同源的两个源之间是可以相互访问资源和操作DOM的。两个不同的源之间想要互相访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。3、CSP(内容安全策略):Content-Security-Policy 的 HTTP Header 可以指示浏览器只信任指定白名单的JS源。即使通过XSS攻击注入了恶意的脚本文件，浏览器也不会执行。CSP旨在减少XSS攻击.
HTML5安全：内容安全策略（CSP）简介
weixin_34245749的博客
07-03 108
http://blog.youkuaiyun.com/hfahe/article/details/7727460 转载于:https://blog.51cto.com/tianxing/1670435
CORS（跨域资源共享）、同源安全策略
时光的时的博客
07-13 811
什么是CORS ？ CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。 什么是同源安全策略？ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选
漏洞修复：HTML5: CORS Functionality Abuse
CutelittleBo的博客
01-28 2595
描述 WebInspect has detected the target application supports “Origin: null” for CORS requests, making it vulnerable to CORS attacks. Cross-Origin Resource Sharing, commonly referred to as CORS, is a technology that allows a domain to define a policy for its
cors：Node.js CORS中间件
02-03
CORS是一个node.js软件包，用于提供可用于通过各种选项启用的 / 中间件。 安装 这是通过提供的模块。 使用完成 ： $ npm install cors 用法 简单用法（启用所有CORS请求） var express = require ( 'express' ) ...
【网络安全 | 浏览器安全机制】同源策略（Same origin policy）及跨域请求
热门推荐
等风来
08-24 1万+
同源策略（Same-origin policy）是一个浏览器安全机制，用于限制不同源之间的跨域操作。它是一种控制浏览器如何处理来自不同源的资源（例如文档、脚本、样式表和AJAX请求）的规则。在同源策略中，如果两个URL具有相同的协议（protocol），主机（host）和端口号（port），则它们被视为同源（origin）。当一个浏览器的两个tab页中分别打开来自百度和谷歌的页面，浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
内容安全策略(CSP) Html5
李孝贤
09-26 1943
前言:Cordova不支持内联事件,所以点击事件必须提取到js里面. 以下是从官网摘抄下来,希望对您有所帮助. 为了缓解大量潜在的跨站点脚本问题，Chrome的扩展系统已经纳入了内容安全策略（CSP）的一般概念。 这引入了一些相当严格的策略，默认情况下将使扩展更加安全，并为您提供了创建和实施管理可由扩展和应用程序加载和执行的内容类型的规则的功能。一般来说，CSP作为黑客/白名单机制，用于扩展程序加载或
浏览器安全之 Web 页面安全
u011705725的博客
08-10 977
浏览器安全分为 Web 页面安全、浏览器网络安全和浏览器系统安全。 1、为什么需要安全策略 假设这样一个场景：你先打开了个银行网站，并登录了，然后不小心打开了个恶意网站，由于没有安全策略，此时恶意网站完全可以对银行网站进行任意操作，比如更改银行网站的 DOM 元素，甚至获取 cookie 等信息，伪造接口请求等，可想而知是很恐怖的。所以在没有安全保障的 Web 世界中，我们是没有隐私的，因此需要安全策略来保障我们的隐私和数据的安全。 2、同源策略 说到安全策略，就不得不提同源策略，那何为同源策略呢？ 要理解
前端基础入门三大核心之HTML篇 —— 同源策略的深度解析与安全实践
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 1091
同源策略（Same-origin policy）是一种约定，由Netscape公司于1995年引入，旨在防止不同源的网页之间相互干扰和恶意操作。简而言之，该策略规定了浏览器允许脚本访问的资源范围，仅限于与当前网页同源的资源。所谓“同源”，指的是协议、域名和端口号完全相同。同源策略作为Web安全的基石，其重要性不言而喻。然而，在日益复杂的Web应用环境中，灵活而安全地处理跨域通信成为了前端开发者必备的技能。
html5安全风险详细,HTML5安全攻防详细解说
weixin_36398921的博客
06-19 589
HTML5安全攻防详细解说HTML5对旧有的安全策略进行了非常多的补充。HTML5为iframe元素增加了sandbox属性防止不信任的Web页面执行某些操作，例如访问父页面的DOM、执行脚本、访问本地存储或者本地数据库等等。以下是小编为大家搜索整理的HTML5安全攻防详细解说，希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网!一、iframe沙箱HTML5为iframe元素增加了...
浏览器安全——Web页面安全&浏览器网络安全(HTTPS)&浏览器系统安全
weixin_44915595的博客
12-16 6466
一、Web页面安全 同源和跨域： 同源： 页面中最基础、最核心的安全策略：同源策略（Same-origin policy）。浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。 什么是同源？如果两个页面拥有相同的协议、域名和端口，那么这两个页面具有相同的源。 同源政策：是浏览器提供的一个安全功能。是为了保证用户信息的安全，防止恶意的网站窃取数据。 同源策略主要表现在 DOM、Web 数据和网络这三个层面。 第一个，DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM
页面优化与安全
Cipuzp的博客
10-28 1246
页面加载 题目 从输入 url 到得到 html 的详细过程 浏览器根据 DNS 服务器得到域名的 IP 地址 向这个 IP 的机器发送 HTTP 请求 服务器收到、处理并返回 HTTP 请求 浏览器得到返回内容 window.onload 和 DOMConentLoaded 的区别 window.onload 在全部资源加载完后才会执行，包括图片、视频 DOMConentLoa...
同源策略与前端跨域
huyao的博客
07-27 1709
原文链接：https://segmentfault.com/a/1190000015597029  同源策略在web应用的安全模型中是一个重要概念。在这个策略下，web浏览器允许第一个页面的脚本访问第二个页面里的数据，但是也只有在两个页面有相同的源时。源是由URI，主机名，端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。 对于普遍依...
浏览器安全：同源策略与跨域访问深度解析
同源策略是Web浏览器为了保护用户信息安全而制定的一项核心安全策略。它规定，只有来自相同协议（通常是HTTPS或HTTP）、相同域名和相同端口的网页内容才能相互交互，如读取或修改页面数据。这一策略旨在防止恶意网站...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值