DEV Community: Chioma Halim

Why Your Iframe Fails (OAuth, Sandbox & Cross-Origin Security Explained)

Chioma Halim — Tue, 17 Mar 2026 23:55:52 +0000

Embedding third-party content with an iframe is straightforward until it suddenly stops working.

Some pages refuse to render, authentication flows fail, and redirects behave unexpectedly. In most cases, the problem isn’t your code. It’s the browser enforcing security rules around embedded content.

In this guide, we’ll break down why these restrictions exist and how to work with them. You’ll learn:

Why OAuth does not work inside iframes
How CSP and X-Frame-Options control embedding
How the sandbox attribute restricts iframe behavior
How to safely communicate between an iframe and its parent using postMessage.

What is an iframe?

An iframe (Inline Frame) is an HTML element that embeds another webpage or external content inside your current page.

It works like a window that displays content from a different source without redirecting the user.

<iframe src="https://example.com" width="600" height="400" title="Example site"></iframe>

Security Considerations

Some sites intentionally block being loaded inside an iframe. This protects users from clickjacking attacks, where malicious sites visually disguise login forms or sensitive actions. To allow embedding of your site:

Set the CSP frame-ancestors directive with trusted parent domains
Ensure X-Frame-Options isn't set to DENY or SAMEORIGIN

Best Practice: Only allow trusted origins to enable secure iframe embedding.

OAuth Restrictions in Iframes

OAuth flows generally do not work inside iframes due to modern browser security controls:

1. Clickjacking Protection
Most providers send headers like:

X-Frame-Options
Content-Security-Policy

These block login pages from being embedded, preventing malicious framing attacks.

2. Third-Party Cookie Blocking
Browsers restrict cookies in cross-site iframes, which breaks the session handling required for OAuth redirects and state validation. This affects major providers like Google, Facebook, GitHub, etc.

Best Practices

OAuth flows should run in a top-level browsing context, not inside an iframe. e.g

Redirect OAuth in the Parent Window

// inside click handler in iframe site
if (window.top) {
  window.top.location.href = authUrl;
}

Then allow navigation using:

<iframe src="SITE_URL" sandbox="allow-top-navigation"></iframe>

Open OAuth in a New Tab:

// iframe site
window.open(authLink);

Allow popups using:

<iframe src="SITE_URL" sandbox="allow-popups"></iframe>

Iframe `sandbox` Attribute

The sandbox attribute is a security feature that restricts what embedded content can do. Adding sandbox with no value applies all restrictions:

No scripts
No form submissions
Cannot navigate the top-level window
No popups
No automatic features (autoplay, pointer lock, etc.).
By passing a value, you can determine what behaviours you'd like to permit.

Common Sandbox Values for an iframe

allow-scripts — Runs JavaScript inside the iframe
allow-forms — Allows form submissions
allow-popups — Enables opening new windows via window.open()
allow-same-origin — Treats iframe content as same-origin (cookies + DOM access)
allow-top-navigation — Lets the iframe redirect the top-level page
allow-top-navigation-by-user-activation— Allows top navigation only after a user click/tap
allow-modals — Enables modal dialogs like alert, confirm, and prompt.

Communication Between an iframe and It's Parent

When embedding an iframe, you may need communication with the parent page. For example, to notify about user actions. Due to the Same-Origin Policy, the parent and iframe cannot directly access each other's DOM or JS if they are on different origins. A standard approach to enabling communication is by using : window.postMessage()

Sending a Message (iframe → parent)

window.parent.postMessage({ type: "loginSuccess" }, "https://parent-site.com");

Listening for Messages (parent)

window.addEventListener("message", (event) => {
  if (event.origin !== "https://iframe-site.com") return;

  console.log(event.data);
});

Best Practices

Always validate event.origin
Never trust incoming data blindly
Avoid using "*" as the target origin unless absolutely necessary
Ensure the iframe isn't sandboxed without allow-scripts

Push Notifications with Firebase in React.js

Chioma Halim — Wed, 01 Dec 2021 22:29:32 +0000

Introduction

