一个来自create-react-app脚手架警告的思考

0x584a 发布于2019-08-02 14:08 / 1329人阅读

摘要：新页面中有一个按钮，告诉打开我的那个页面，我喜欢林志玲。点击新页面的按钮然后回到第一个页面，发现第一个页面多出来了一排红色的文字我喜欢林志玲。

最近在开发一个react项目，项目是用create-react-app脚手架创建的，当我在我的项目的菜单栏中添加了一个打开一个外链的a标签时，我收到了一个来自create-react-app的警告信息，信息内容如下

意思就是说“在没有rel="noopener noreferrer"属性的a标签中使用target="_blank"存在一定的风险”

这个提示瞬间把我吸引了，以前关于a标签收到的提示都是没有设置alt属性啊什么的，但是也只是提示我说为了显示的友好什么的，这次竟然提示我有风险，面对这种问题，必须一探究竟啊。

查阅了一些资料得到了如下关于a标签一个介绍

当一个外部链接使用了target=_blank的方式，这个外部链接会打开一个新的浏览器tab。此时，新页面会打开，并且和原始页面占用同一个进程。这也意味着，如果这个新页面有任何性能上的问题，比如有一个很高的加载时间，这也将会影响到原始页面的表现。如果你打开的是一个同域的页面，那么你将可以在新页面访问到原始页面的所有内容，包括document对象(window.opener.document)。如果你打开的是一个跨域的页面，你虽然无法访问到document，但是你依然可以访问到location对象。

不看不知道一看吓一跳有木有。主要是两个点是我以前从未在意的

用target="_blank"方式打开的tab和原始页面占用同一个进程（UI进程）

新打开的页面能获取到原始页面的document。

第一个问题不用我说都知道是非常需要注意的，新的页面中的所有行为都会间接影响到原始页面的性能。

这里主要研究第二个问题。为此，我做了小小的实验。

上图解释：

首先打开了第一个页面，第一个页面只有一个“打开一个新页面”的a标签

点击这个链接，打开了一个新页面。新页面中有一个按钮，“告诉打开我的那个页面，我喜欢林志玲”。

点击新页面的按钮然后回到第一个页面，发现第一个页面多出来了一排红色的文字“我喜欢林志玲”。

停在第一个页面5s钟，第一个页面自动跳转到了百度首页。

上面两个页面的代码分别如下：

opener-test.html

opener-test-2.html

新的页面不仅往原始页面添加了一段话，而且还让他离开了原来的页面。

注：在上面的例子中，两个页面位于同一个域下面，如果两个页面位于不同的域，那上面的第一个效果就是不行的，因为不同域的情况下，新页面拿不到opener对象的document，但是location对象是可以拿到的，所以第二个效果任然有效。

怎么禁止上面的行为呢？按照create-react-app的提示信息，给连接加上rel属性，如下：

上面的rel属性值多了一个noreferrer它的作用和noopener是一样的，只是适用于低版本的浏览器。

这样处理后，新打开的页面的window对象上就没有opener和referrer对象了。

GPU云服务器云服务器人工智能的思考对人工智能的思考防火墙不能防范来自网络内部的攻击防火墙能够防范来自内部网络的攻击

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53592.html

React+TypeScript+Mobx+AntDesignMobile进行移动端项目搭建

摘要：通过装饰器或者利用时调用的函数来进行使用下面代码中当或者发生变化时，会监听数据变化确保通过触发方法自动更新。只能影响正在运行的函数，而无法影响当前函数调用的异步操作参考官方文档用法装饰器函数遵循中标准的绑定规则。前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技术栈,使用Create-React-App脚手架进行一个移动端项目搭建，主要介绍项...

lindroid 2019-08-23 18:24 评论0 收藏0
深度解析`create-react-app`源码

摘要：这个选项看意思就知道了，默认使用来安装，运行，如果你没有使用，你可能就需要这个配置了，指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波关于create-react-app 源码的关键词，发现掘金出现好几篇仿文，就连我开头前沿瞎几把啰嗦的话都抄，我还能说什么是吧？以后博客还是首发在Github上，地址戳这里戳这里！！转载求你们注明出处、改编求你们贴一下参考链...

waruqi 2019-08-22 13:59 评论0 收藏0
初探react技术栈（一）

摘要：相信用的同学也不少找到函数在其中中添加启用编译。。。react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or c...

刘玉平 2019-05-23 16:23 评论0 收藏0
初探React技术栈（一）

react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 评论0 收藏0