[TOC]

0x00 前言

小小知识大作用

0x01 F&Q

1.前端Web

Q:a标签target="_blank"的安全问题及解决办法
答:A标签的target属性规定在何处如何打开链接文档常用的有_self & _blank,如果在一个 A 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档,如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后超链接文档就可以指向这个新的窗口。您可以把target=”_blank”理解为新的浏览器窗口打开此超链接;

关键点: 如果您使用了该属性却没有添加rel=”noopener noreferrer”得话就会存在一定得安全风险;

原理解析:我们知道JS在在调用window下的open方法创建一个新窗口的同时，我们可以获得一个创建窗口的opener句柄，如果通过target=”_blank”点开的窗口活着标签页，此时子窗口也能捕获opener句柄与此同时通过这个句柄，子窗口可以访问到父窗口的一些属性；虽然很有限，但是我们却可以修改父窗口的页面地址，让父窗口显示指定的页面。

实例演示:

#http://www.weiyigeek/a.html
<a href="b.html" target="_blank">跳转</a>;

#点击后浏览器会在新得窗口和标签页打开b.html，又假如此时b.html有如下js代码
if (window.opener) {
    window.opener.location.href = 'eval.html';
}

当页面b.html被打开的同时原来打开a.html的标签页会被重定向到eval.html, eval.html可以是和原来域完全不相关的其它域的资源这就是问题得风险点，如果网站上有上传功能得就需要值得注意了。
JS-Console演示:

#窗口1.default.html
window.open("./index.html")
#Restricted about:blank

#窗口2.index.html
window.opener
#Restricted https://weiyigeek.top/default.html

#此时由于target属性为_blank且没有限制Window.opener访问行为执行以下语句此时窗口1将会加载下面得网站文档内容;
window.opener.location.href = 'https://blog.weiyigeek.top';

解决方法:我们唯一的目的就是限制window.opener的访问行为，此时我只需要在标签中加上一个rel="noopener"属性(chrome)或者rel="noreferrer"属性(火狐),当然您可以将两个属性值合并写成rel="noopener noreferrer"来完整覆盖,此时子页面就再也访问不到父页面的句柄所以更无法操作原窗口的句柄;
也可以通过js来控制限制句柄的访问:

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

总结:在开发中一些小细节还是要引起注意别怕麻烦，比如我们以后在写a标签的时候尽量都在target=”_blank”后面添加一句rel="noopener noreferrer"。

Q:”no-referrer”属性标签解决防盗链问题办法
答：该标签属性解决其他网站防盗链图片得设置方法，可对绝大部分网站适应，但是会造成百度统计数据异常，请谨慎使用(已测试部分gif网站无效)。

<meta name="referrer" content="no-referrer" />

<!-- #标签内使用no-referrer -->
<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>
<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>
<image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>

weiyigeek.top-