Push notifications are alerts that are "pushed" to a user's device by apps, even when those apps aren't open. In the case of web push notifications, the web app receives messages pushed to it from a server at any time. This includes when the application is active or inactive or not open in the browser and when the browser is inactive. Firebase Cloud Messaging is a cross-platform messaging solution that lets you reliably send these messages at no cost.

In this tutorial, we are going to be walking through how to set up Firebase Cloud Messaging to receive web push notifications in your React.js app.

Firebase Setup

Create an account at https://firebase.google.com, if you don't already have one. Upon successful account creation, you would be navigated to https://console.firebase.google.com afterwards, where you can create a project by clicking on the Create a project button and filling out the necessary fields.

Once project creation is done. Click on the created project and select the platform you want to connect the service to. Since we are working on a web project we can select the web option by clicking on the (>) icon. This would take us to an interface to Add Firebase to your web app. After filling in the field for app nickname and clicking the Register app button, it should generate a configuration object that we'll need to pass to our React app in later steps.

Connecting Firebase Cloud Messaging to our Application

1. Install Firebase in your React project by running:

npm install firebase

2. Create a new file called firebase.js and add the following lines of code :

import { initializeApp } from 'firebase/app';

// Replace this firebaseConfig object with the configurations for the project you created on your firebase console. 
var firebaseConfig = {
 //... 
};

initializeApp(firebaseConfig);

3. Import Firebase's messaging module into the firebase.js file:

import { getMessaging } from "firebase/messaging";

//...

const messaging = getMessaging();

4. Create a function called requestForToken that makes use of Firebase's getToken method. This lets you subscribe your app to push notifications. If notification permission has not been granted, this method will ask the user for notification permissions. Otherwise, it returns a token or rejects the promise due to an error.

//....
import { getMessaging, getToken} from 'firebase/messaging';

//....

export const requestForToken = () =>; {
  return getToken(messaging, { vapidKey: REPLACE_WITH_YOUR_VAPID_KEY })
    .then((currentToken) =>; {
      if (currentToken) {
        console.log('current token for client: ', currentToken);
        // Perform any other necessary action with the token
      } else {
        // Show permission request UI
        console.log('No registration token available. Request permission to generate one.');
      }
    })
    .catch((err) =>; {
      console.log('An error occurred while retrieving token. ', err);
    });
};

Note: The getToken method requires you to pass a Voluntary Application Server Identification or VAPID key. You can get it by following these steps:

Click on Project Settings for your project from the Firebase console, then navigate to the Cloud Messaging tab and scroll to the Web configuration section.
Under Web Push certificates tab, click on Generate key pair.

5. Finally, you can link the firebase.js file to the rest of your project by importing it where it's needed. In this case, we can create a Notification component:

import React from 'react';
import { requestForToken } from './firebase';

const Notification = () =>; {
 requestForToken();
 //....
}

Additional Step:

The messaging service requires a firebase-messaging-sw.js file to work fine. I'll explain more about this file in the Background Listener Setup section of this guide. For now, create an empty file named firebase-messaging-sw.js in the public folder of your project.

Navigate to the browser console of your app to test if our app can connect to Firebase Cloud Messaging service. You should see the token that was received, if successful.

Something went wrong?

1.) If you got an error concerning permissions not being granted but blocked instead, you should make sure you set notifications permissions to Allow in your browser.

2.) If you got an error concerning a missing required authentication credential, then you probably passed the wrong VAPID_KEY.

Receiving Messages

Now that the initial setup is done, you'll need to configure message listeners. Foreground message listeners are called when the page has focus(i.e. when the user is on the browser tab containing our web app), while background message listeners are called when the user is on a different tab or even when the tab containing our app is closed.

Foreground Listener Setup

To handle messages when the app is in the foreground, you can make use of Firebase's onMessage method in your firebase.js file:

import { getMessaging, getToken, onMessage } from 'firebase/messaging';
//......
const messaging = getMessaging();
//......
export const onMessageListener = () =>;
  new Promise((resolve) =>; {
    onMessage(messaging, (payload) =>; {
      console.log("payload", payload)
      resolve(payload);
    });
  });

You can then call the method in the Notification component. For this tutorial, I'm making use of react-hot-toast library to create a toast UI for displaying the notification details received from the message listener.

