Bypass Bilibili's anti-hotlink to fetch images

A long time ago I wrote an off-site link card for my website in JS, and recently added Bilibili link parsing. When writing an article you only need one line of code to turn a Bilibili link into a card automatically, e.g.: [share url="https://www.bilibili.com/video/BV1TM4y1T7sw"].

Updated 2024/8/07: the new-theme card parsing is broken; below is the effect preview

To achieve the gradient background of the card, we usually add a background gradient with the linear-gradient style inside the background property. At first I planned to fetch the video cover from the Bilibili API and apply it directly to background, but during testing I found that Bilibili's image host has anti-hotlink enabled, so the image couldn't be used directly. After some trial and error I found two work-arounds.

A roundabout way

Anti-hotlink usually relies on the resource server checking the request's Referer header, allowing only requests from specified referrers. If the Referer points to a non-whitelisted page, the resource is denied and the image fails to load.

HTML has a referrerpolicy attribute that controls whether the browser sends a Referer header when a user clicks a link or initiates a request. When referrerpolicy is set to no-referrer, the browser will not send the Referer header, so the resource server gets no referrer information. If the resource server does not block empty Referer, you can bypass anti-hotlink by adding referrerpolicy="no-referrer" to the <img> tag.

Because <img> can't apply a background gradient directly in the style attribute, we need an extra gradient overlay:

<div class="relative w-[500px]">
  <img
    src="https://i0.hdslb.com/bfs/archive/b73aec2f46bcaddee266b900d714b78f47e726d2.jpg"
    alt="Bili Image"
    class="w-full h-full object-cover"
    referrerpolicy="no-referrer"
  />
  <!-- overlay -->
  <div
    class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent to-white pointer-events-none"
  ></div>
</div>

Of course, by leveraging browser cache we can also write it like this and it still works:

<div
  style="
    background: linear-gradient(to right, transparent 10%, white),
      url(https://i0.hdslb.com/bfs/archive/b73aec2f46bcaddee266b900d714b78f47e726d2.jpg);
  "
>
  <img
    src="https://i0.hdslb.com/bfs/archive/b73aec2f46bcaddee266b900d714b78f47e726d2.jpg"
    referrerpolicy="no-referrer"
    hidden
  />
</div>

After the browser finishes loading the image in the <img> tag, the <div>'s background will load from cache, indirectly solving the issue that <div> doesn't support referrerpolicy="no-referrer".

Third-party image cache

Another approach is to use a proxy to bypass anti-hotlink, which can be done with this PHP snippet:

<?php
$imageUrl = isset($_GET['url']) ? $_GET['url'] : '';
if (!$imageUrl || !filter_var($imageUrl, FILTER_VALIDATE_URL)) {
    die('Invalid image URL.');
}

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $imageUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Referer: https://www.bilibili.com/',
    'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36'
]);

$imageContent = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$contentType = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);
curl_close($ch);

if ($httpCode !== 200 || !$imageContent) {
    die('Failed to fetch image.');
}

if ($contentType) {
    header("Content-Type: $contentType");
}

ob_start();
echo $imageContent;
ob_end_flush();

// https://api.xxxx.com/api.php?url=https://i0.hdslb.com/bfs/archive/b73aec2f46bcaddee266b900d714b78f47e726d2.jpg

Or use a third-party image caching service, here https://images.weserv.nl is used. Just append the target image URL after https://images.weserv.nl/?url= and anti-hotlink is bypassed.