CORS and iframe

Support
1

A customer loads a subpage of my netlify site in their web app. They use

<iframe
   src="https://myNetlifySite/subpage"
   style="width: 600px; height: 350px"
   frameborder="0"
 ></iframe>

That works perfectly, but now they want to take a screenshot of a certain <div> of the subpage via a JS script they host. They get a CORS error.

What can I do?

2

@Philipp You could try:
https://docs.netlify.com/routing/headers/

As per 3.2.1 here:
https://answers.netlify.com/t/support-guide-handling-cors-on-netlify/107739

3

Thanks Nathan.
In

[[headers]]
  for = "/*"
  [headers.values]
    access-control-allow-origin = "*"

is for = my subpage
and access-control-allow-origin = the customer’s site?

4

@Philipp The documentation for the configuration file format is on the page linked, here:
https://docs.netlify.com/routing/headers/#syntax-for-the-netlify-configuration-file

The following keywords are available:
  for: the path or URL where the headers will be added.
  values: a map of values to add to the response headers.

So for is the path/s on your site that you want the headers to apply to.

access-control-allow-origin is this header:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

5

Thanks again Nathan.
I will test it and let you know, if it works.

6

It did not work. They still get the CORS error.

Here’s in more detail, what I did:
We are talking about this site: https://externaltest.walterroller.de/UTFK_calculator
It points to: https://externaltest.netlify.app/UTFK_calculator

In the wwwroot folder I added a file netlify.toml with the content

[[headers]]
  for = "/UTFK_calculator"
  [headers.values]
    access-control-allow-origin = *

The customer added an <iframe> on their page:

<iframe
   src="https://externaltest.walterroller.de/UTFK_calculator"
   style="width: 600px; height: 350px"
   frameborder="0"
 ></iframe>

They want to run a JS script to capture a screenshot of the image you see on the original site. Since the dimensions are dynamic (e. g. change the finned length and see that the corresponding dimension changes), I cannot simply give the PNGs to our customer. That’s we they want to capture the screenshot of the surrounding <div>.

Here’s their error message:
image

What could we do?

7

@Philipp It’s probably immaterial, but the Netlify answer I linked had "*" not * as the value.

If you’re trying to run JavaScript across the frame, then you’re probably running in to this
https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame

There are various answers suggested there.

8

Is it immaterial?
You also sent this link. There, it is without the double quotes, but of course you define the syntax of your header.

The accepted answer states that CORS is not possible with iframes. Maybe we will try the mentioned workaround.

9

I’m not sure, you’d have to test, I just raised it as it’s something I spotted, and am just indicating that it may not make any difference.

Yep, to explain the access-control-allow-origin header, since you may have been unfamiliar.
It’s not Netlify documentation though, so it might not account for Netlify’s toml format requirements.

I don’t define anything, as I don’t work for Netlify.

As you originally reported a cors issue, I provided the usual answer.
When you provided more specific detail, I provided a more specific answer.
Hopefully those stack overflow answers can help you get things going.

10

Thanks again Nathan for your help.
I will find a workaround…

BR

Philipp