import React, {useState, useEffect} from 'react'
import toast, { Toaster } from 'react-hot-toast';
import { requestForToken, onMessageListener } from './firebase';

const Notification = () =>; {
  const [notification, setNotification] = useState({title: '', body: ''});
  const notify = () => toast(<ToastDisplay/>);
  function ToastDisplay() {
    return (
      <div>
        <p><b>{notification?.title}</b></p>
        <p>{notification?.body}</p>
      </div>
    );
  };

  useEffect(() => {
    if (notification?.title ){
     notify()
    }
  }, [notification])

  requestForToken();

  onMessageListener()
    .then((payload) => {
      setNotification({title: payload?.notification?.title, body: payload?.notification?.body});     
    })
    .catch((err) => console.log('failed: ', err));

  return (
     <Toaster/>
  )
}

export default Notification

Background Listener Setup

To handle background messages, you'd need to make use of a service worker. A service worker is a script that your browser runs in the background, separate from the web page, enabling features that do not require a web page or user interaction.

You can go ahead to add the following lines of code to your firebase-messaging-sw.js file :

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
  apiKey: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_API_KEY`,
  authDomain: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_AUTH_DOMAIN`,
  projectId: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_PROJECT_ID`,
  storageBucket: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_STORAGE_BUCKET`,
  messagingSenderId: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_SENDER_ID`,
  appId: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_APP_ID`,
  measurementId: `REPLACE_WITH_YOUR_FIREBASE_MESSAGING_MEASUREMENT_ID`,
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
 // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Testing Notifications

To test whether the notifications are functional, you can trigger a test notification from the firebase console with the following steps:

On your project dashboard, scroll to the Cloud Messaging section.
Under the Notifications tab, click on the New notification button
Fill in the information for Notification title and Notification text
Under the Device preview section, click on Send test message
In the popup that opens, enter the client token that is logged in the console as the FCM registration token and press the + button
Make sure that the FCM token is checked and click on Test. You could also decide to fill in the entire Compose notification section and press the Review button at the bottom of the page to have it sent to multiple target apps.

If you're on the browser tab with the app opened, you should see a notification pop up.

While if the browser tab with the application isn't in focus, you should see a default system notification pop-up.

Note: To see a notification banner when notifications are received in the background, make sure to turn on the feature for your browser under your system's notification settings.

Something went wrong ?

There may be cases where a user doesn't get notifications immediately or at all. This can be due to a variety of reasons, some of which are covered here.

Repository Code

You can find the GitHub repo for this tutorial at https://github.com/AudreyHal/React-Firebase-Cloud-Messaging-Demo

Persisting Files in Javascript (React) Applications

Chioma Halim — Wed, 24 Mar 2021 18:56:48 +0000

While working on a React application, you might come across scenarios where you need to store some files on the client-side to be used across different views before sending them to the server or you may want to be able to store large amounts of data on the client-side for offline access. For any of these scenarios, we would need a mechanism to be able to persist these files appropriately in our browser. In this post, I'll be covering how that can be achieved.

What not to do

Before we get into how to properly persist our files, we are going to be looking at the limitations of other methods that one might consider.

This involves assigning values to variables that make up parts of the browser URL.

https://example.com/cakes?flavour=chocolate

For React applications with routing set up, it's fairly common to see some information being passed across components pointing to different routes. This information can be easily retrieved when after a page refresh as long as the route information remains unchanged.

In the case of transmitting files, this won't work because URL params are in string formats and file objects aren't serializable.

Attempting to serialize the file in the first component and retrieving the parsed file object in the second component via URL params would return an object with missing file information.

Using Local Storage

LocalStorage is a property that allows web applications to store data locally within the user's browser as key/value pairs with no expiration date.

It stores up to 5-10MB of data (depending on the browser) and making use of it is as easy as shown below:


localStorage.setItem('name', 'Jason')); // Saves data to localStorage object

localStorage.getItem('name'); // Retrieves data using key

//=>  'Jason'

LocalStorage can also only store data in string format. This presents a problem for storing files since files aren't serializable data types.

