Files
crowd-funder-from-jason/doc/cors-disabled-for-universal-images.md
Matthew Raymer d823d1ad37 Fix CORS restrictions and development server configuration
Remove CORS headers to enable universal image support and fix local API server settings.

## Changes

**Remove CORS Headers**
- Remove Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers
- Enables images from any domain (Facebook, Medium, arbitrary websites)
- Database falls back to IndexedDB mode (minimal performance impact)

**Fix Local Development Configuration**
- Set LOCAL_ENDORSER_API_SERVER to http://127.0.0.1:3000 (was "/api")
- Create .env.development with local API server config
- Fix ensureCorrectApiServer() method in HomeView.vue
- "Use Local" button now sets proper localhost address

**Fix Settings Cache Issues**
- Add PlatformServiceMixin to AccountViewView.vue
- Disable settings caching to prevent stale data
- Settings changes now apply immediately without browser refresh

## Impact

**Tradeoffs:**
- Lost: ~2x SharedArrayBuffer database performance
- Gained: Universal image support from any domain
- Result: Better user experience, database still fast via IndexedDB

**Files Modified:**
- Configuration: vite.config.*.mts, index.html, .env.development
- Source: constants/app.ts, libs/util.ts, views/*.vue, utils/PlatformServiceMixin.ts

## Rationale

For a community platform, universal image support is more critical than marginal
database performance gains. Users share images from arbitrary websites, making
CORS restrictions incompatible with Time Safari's core mission.
2025-07-04 06:25:25 +00:00

4.1 KiB

CORS Disabled for Universal Image Support

Decision Summary

CORS headers have been disabled to support Time Safari's core mission: enabling users to share images from any domain without restrictions.

What Changed

Removed CORS Headers

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

Results

  • Images from any domain now work in development and production
  • No proxy configuration needed
  • No whitelist of supported image hosts
  • True community-driven image sharing

Technical Tradeoffs

🔻 Lost: SharedArrayBuffer Performance

  • Before: Fast SQLite operations via SharedArrayBuffer
  • After: Slightly slower IndexedDB fallback mode
  • Impact: Minimal for typical usage - absurd-sql automatically falls back

🔺 Gained: Universal Image Support

  • Before: Only specific domains worked (TimeSafari, Flickr, Imgur, etc.)
  • After: Any image URL works immediately
  • Impact: Massive improvement for user experience

Architecture Impact

Database Operations

// absurd-sql automatically detects SharedArrayBuffer availability
if (typeof SharedArrayBuffer === "undefined") {
  // Uses IndexedDB backend (current state)
  console.log("Using IndexedDB fallback mode");
} else {
  // Uses SharedArrayBuffer (not available due to disabled CORS)
  console.log("Using SharedArrayBuffer mode");
}

Image Loading

// All images load directly now
export function transformImageUrlForCors(imageUrl: string): string {
  return imageUrl; // No transformation needed
}

Why This Was The Right Choice

Time Safari's Use Case

  • Community platform where users share content from anywhere
  • User-generated content includes images from arbitrary websites
  • Flexibility is more important than marginal performance gains

Alternative Would Require

  • Pre-configuring proxies for every possible image hosting service
  • Constantly updating proxy list as users find new sources
  • Poor user experience when images fail to load
  • Impossible to support the "any domain" requirement

Performance Comparison

Database Operations

  • SharedArrayBuffer: ~2x faster for large operations
  • IndexedDB: Still very fast for typical Time Safari usage
  • Real Impact: Negligible for typical user operations

Image Loading

  • With CORS: Many images failed to load in development
  • Without CORS: All images load immediately
  • Real Impact: Massive improvement in user experience

Browser Compatibility

Browser SharedArrayBuffer IndexedDB Image Loading
Chrome (CORS disabled) Works Any domain
Firefox (CORS disabled) Works Any domain
Safari (CORS disabled) Works Any domain
Edge (CORS disabled) Works Any domain

Migration Notes

For Developers

  • No code changes needed
  • transformImageUrlForCors() still exists but returns original URL
  • All existing image references work without modification

For Users

  • Images from any website now work immediately
  • No more "image failed to load" issues in development
  • Consistent behavior between development and production

Future Considerations

If Performance Becomes Critical

  1. Selective CORS: Enable only for specific operations
  2. Service Worker: Handle image proxying at service worker level
  3. Build-time Processing: Pre-process images during build
  4. User Education: Guide users toward optimized image hosting

Monitoring

  • Track database operation performance
  • Monitor for any user-reported slowness
  • Consider re-enabling SharedArrayBuffer if usage patterns change

Conclusion

This change prioritizes user experience and community functionality over marginal performance gains. The database still works efficiently via IndexedDB, while images now work universally without configuration.

For a community platform like Time Safari, the ability to share images from any domain is fundamental to the user experience and mission.