從referer角度詳解

一、referer翻譯

Referer一般被譯為「引用頁」、「引薦頁面」、「來源頁」等。在HTTP協議中，當瀏覽器向Web伺服器請求某個資源時，通常會帶上Referer信息，表示請求來源於哪個頁面。

二、如何允許referer為空

通常情況下，瀏覽器會在請求頭中自動添加Referer信息。但是，在某些情況下，我們希望瀏覽器不要傳遞Referer信息，甚至希望Referer信息為空。這時可以通過以下手段實現：

1、設置meta標籤：許多網站會通過設置meta標籤來禁止Referer信息泄露。

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

2、使用JavaScript：在發送請求之前，可以使用JavaScript代碼來指定請求頭，從而達到限制或清除Referer信息的目的。

fetch('http://example.com', {
  headers: {
    'Referer': ''
  }
})

三、referer欄位的作用

Referer欄位在很多場景下都有著重要的作用，下面列舉幾個常見的應用場景：

1、防盜鏈：有些站點希望通過Referer信息來判斷圖片、視頻等資源的請求來源，從而進行防盜鏈操作。

if(!strpos($_SERVER['HTTP_REFERER'], 'http://www.example.com/')) {
  exit('非法訪問！');
}

2、統計分析：通過Referer信息，可以了解到用戶從哪些站點鏈接訪問、搜索引擎關鍵詞、頁面URL等等，有助於優化站點SEO、分析用戶行為、制定運營策略等。

//統計百度搜索引擎的關鍵詞
if(strpos($_SERVER['HTTP_REFERER'], 'http://www.baidu.com/') !== false) {
  $q = str_replace('q=', '', parse_url($_SERVER['HTTP_REFERER'])['query']);
  $keyword = urldecode($q);
  add_statistic('baidu', $keyword);
}

四、referer 360沒有

360瀏覽器在某些情況下不會發送Referer信息，這可能會對某些站點的安全策略、統計分析等功能造成問題。如果需要在360瀏覽器中使用Referer信息，可以通過以下方式解決：

1、通過JavaScript手動添加：可以通過JavaScript代碼來手動添加Referer信息。

var img = new Image();
img.src = 'http://example.com/image.jpg';
img.setAttribute('referrerPolicy', 'unsafe-url');

2、使用nginx反向代理：通過nginx的反向代理配置，可以在後端獲取普通瀏覽器中的Referer信息。

location /example/ {
  proxy_pass http://example.com/;
  proxy_set_header Referer "http://example.com/";
}

五、referer check error

在某些情況下，我們可能會在後台代碼中檢查Referer信息。但是，由於Referer信息可能會被篡改、偽造、隱藏等，因此需要進行一些處理才能確保其可靠性。

1、檢查Referer是否為空：雖然我們可以通過JavaScript或meta標籤來清除Referer信息，但在前端無法控制的場景下，Referer信息可能為空。因此在代碼中檢查Referer是否為空很重要。

if(empty($_SERVER['HTTP_REFERER'])) {
  exit('非法訪問！');
}

2、檢查Referer域名：在某些場景下，我們可能希望只接受來自特定域名的Referer信息。在檢查Referer域名時，需要考慮Referer信息可能會被修改或偽造的情況。

$referer = parse_url($_SERVER['HTTP_REFERER']);
if($referer['host'] !== 'www.example.com') {
  exit('非法訪問！');
}

六、百度地圖的referer

在使用百度地圖API時，需要在請求中添加合法的referer信息，否則會返回錯誤碼。referer信息由「協議+域名」的形式組成，例如「http://localhost/」。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_APP_KEY"></script>

<script type="text/javascript">
    // 創建Map實例
    var map = new BMap.Map("allmap");
    // 初始化地圖
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
</script>

七、微信小程序設置referer選取

在使用微信小程序的開發者工具時，可以在菜單欄中的「項目」-「設置」中設置referer地址。設置referer地址後，在小程序中調用其他API時，請求頭中會帶上referer信息。

//設置referer地址
wx.setStorageSync('test_referer', 'http://www.example.com/');

//發送請求
wx.request({
  url: 'http://api.example.com/',
  header: {
    'referer': wx.getStorageSync('test_referer')
  }
});