I'm trying to customize a fiat-to-crypto onramp widget so that I can overwrite the current style for one that matches my react app.
This is a reactjs app, using material ui. This widget exists in an iFrame.
Someone has already managed to do it: https://app.rubic.exchange/buy-crypto?_ga=2.79437588.1459597697.1646699276-647485347.1645485242
I've checked out their work on inspect, but can't seem to replicate it in my react app.
I've tried two methods:
METHOD ONE
Locating the contentWindow.document - unfortunately this did not work as there is no document visible when queried:
function changeStuff() {
const onramperWindow = onramper.contentWindow;
console.log(onramperWindow)
const onramperDocument = onramperWindow.document
console.log(onramperDocument)
}
This results in an error as the document does not seem to be available other than in the parent, which is not what I'm looking to edit.
METHOD TWO
As my react app uses MUI, I've tried utilizing useStyles.
const useStyles = makeStyles({
embedContainer: {
"& iframe": {
position: "absolute",
top: 0,
left: 0,
width: "50%",
height: "100%",
color: "#000000"
}
}
});
Followed by 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, using this method the entire screen is black, as it's injecting the css over the whole page.
Anyone have any guidance/tips/tutorials I can look at to customize the CSS on this iframe widget?
By default the browser has a security system that encapsulates iframes preventing them from communicating with each other and with your page. It is not possible to circumvent this nor should it be.
Imagine you creating a fakebank.com with a bank.com iframe. Monitoring and getting user information smoothly.
But you can download the iframe content and insert it on your page that way you have full access.
ex: jquery:
$('#divframe').load(
'http://www.corsproxy.com/' +
'www.cptec.inpe.br/widget/widget.php?p=3819&w=h&c=474647&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>
Alternative with own proxy in PHP:
proxy.php (with just that content, and nothing else)
<?php
$cache_file = 'proxy_cache.html'; // name file to save cache
if (!@file_exists($cache_file) || (time() - @filemtime($cache_file) > (60 * 60 * 6))) { // check cache expirated and try new request
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://www.cptec.inpe.br/widget/widget.php?p=3819&w=h&c=474647&f=ffffff");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$retorno = str_replace('src="','src="http://www.cptec.inpe.br/widget/',curl_exec($ch)); // add full address in all src
curl_close($ch);
file_put_contents($cache_file, $retorno); // save content in file cache
} else { // cache not expire, open file content wingthout new request
$retorno = file_get_contents($cache_file);
}
echo $retorno; // print content
?>
The content below must be in another file along with the css and everything
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>
Sorry my english is not my native language =D