为什么大部分国外网站内链接不用
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>