I Built a Streaming Aggregator for Practice. Then 5 Continents Showed Up (And the Ad Wars Began)

Last week, I soft-launched ChwiiX as a personal project to shake off some coding rust. I expected maybe a few curious clicks from friends. Instead, I'm now serving users across 5 continents with a 33% bounce rate.
Cool story? Sure. But here's the real talk: I'm currently losing a war against third-party ad providers, and I need your collective brain.
**
The Problem: Aggressive Iframe Hijacking**
Third-party media sources are incredibly aggressive with redirects. Here's what's happening:

1. User clicks "pause" on the video player
2. The iframe content intercepts the click event
3. User gets redirected to a spam/ad page
4. My app's UX is completely hijacked

It's not just annoying—it's killing trust with users who think I'm the one serving these redirects.

**
What I've Tried (So Far)**
Attempt 1: Iframe Sandboxing
<iframe
src={streamUrl}
sandbox="allow-scripts allow-same-origin"
referrerPolicy="no-referrer"
allow="autoplay; encrypted-media"
/>

Result: Partially effective. Blocks some redirects but breaks legitimate player functionality. The allow-same-origin is necessary for the player to work, but it also opens the door for the redirects.
Attempt 2: User Activation Detection
`let lastUserInteraction = Date.now();

document.addEventListener('click', () => {
lastUserInteraction = Date.now();
});

// In the iframe wrapper
iframe.addEventListener('beforeunload', (e) => {
const timeSinceInteraction = Date.now() - lastUserInteraction;

// If redirect happens within 500ms of click, likely hijacked
if (timeSinceInteraction < 500) {
e.preventDefault();
console.warn('Potential hijack blocked');
return false;
}
});`

Result: Doesn't work consistently. The beforeunload event doesn't fire reliably for iframe navigation, and even when it does, preventDefault() is often ignored by the browser.

Attempt 3: Pointer Event Overlay
const IframeWrapper = styled.div
position: relative;

&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}

&:hover::before {
pointer-events: auto;
}
;

Result: Blocks clicks entirely, which defeats the purpose. Users can't interact with the player controls.

*What I'm Considering Next
*

1. Proxy Layer: Route all third-party streams through a backend proxy that strips aggressive scripts (heavy lift, potential legal gray area)
2. Content Security Policy Headers: More aggressive CSP rules, but I'm worried about breaking too many legitimate sources
3. Source Reputation System: Build a database of "clean" vs "aggressive" sources and auto-switch users to better options
4. User-Controlled Overlays: Give users a toggle to enable a click-protection layer when they're not actively using controls ** The Bigger Picture** This started as a learning project. Now I'm learning way more than I bargained for about:

• DOM security models and their limitations
• The Wild West of third-party media streaming

• Why companies like Netflix build everything in-house
  **
  What's Next for ChwiiX**
  Once I win (or at least survive) this ad battle:

• Global CDN/Image Optimization: My users in South America and Asia deserve better load times

• Persistent Watchlists: Moving from localStorage to a proper backend

• Smart Source Switching: Automatically serve the cleanest available stream based on reputation scoring
  **
  I Need Your Experience**
  Have you dealt with aggressive iframe redirects? I'm especially interested in:

• Techniques that actually worked

• Legal considerations I should be aware of

• Libraries or tools you'd recommend

• Creative solutions I haven't thought of