0

I've got an iframe tag in my HTML code. Into that there's a tag with a class: message_info. I want to modify the properties of this class but the css doesn't work.

I try this:

HTML:

<iframe src="https://www.tuttocampo.it/WidgetV2/Risultati/570ce2a7-5474-11e4-b2c1-448a5b2c3468" scrolling="no" class="iframe02" height="600" frameborder="0"></iframe>

CSS:

.iframe02 .message_info {
    margin: 0 !important;
}

but this doesn't work.

While searching i found this JavaScript code:

<script>
    const iframe = document.querySelector('iframe.iframe02');
    const messageInfo = iframe.contentWindow.document.querySelector('.message_info');
    messageInfo.style.margin = '0px';
</script>

but this also didn't work.

Nicola Adami
  • 1
  • 2
  • 1
    Is the `top` frame (your browser tab) running on `https://www.tuttocampo.it/` website, or is it just a local file through `file:///`? – MfyDev Jul 18 '23 at 14:37
  • 9
    Most important question... is the page in the `iframe` the same domain as the page that hosts the `iframe`? If not, do you have [`CORS`](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) set up to allow access. If not, you're out of luck as you are hitting cross-origin security – freefaller Jul 18 '23 at 14:37
  • 1
    @MfyDev i'm sorry for the incomprehension, my site is a local PHP file, tuttocamo.it is an external site, unrelated with this. – Nicola Adami Jul 19 '23 at 07:34
  • 1
    @HanHan You cannot save the code in a variable, as there is no way to read it. You cannot execute an AJAX request, and you cannot read `innerHTML` of such an `iframe`. The only way to do this is, as I mentioned under freefaller's answer, to get your server to fetch it for you... in which case you don't need such hacks, you can just use `iframe` like OP wanted to in the first place. – Amadan Jul 19 '23 at 08:05
  • @NicolaAdami If its your local file, you cannot access DOM of `iframe`. Its blocked by `CORS`. – MfyDev Jul 19 '23 at 18:09

1 Answers1

2

Based on the OP's response...

the page in the iframe isn't the same domain of the page. The iframe's url is an external site

You are not going to be able to do what you want to do.

You are hitting something called the same-origin policy which is designed to stop the manipulation of a site that you do not have any control over.

The only way this would work is if you had access to that external site, and had the ability to implement CORS.

Edit: As pointed out by @CBroe, CORS would not actually allow you to run javascript into the iFrame, something I was not aware of.

You can however, implement window.postMessage() as described in this comprehensive answer... but you still need control of the external site.

As suggested by @Amadan, an option (should it be available to you) is to use you own server to scrape the external website, as the same-origin policy only applies to client browsers.

However, there are several downsides with this approach (and others that I probably haven't thought of)...

  • you need your own server
  • you run the risk of being IP-blocked due to unauthorised use of the content
  • the resultant webpage probably wouldn't work properly (links, images, external files, etc)
freefaller
  • 19,368
  • 7
  • 57
  • 87
  • Another way to do this is to proxy the remote page by fetching it serverside and serving it from your own server. Same-origin policy only applies to clientside requests. – Amadan Jul 19 '23 at 07:59
  • Good point @Amadan - do you mind if I update my answer with that idea? – freefaller Jul 19 '23 at 08:00
  • thanks for the explanation, unfortunately i haven't got the permissions of this site. – Nicola Adami Jul 19 '23 at 08:01
  • Of course I don't mind :) Also the downside should be mentioned: your server might be identified as an unauthorised leecher of content and IP-blocked. – Amadan Jul 19 '23 at 08:01
  • @NicolaAdami - then I'm sorry to be the bearer of bad news. I hope you find some other suitable solution – freefaller Jul 19 '23 at 08:02
  • _"The only way this would work is if you had access to that external site, and had the ability to implement CORS."_ - CORS does not allow JavaScript to access the DOM of an iframe that was loaded from a different origin. (The _content_ behind the iframe's src URL could be fetched in the background and inserted into the current document, if it was CORS-enabled. But whether that would work with any of this kind of "widgets", is probably doubtful again.) – CBroe Jul 19 '23 at 08:15
  • @CBroe - this is something I was not aware of... I'm struggling to find any confirmation of it. Do you have a source? – freefaller Jul 19 '23 at 08:21
  • 1
    I don't have anything that says it explicitly. https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#cross-origin_script_api_access mentions that access is limited to a few methods/properties of Window and Location objects in a cross-origin situation though - and does _not_ say that those restrictions could be lifted by CORS, as it does in the previous section, regarding network requests. And that is basically the gist of it: CORS applies to network requests, on the HTTP level. – CBroe Jul 19 '23 at 08:35
  • Thanks @CBroe - something to definitely be aware of. Fortunately I've never needed to code in a CORS situation, hence my lack of knowledge – freefaller Jul 19 '23 at 08:49