利用 target=_blank 进行前端钓鱼

为什么大部分国外网站内链接不用 target="_blank"新窗口打开？ Google 都是当前窗口打开；Baidu/Bing 都是新窗口打开。

• 用户将无法控制它在本页打开还是新窗口打开。
• 新窗口打开使任务栏更加地拥挤。
• 新窗口打开增加浏览器资源的消耗。
• 新窗口打开是后退按钮变得不可用。
• 用户更加期望新页面在当页载入

以上，并不是我们讨论的重点！作为安全公司，我们关注重点在于安全、安全、安全！

涉及内容：

• 李刚的学习专栏
• window.open(strUrl, strWindowName, [strWindowFeatures])

网络钓鱼

Phishing，攻击者利用欺骗性的电子邮件和伪造的 Web 站点来进行网络诈骗活动，受骗者往往会泄露自己的私人资料，如信用卡号、银行卡账户、身份证号等内容。诈骗者通常会将自己伪装成网络银行、在线零售商和信用卡公司等可信的品牌，骗取用户的私人信息。

场景：浏览某个网站，随后打开了新窗口，结果这个新窗口神不知鬼不觉地把原来的网页地址改了（重定向到一个仿冒网页）。等你回到那个钓鱼页面，已经伪装成登录页，要求输入登录凭据。你可能不会注意到这一点，因为焦点位于新窗口中的恶意页面上，而重定向发生在后台。稀里糊涂把账号密码输进去了~

parent 与 opener

• </code> 中提供了一个用于父子页面交互的对象 <code>window.parent</code>，我们可以通过该对象来从框架中的页面访问父级页面的 window</li><li>新打开的窗口，可直接使用 <code>window.opener</code> 来访问来源页面的 <code>window</code> 对象</li></ul> <p>浏览器提供了完整的跨域保护，在域名相同时，<code>parent</code> 对象和 <code>opener</code> 对象实际上就直接是上一级的 <code>window</code> 对象；而当域名不同时，<code>parent</code> 和 <code>opener</code> 则是经过包装的一个 <code>global</code> 对象。这个 <code>global</code> 对象仅提供非常有限的属性访问，并且在这仅有的几个属性中，大部分也都是不允许访问的。</p> <p><img src="https://img-blog.csdnimg.cn/20200616194849740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZ2FuZzI1ODUxMTY=,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p> <p>如果，你的网站上有一个链接，使用了 <code>target="_blank"</code>，那么一旦用户点击这个链接并进入一个新的标签，新标签中的页面如果存在恶意代码，就可以将你的网站直接导航到一个虚假网站。此时，如果用户回到你的标签页，看到的就是被替换过的页面了。</p> <pre><code class="prism language-javascript"><span class="token comment">// 新打开的窗口中执行</span> window<span class="token punctuation">.</span>opener<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'https://ligang.blog.csdn.net'</span><span class="token punctuation">)</span> </code></pre> <p>之前打开的窗口被导航到了 <a href="https://ligang.blog.csdn.net">https://ligang.blog.csdn.net</a> 。</p> <p><img src="https://img-blog.csdnimg.cn/20200616194919162.gif#pic_center" alt="在这里插入图片描述"></p> <h3><a id="_45"></a>防御</h3> <h4><a id="_46"></a>代码控制</h4> <p><code><iframe></code> 直接使用 sandbox 属性</p> <h4><a id="noreferrer_50"></a><code>noreferrer</code></h4> <p>可以使用 <code><a></code> 标签的 <code>rel</code> 属性来指定 <code>rel="noreferrer"</code> 来隐藏 referer</p> <p><img src="https://img-blog.csdnimg.cn/20200616194945266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZ2FuZzI1ODUxMTY=,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://blog.csdn.net/ligang2585116<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>noreferrer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>李刚的学习专栏<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <h4><a id="noopener_60"></a><code>noopener</code></h4> <p>浏览器导航到目标资源，而无需授予对打开它的文档的新浏览上下文访问权限-通过不设置Window打开的窗口上的.opener属性（它返回null）。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://blog.csdn.net/ligang2585116<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>noreferrer noopener<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>李刚的学习专栏<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <h4><a id="JavaScript_68"></a>JavaScript</h4> <pre><code class="prism language-javascript"><span class="token keyword">function</span> <span class="token function">openUrl</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">var</span> newTab <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span> newTab<span class="token punctuation">.</span>opener <span class="token operator">=</span> <span class="token keyword">null</span> newTab<span class="token punctuation">.</span>location <span class="token operator">=</span> url <span class="token punctuation">}</span> </code></pre> <h3><a id="_78"></a>性能</h3> <p>通过<code>target="_blank"</code>打开的新窗口，跟原来的页面窗口共用一个进程。如果这个新页面执行了一大堆性能不好的 JavaScript 代码，占用了大量系统资源，那你原来的页面也会受到池鱼之殃。 – Baidu而来</p> <h3><a id="_82"></a>参考地址</h3> <ul><li>https://mp.weixin.qq.com/s/BN0myVrOTl9LpuKJG5C9RQ</li><li>https://github.com/vuejs/vue-router/issues/1280</li><li>https://juejin.im/post/5a9f8425f265da239a5f57f8</li><li>https://www.zhihu.com/question/20162882</li><li>https://mathiasbynens.github.io/rel-noopener/</li></ul>