Search code examples
javascriptjsoniframe

JSON syntax error when running page in iFrame

I'm developing a website where users can book a table in a restaurant online. Everything's working fine, except one thing: When I put the reservation page in an iFrame on another domain, in a lot of browsers I get an error Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>). The Network -> Response tab in DevTools tells me, that response data could not be loaded because the request has been redirected.

This is the page that works well: https://dev.table4u.de/dimostrazione

Here I put the page in an iFrame for testing: https://www.restaurant-zukunft.de/iframe-test

This error comes up in a lot of browsers except Firefox, so could this be a problem with formatting the data?

Solution

  • No, this is not a problem related to data. It's a problem with Chrome (and other browser). It is very strict when you use iframe. When you send POST request to https://dev.table4u.de/index.php?option=com_tablebooking&task=search.getWorkingHours, you can remark that cookie is not sent.

    enter image description here

    It's not the same for Firefox :

    enter image description here

    So, you're backend part think that the current client is not trusted so it redirects the link instead of given you the JSON that you expect.

    Chrome (and other browser) avoid to send cookie because domain is changed due to SameSite policy (You can check on the internet what is it exactly). It expected www.restaurant-zukunft.de but you use dev.table4u.de on POST request. You can temporarly disable this behaviour on Chrome by changing the following flag.

    enter image description here

    You can found it on chrome://flags/. But it's a very bad idea to do this. In your case, try to use same domain. Or avoid to use iframe if possible.