It is possible to convert image files into a base64 encoded data URI, which is a serialized format, and then proceed to save it in local storage. But this is not optimal because both data URI's and local storage have size limits across different browsers.

Note: The same set of limitations apply for applications using a tool like Redux Persist, which is a library allowing developers to save the redux store in the localStorage of the browser. Both localStorage and Redux don't store non-serializable data types, like files.

What you can do

Using IndexedDB

IndexedDB is a local database provided by the browser. It is more powerful than local storage and lets you store large amounts of data. Unlike local storage, in which you can only store strings, it lets you store all data types, including objects.

Features

Stores key-pair values: It uses an object store to hold data. In the object store, the data is stored in the form of "key-value pairs". Each data record has its own corresponding primary key, which is unique and can't be repeated. Duplication of a primary key would result in an error being thrown.
Asynchronous: Operations with IndexedDB can be performed side by side with other user operations because it doesn't block the main browser thread, unlike localStorage, which is synchronous. This prevents reading and writing of large amounts of data from slowing down the performance of the web page.
Limits data access to the same domain: Each database corresponds to the domain name that created it. The web page can only access the database which is under its own domain name, but not a cross-domain database.
Support transactions: This means that as long as one of a series of the steps fails, the entire transaction will be canceled, and the database is rolled back to the state before the transaction occurred. So there is no case where only a part of the data is rewritten.
Supports all data types: IndexedDB isn't limited to storing just strings, but can also store anything that can be expressed in JavaScript, including boolean, number, string, date, object, array, regexp, undefined, and null. It also allows storing blobs and files, which applies to our use case in this tutorial.

IndexedDB API is low-level and may seem a bit daunting to use to some. For this reason, libraries such as localForage, dexie.js, ZangoDB, PouchDB, idb, idb-keyval, JsStore and lovefield provide a simpler API that makes IndexedDB more programmer-friendly.

I'm going to be demonstrating how to store an object using the LocalForage JavaScript library. This is a wrapper that provides a simple name: value syntax for client-side data storage, which uses IndexedDB in the background but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.

Example

To install this, simply run

npm install localforage

LocalForage syntax imitates that of localStorage but with the ability to store many types of data instead of just strings. For example:

var person = {
  firstName:"John", 
  lastName:"Doe",
};

localForage.setItem('person', person); // Saves data to an offline store

localForage.getItem('person'); // Retrieves item from the store

//=>  {
//     firstName:"John", 
//     lastName:"Doe",
//   };

Using a Class Module Instance

IndexedDB is great for offline storage and comes with a lot of capabilities but may seem like an overkill for simple instances where you simply want to persist some files into memory and access them temporarily.

We can achieve this by creating a simple class module as a form of abstraction, then exposing its instance.

class StoredFiles {
  constructor(files) {
    this.files = files;
  }

  saveFiles(value) {
    this.files = value;
  }

  getFiles() {
    return this.files;
  }

  resetValues() {
    this.files = null;
  }
}


let uploads = new StoredFiles(); // Creates an instance of StoredFiles class

export default uploads

We can easily import the uploads in any file we need and access the methods of StoredFiles. For saving the files in memory, we can run:

uploads.saveFiles(["file1", "file2"]);

Afterwards, we can retrieve the files in any other component by running:

uploads.getfiles();  

//=> ["file1", "file2"]

We can clear the values when we are done by running:

uploads.resetValues();

DEV Community: Chioma Halim

Why Your Iframe Fails (OAuth, Sandbox & Cross-Origin Security Explained)

What is an iframe?

Security Considerations

OAuth Restrictions in Iframes

Best Practices

Iframe sandbox Attribute

Common Sandbox Values for an iframe

Communication Between an iframe and It's Parent

Best Practices

Push Notifications with Firebase in React.js

Introduction

Firebase Setup

Connecting Firebase Cloud Messaging to our Application

Additional Step:

Something went wrong?

Receiving Messages

Foreground Listener Setup

Background Listener Setup

Testing Notifications

Something went wrong ?

Repository Code

Persisting Files in Javascript (React) Applications

What not to do

Using Local Storage

What you can do

Using IndexedDB

Features

Example

Using a Class Module Instance

Iframe `sandbox` Attribute