一个关联本地页面镜像的功能，我了解到这些最近在通过singlefile插件开发网站镜像关联功能时遇见一些问题进行记录。

最近在通过singlefile插件开发网站镜像关联功能时遇见一些问题进行记录。

问题

直接通过file协议打开本地镜像文件时，iframe中资源及链接无法通过file协议请求(链接跳转，及视频资源加载等)

由于上面那个原因，就需要在本地起一个服务来进行链接和资源的加载了，这样就解决上面的那个问题了。以前写过一个hmserve命令行工具，可以在本地启动服务预览本地资源。以前没有增加cors跨域设置，所以就出现下面这种情况，所以现在加上Access-Control-Allow-Origin头部即可。

当时hmserve没设置cors头部时，点击链接跳转时，如果不设置target: _top，iframe中的连接依旧被阻止加载。就是因为origin 为null,因为iframe开启沙盒或者iframe为base64直接渲染。

思考

针对上面的两个问题有了一些知识的学习和思考。

为什么file协议访问时，会有这些限制
为什么origin会为null,出现这个null我还以为是referer的原因，所以需要了解下referrer-policy
链接跳转有哪些不知道的秘密(target)
...

解惑

为什么file协议访问时，会有这些限制

浏览器默认禁止网页通过 file:// 协议直接访问本地文件系统，这是为了防止恶意网站窃取用户本地文件或执行未经授权的操作。

为什么 `Origin` 会变成 `null`？

请求从一个本地文件（如通过 file:// 协议打开的 HTML 页面）发起。浏览器认为 file:// 协议没有明确的域名、协议或端口（三者构成“源”）。
沙盒化的 <iframe> 或页面，页面被嵌入到设置了 sandbox 属性的 <iframe> 中，且未启用 allow-same-origin。沙盒化的 <iframe> 会被浏览器限制权限。

我们遇见的请求就是iframe中设置了sandbox，所以链接时origin就是null。

通过base64 url直接直接渲染的iframe和页面， data: 协议没有关联的源（如域名或端口）。

浏览器隐私或安全模式，部分隐私设置会限制来源信息的传递。
重定向或跨协议请求，若重定向后的请求来源无法被浏览器归类为有效源（如跨协议）
跨源请求的安全策略限制，服务器或浏览器启用了严格的跨域安全策略（如 Cross-Origin-Embedder-Policy: require-corp）。某些安全策略会强制要求请求携带明确的 Origin，否则将其视为 null。

referrer-policy

Referer 是浏览器自动添加的请求头，表示当前页面的 URL（即跳转前的页面）。一般用于连接跳转时携带跳转前站点的origin，path等信息。

Origin 是浏览器专门用于 CORS 检查的请求头，表示请求发起的来源（协议 + 域名 + 端口）。

referrer-policy是用来指定referer字段中包含哪些原站点信息。

no-referrer 整个Referer首部会被移除。访问来源信息不随着请求一起发送。
no-referrer-when-downgrade 在同等安全级别或安全级别提升的情况下（HTTP→HTTP、HTTP→HTTPS、HTTPS→HTTPS），在Referer中发送Origin、路径和查询字符串。而在目标的安全级别下降的情况下（HTTPS→HTTP、HTTPS→file）则不发送Referer标头。
origin 仅在Referer标头中发送Origin。例如https://example.com/page.html文档会将https://example.com/作为Referer。
origin-when-cross-origin 对于同源的请求，会发送完整的 URL 作为Referer，但是对于非同源请求仅发送Origin。
same-origin 对于同源的请求会发送 Origin、路径和查询字符串 作为Referer，但是对于非同源请求则不发送Referer信息。
strict-origin 在同等安全级别的情况下，发送文件的Origin作为Referer (HTTPS->HTTPS)，但是在降级的情况下不会发送 (HTTPS->HTTP)。
strict-origin-when-cross-origin（默认值）对于同源的请求，发送 Origin、路径以及查询字符串 。对于在相同安全级别的情况下（HTTPS→HTTPS）的跨源请求，仅发送Origin。在目标的安全级别下降的情况下（HTTPS→HTTP）则不发送Referer标头。
unsafe-url 无论是同源请求还是非同源请求，都发送完整的 URL（移除参数信息之后）作为Referer。

链接跳转有哪些不知道的秘密(target)

我们就参考target mdn来了解下target。

该属性指定在何处显示链接的 URL。

_self：当前页面(文档)加载。（默认）
_blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
_parent：当前浏览环境的父级浏览上下文。如果没有父级框架(当前所处的文档的父文档)，行为与 _self 相同。
_top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

当使用 target="_blank" 时，存在一定的安全风险，因为新打开的页面可以通过 window.opener 访问原页面的一些信息。为了避免这种风险，可以同时添加 rel="noopener noreferrer" 属性：

<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">在新窗口打开 </a>

往期年度总结

往期文章

专栏文章

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论， 支持一下博主~

公众号：全栈追逐者，不定期的更新内容，关注不错过哦！

一个关联本地页面镜像的功能，我了解到这些

问题

思考

解惑