Referrer Policy Support for Image Privacy Protection

[AldenWangExis]

Checklist

• I have read and accepted the contributing guidelines.

Is your feature request related to a problem? Please describe

When embedding images from external platforms with referrer-based hotlink protection (such as WeChat Official Accounts, certain CDN services, or other content platforms), these images fail to load properly. The browser sends the HTTP Referer header revealing the source page, which triggers the hotlink protection mechanism.

Common scenarios:

1. Chinese content creators frequently reference images from WeChat Official Account articles

2. Images from these sources display error messages like:

   • "此图片来自微信公众平台，未经允许不可引用"
   • "403 Forbidden" errors
   • Placeholder "broken image" icons

3. This creates a poor user experience and forces content creators to either:

   • Download and self-host all images (increasing storage and bandwidth costs)
   • Use proxy services (adding complexity and potential privacy concerns)
   • Avoid using valuable external content

Additional privacy concern:
Even when hotlink protection isn't an issue, sending referrer information to external image hosts represents an information leakage that many users would prefer to avoid.

Describe the solution you'd like

Add built-in support for referrer policy control to prevent HTTP Referer headers from being sent when loading images. This should be implemented at multiple levels:

1. Global meta tag: Add <meta name="referrer" content="never"> or <meta name="referrer" content="no-referrer"> in the document head
2. Image-level attributes: Inject referrerpolicy="no-referrer" attribute to <img> tags generated by the Jekyll/Liquid templates
3. Comprehensive coverage: Apply to all image sources including:
   • Post content images (processed through refactor-content.html)
   • Sidebar avatar
   • Post preview images
   • Any other dynamically generated images

Benefits:

• Enables seamless embedding of images from platforms with referrer restrictions
• Enhances user privacy by preventing tracking
• Reduces information leakage to third-party servers
• Maintains backward compatibility (non-breaking change)
• Follows web standards (HTML5 referrerpolicy attribute)

Describe alternatives you've considered

Alternative 1: Manual image download and self-hosting

• ❌ Increases storage costs
• ❌ Adds maintenance burden (updating images when source changes)
• ❌ Loses automatic updates from original source

Alternative 2: Image proxy services

• ❌ Adds external dependencies
• ❌ Potential privacy concerns (third-party sees all image requests)
• ❌ Additional latency

Alternative 3: User-level meta tag injection

• ⚠️ Requires manual modification of theme files
• ⚠️ Lost during theme updates
• ⚠️ May not cover all image rendering paths
• ⚠️ Inconsistent across different user implementations

Alternative 4: Configuration option

• Could make this a configurable option in _config.yml
• However, given the minimal performance impact and clear privacy/functionality benefits, it may be reasonable to enable by default

Additional context

Implementation details:
This feature can be implemented with minimal code changes:

• 1 line in _includes/head.html (meta tag)
• 2-3 lines in _includes/refactor-content.html (image attribute injection)
• 1 line in _includes/sidebar.html (avatar attribute)