在新窗口中打开页面?小心有坑

2024-01-29 04:59
文章标签 页面 小心 打开 新窗口

本文主要是介绍在新窗口中打开页面?小心有坑,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

为什么80%的码农都做不了架构师?>>>   hot3.png

1. 背景

产品需求来啦:点击页面上某个东西,要在新窗口中打开一个页面,注意!要在新窗口中打开。你呵呵一笑,太简单了:

  1. 打开的页面地址是固定的?直接a标签加上target="_blank"属性搞定。
  2. 打开的页面地址是动态计算的?使用js进行window.open(url)搞定。

如果你人品比较好,你的页面可以顺利地运行到下线为止。但如果你脸比较黑,可能会遇到以下问题:

  1. 用户投诉:我在你们页面上进行的操作,怎么账号被盗了!!
  2. 用户吐槽:页面卡得不行了。。。

WTF?

2. 来两个例子

2.1 例子1:

步骤:

  1. 进入这个微博帖子页面: http://blog.sina.com.cn/s/blog_c3a321040102wdq4.html
  2. 点击正文的”点击有惊喜哦“链接。
  3. 看了下新打开的页面,什么惊喜都没有啊。。。回到上一个刚才的页面窗口。
  4. 嗯?登录态丢了,重新登录一下吧。
  5. 靠,中招了!
2. 例子2:

步骤:

  1. 使用chrome打开这个页面: http://coolriver.github.io/blog/pages/openerTest/origin.html, 你会看到有5个可点的链接,还有一个鬼畜的随机数。
  2. 点击第一个链接,也就是‘target _blank’字样的那个。
  3. 新页面显示'HACK成功,再看看上个TAB?'。然后你忍不住看回上一个页面。
  4. 看到第一行鲜红的提示:'你被HACK了啊!这个页面的地址已经变了!',同时,最下面一行的鬼畜随机数时不时地有些卡顿。

3. 新窗口中打开页面的问题

用简单地方式(背景中提到的)在新窗口中打开新页面会有一些问题。问题分为安全和性能两方面。机智的读者会发现上面的两个例子中分别复现了安全和性能问题(讲道理,第2个例子同时展现了安全和性能问题)

3.1 安全问题

使用a标签的target="_blank"属性,或者window.open(url)在新窗口中打开页面时,会存在潜在的安全问题。为什么呢?这个锅是一个叫opener的全局对象的锅。

回到例子1,可以自己动手尝试,在新打开的那个页面中,打开console, 输入opener,可以看到这个对象,正是打开本页面的父页面的窗口对象。如果父页面和新开窗口中的页面是不同域名的,浏览器会禁止新窗口访问opener中的内容。但是有一个操作除外:可以通过window.opener.location = newURL来重写父页面的url,即使与父窗口的页面不同域。

例子1就是利用这个方式,将父窗口的链接悄悄地替换成了钓鱼页面的地址。刚好父窗口的原始页面没有做防止被iframe嵌入,可以简单地通过iframe做一个极真实的钓鱼页面。如果不看url根本区分不出来是钓鱼页面(父窗口刚打开的时候好好的,谁会关注到这个url居然悄悄地变了呢?)

3.2 性能问题

除了安全问题,例子2中还展示了简单地在新窗口中打开页面的性能问题。源页面中鬼畜的随机数之所以会卡顿,也是受新打开的窗口中的页面影响。在例子2中,新页面中有一个定时器,每隔一段时间就有一个持续的循环,这个循环在阻塞新页面本身的js线程的同时,也阻塞了opener(也就是打开新页面的父窗口)里的js线程。如果再搞得狠一些,父窗口中的页面交互可以寸步难行。

为什么新窗口中的页面会影响父页面的线程呢?chrome不是每个标签页一个单独的进程?然后进程内包含若干线程吗?

确实,chrome有不同的标签页面使用不同进程和线程,但是有个例外,通过a标签的target="_blank"属性,或者window.open(url)在新窗口中打开页面, 会与父窗口共用进程和线程。为什么呢?还是因为opener。。。。因为opener里有DOM信息。两个进程中同时hold住了DOM信息,在多进程下很难道控制,所以干脆就放在一个进程里了。这个算是chrome的一个小缺陷(firefox也有,ie没有),不过chrome目前正在跟进和优化这里,详情可参考这里。

4. 解决方案

4.1 使用noopener属性

通过在a标签上添加这个noopener属性,可以将新打开窗口的opner置为空。特点:

  1. 可解决除IE外的安全问题,和所有现代浏览器的性能问题
4.2 window.open并设置opner为空
var otherWindow= window.open();
otherWindow.opener = null;
other = 'http://newurl';

特点:

  1. 可解决所有除safari外,所有浏览器的安全问题,无法解决性能问题
4.3 新建Iframe中打开新窗口,然后关掉iframe

特点:

  1. 可解决safari下的安全问题,无法解决性能问题
4.4 推荐方案
  1. 如果是a标签要在新窗口中打开,添加noopener属性
  2. 如果是js中打开新窗口,手动将新窗口的opener置为null

转载于:https://my.oschina.net/dawd/blog/816062

这篇关于在新窗口中打开页面?小心有坑的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/655800

相关文章

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

ORACLE 11g 创建数据库时 Enterprise Manager配置失败的解决办法 无法打开OEM的解决办法

在win7 64位系统下安装oracle11g,在使用Database configuration Assistant创建数据库时,在创建到85%的时候报错,错误如下: 解决办法: 在listener.ora中增加对BlueAeri-PC或ip地址的侦听,具体步骤如下: 1.启动Net Manager,在“监听程序”--Listener下添加一个地址,主机名写计

Weex入门教程之3,使用 Vue 开发 Weex 页面

环境安装 在这里简略地介绍下,详细看官方教程 Node.js 环境 Node.js官网 通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用 npm 来安装 weex-toolkit。 npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。

如何删除不小心上传到git远程仓库中的.idea .iml文件

如果在开始的时候不配置,gitignore文件或者文件配置不正确,初始化上传的时候就会有一些不必要的信息上传上去 如果已经存在了一些文件在git远程仓库中,如。idea,.iml文件等。 首先在项目中定义一个  .gitignore文件,简单的实例如下也可以用idea中的gitignore插件 .DS_Storeclasses/*.settings/target/.classpath

ViewPager+fragment实现切换页面(一)

如今的很多应用中都是下面有一排按钮,点击可以切换页面,滑动也可以切换页面。下面就来简单的实现这个功能。 思路 首先肯定是会用到viewpager这个控件,为了能够向下兼容,最好用v4包下的viewpager,Activity要继承FragmentActivity 其次用一个集合来存储所有的fragment页面在设置viewpager的适配器时,把存储fragment页面的list集合传入ada

【鸿蒙HarmonyOS NEXT】页面之间相互传递参数

【鸿蒙HarmonyOS NEXT】页面之间相互传递参数 一、环境说明二、页面之间相互传参 一、环境说明 DevEco Studio 版本: API版本:以12为主 二、页面之间相互传参 说明: 页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面,从而实现跳转。通过页面路由模块,可以使用不同的url访问不同的页面,包括跳转到U

搜狗浏览器打开CSDN博客排版错乱问题解决

之前发生过几次,不知道什么原因。 今天一直用着好好的,打开一个csdn连接,显示404,博文被删除了,于是就用百度快照打开试试,百度快照打开显示的排版很乱也没找到有用信息。 后面再浏览CSDN博客就排版错乱,显示一个大大二维码图片。 尝试删除IE缓存无效,使用谷歌浏览是好的。 基本锁定就是搜狗缓存导致的,于是找如何删除搜狗缓存   清除后恢复正常