新窗口打开页面的问题

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

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

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

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标签上添加这个rel = "noopener"属性,可以将新打开窗口的opner置为空。特点:

  1. 可解决除IE外的安全问题,和所有现代浏览器的性能问题
&lt a rel="noopener" target="_blank" href='xxxx.html' &gt &lt/ a &gt"
4.2 window.open并设置opner为空
var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = 'http://newurl';

特点:

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

特点:

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

文章转载自:来源:https://coolriver.net.cn/articles/wtf-target-blank

转载于:https://www.cnblogs.com/koala0521/p/7773973.html

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



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

相关文章

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

如何在页面调用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

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

题目1254:N皇后问题

题目1254:N皇后问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 题目描述: N皇后问题,即在N*N的方格棋盘内放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在同一斜线上。因为皇后可以直走,横走和斜走如下图)。 你的任务是,对于给定的N,求出有多少种合法的放置方法。输出N皇后问题所有不同的摆放情况个数。 输入

vscode中文乱码问题,注释,终端,调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题,很多方法都试了,注释乱码解决了,终端又乱码,调试窗口也乱码,最后经过本人不懈努力,终于全部解决了,现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一,所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版:使用utf8-确定-然后按指示重启 2.vscode

Android Environment 获取的路径问题

1. 以获取 /System 路径为例 /*** Return root of the "system" partition holding the core Android OS.* Always present and mounted read-only.*/public static @NonNull File getRootDirectory() {return DIR_ANDR