Styling iFrame Widget with Custom CSS (React, MUI)

Question

Styling iFrame Widget with Custom CSS (React, MUI)

I'm currently working on personalizing a fiat-to-crypto integration widget to align with the style of my react application.

The setup involves a reactjs platform using material ui, with the widget embedded in an iFrame.

An individual has successfully accomplished this customization here:

After inspecting their implementation, I'm facing challenges replicating it within my react app.

I've experimented with two approaches:

APPROACH ONE

Attempting to access contentWindow.document - unfortunately, querying reveals no visible document:

function changeStuff() {
    const onramperWindow = onramper.contentWindow;
    console.log(onramperWindow)
    const onramperDocument = onramperWindow.document
    console.log(onramperDocument)
 }

This approach encounters errors as the document doesn't appear accessible outside of the parent element which isn't the target for editing.

APPROACH TWO

Given that my react app utilizes MUI, I tried incorporating useStyles:

const useStyles = makeStyles({
    embedContainer: {
      "& iframe": {
          position: "absolute",
          top: 0,
          left: 0,
          width: "50%",
          height: "100%",
          color: "#000000"
      }
    }
  });

Followed by integrating the iframe:

<iframe
id="onramper"
src="https://widget.onramper.comcolor=346eeb&apiKey=pk_test_x5M_5fdXzn1fxK04seu0JgFjGsu7CH8lOvS9xZWzuSM0"
height="595px"
width="800px"
title="Onramper widget"
frameborder="no"
allow="accelerometer;
autoplay; camera; gyroscope; payment"
className={classes.embedContainer}
>
<a href="https://widget.onramper.com" target="_blank">Buy crypto</a>
</iframe>

However, this method results in the entire screen turning black due to injecting css across the entire page.

If anyone has insights, tips, or resources on how to customize the CSS of this iframe widget, I would greatly appreciate it.

javascript css reactjs iframe material-ui

Answer 1

Answer №1

By default, web browsers have a security feature that isolates iframes from interacting with each other and the main page. This restriction is important for security reasons and should not be bypassed.

Imagine creating a website like fakebank.com with an iframe from bank.com, allowing you to monitor and collect user information without detection.

However, there is a workaround where you can download the content of the iframe and embed it on your own page to gain full access.

For example: Using jQuery:

$('#divframe').load(
    'http://www.corsproxy.com/' +
    'www.cptec.inpe.br/widget/widget.php?p=3819&amp;w=h&amp;c=474647&amp;f=ffffff .tabtop',  function() {
         $('#divframe').html( $('#divframe').html().replace(new RegExp('src="', 'g'),'src="http://www.cptec.inpe.br/widget/') );
    });

HTML:

<div id="divframe"></div>

Alternatively, using a custom PHP proxy:

proxy.php (with only this content, nothing else)

<?php
$cache_file = 'proxy_cache.html'; // filename to store cache

if (!@file_exists($cache_file) || (time() - @filemtime($cache_file) > (60 * 60 * 6))) { // check if cache has expired or make new request
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "http://www.cptec.inpe.br/widget/widget.php?p=3819&amp;w=h&amp;c=474647&amp;f=ffffff");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = str_replace('src="','src="http://www.cptec.inpe.br/widget/',curl_exec($ch)); // update src attribute values
    curl_close($ch);
    file_put_contents($cache_file, $response); // save response as cache
} else { // use cached content if not expired
    $response = file_get_contents($cache_file);
}

echo $response; // display content
?>

The following content should be in a separate file along with CSS and any dependencies

Using jQuery:

$('#divframe').load(
    'proxy.php .tabtop',  function() {
        $('#divframe .tab_content').hide();
        $('#divframe .tabs li:first').addClass('active');
        $('#divframe .tab_content:first').show();
        $('#divframe .tabs li').click(function(){
            $('#divframe .tabs li').removeClass('active');
            $(this).addClass('active');
            $('#divframe .tab_content').hide();
            $($(this).children('a').attr('href')).show();
        });
    });

HTML:

<div id="divframe"></div>

Apologies for any language errors, English is not my first language =D

Answer 2

By default, web browsers have a security feature that isolates iframes from interacting with each other and the main page. This restriction is important for security reasons and should not be bypassed.

Imagine creating a website like fakebank.com with an iframe from bank.com, allowing you to monitor and collect user information without detection.

However, there is a workaround where you can download the content of the iframe and embed it on your own page to gain full access.

For example: Using jQuery:

$('#divframe').load(
    'http://www.corsproxy.com/' +
    'www.cptec.inpe.br/widget/widget.php?p=3819&amp;w=h&amp;c=474647&amp;f=ffffff .tabtop',  function() {
         $('#divframe').html( $('#divframe').html().replace(new RegExp('src="', 'g'),'src="http://www.cptec.inpe.br/widget/') );
    });

HTML:

<div id="divframe"></div>

Alternatively, using a custom PHP proxy:

proxy.php (with only this content, nothing else)

<?php
$cache_file = 'proxy_cache.html'; // filename to store cache

if (!@file_exists($cache_file) || (time() - @filemtime($cache_file) > (60 * 60 * 6))) { // check if cache has expired or make new request
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "http://www.cptec.inpe.br/widget/widget.php?p=3819&amp;w=h&amp;c=474647&amp;f=ffffff");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = str_replace('src="','src="http://www.cptec.inpe.br/widget/',curl_exec($ch)); // update src attribute values
    curl_close($ch);
    file_put_contents($cache_file, $response); // save response as cache
} else { // use cached content if not expired
    $response = file_get_contents($cache_file);
}

echo $response; // display content
?>

The following content should be in a separate file along with CSS and any dependencies

Using jQuery:

$('#divframe').load(
    'proxy.php .tabtop',  function() {
        $('#divframe .tab_content').hide();
        $('#divframe .tabs li:first').addClass('active');
        $('#divframe .tab_content:first').show();
        $('#divframe .tabs li').click(function(){
            $('#divframe .tabs li').removeClass('active');
            $(this).addClass('active');
            $('#divframe .tab_content').hide();
            $($(this).children('a').attr('href')).show();
        });
    });

HTML:

<div id="divframe"></div>

Apologies for any language errors, English is not my first language =D

Styling iFrame Widget with Custom CSS (React, MUI)

Answer №1

Similar questions

Tips for fetching a particular item from a getItem dynamoDB in JavaScript

What is the best way to send a promise back from my service to my controller?

What is the best way to ensure my Form stays fresh when I switch tabs?

Create a grid div that expands vertically to completely fill the available space

Ideas for enhancing your flutter calendar experience

Implement CSS to stack images upon zooming

Identifying a loop within a hierarchy of JavaScript elements

Issues with jQuery causing responsive CSS triangles to fail implementations

Tips for detecting successful file downloads from the client side using Mean/AngularJS

What is the best way to fetch this JavaScript function?

Caution: Using functions as a React child is not allowed. This error can occur when you mistakenly return a Component instead of <Component />

I have created a textbox with a button, but I am unsure of how to delete it

Explain the concept of utilizing curried state handlers within a React and Typescript application

How to make background color transparent in CSS for Safari browser

Vue.js - dynamically applying CSS classes based on conditions

Having trouble getting AJAX to work with posting JSON data? Unsure of what steps to take next?

Shortening properties in React components

Uncovering "camouflaged" HTML using Jsoup

initiate a click event within another click event

How should we properly insert a line break here? Additionally, can you explain why the square is displaying the incorrect color?