Not able to login to my app embeded in custom page on freshdesk.Keeps on refershing and coming on same login page.Any refrence or documentation as how to handle it will be really helpful

I have URL that involves login and have created full page app as per instructions in custom app.I have used an Iframe and embeded our App URL in that.But whenever i enter credentials and click enter it just refreshes the login page.
Have used X-Frame-Options for allowing freshdesk from my app But still doe not work.
Need help documentation or some example as how to handle this and make it working. as i have been looking out for several weeks to fix this and Not able to find any solution…nor is there any such senario mentioned as how to login to a website embeded in iframe as custome page in freshdesk developers guide.Please help

Hi @Meenakshi_Kaul ,

Good day!

I got a chance to check out the app you’ve shared with us via support ticket. On examining the same, what we understood is you’re trying to make communication between the parent document (freshdesk sdk app) and child (your iframe). Ideally, this won’t work as it is by just loading in an iframe. The client page would be loaded but to facilitate post & get requests communication, change url of the child iframe at all you have to handle it explicitly.

I don’t think this issue is aligned to our sdk, it’s a general web behaviour. For you to understand better please load the below html code snippet in a simple http server (live server in case if you’re on vscode) & check the behaviour. It would act the same way.

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>A Template App</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script async src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
  </head>
  
  <body>
    <div>
      <iframe src="https://hub.bharatcpbx.com/" height="600px" width="300px"></iframe>
    </div>
  </body>

  <script defer src="scripts/app.js"></script>
  <script async type="module" src="https://unpkg.com/@freshworks/crayons@3/dist/crayons/crayons.esm.js"></script>
  <script async nomodule src="https://unpkg.com/@freshworks/crayons@3/dist/crayons/crayons.js"></script>
</html>

As I said before, this is the expected browser behaviour inside of an iframe. One way I can think of facilitating communication between parent-child windows is via postMessage browser API.

Note: Even in that case, you might face security issues. Sharing a similar thread here for an alternate possible solution - How to receive messages from other sites when they open in an iframe - #4 by mariappan

Please check it out & as said before you can solve this just by loading as iframe. Hope this helps.

Thanks

Hi,
If NOT like embed URL in iFrame …what is the best solution in order to make our app run inside the Freshdesk account (as a custom page) without taking too much time and effort.
Can you suggest some simple solution as what I am trying to achieve using iFrame, in another way(if some code snippet is there) or any documentation that you can share which will help me resolve this faster.

1 Like

Hi @Meenakshi_Kaul ,

Note: Even in that case, you might face security issues. Sharing a similar thread here for an alternate possible solution - How to receive messages from other sites when they open in an iframe - #4 by mariappan

If you still want to stick to the iframe way, this is the only possible solution I could think as of now.

The ideal approach should be as below,

Instead of loading your app as iframe, build the similar UI as part of custom app. When you click on submit button of the you would be calling some API’s right? You’ve to use Freshworks Developer Docs | Freshworks app ecosystem to handle those API calls and following operations as per your flow.

Can you suggest some simple solution as what I am trying to achieve using iFrame

Sorry, I can’t think of a more simpler approach than the above one & please note this is not exactly our platform restriction. It’s the general web security standard & behaviour as a whole.

in another way(if some code snippet is there) or any documentation that you can share which will help me resolve this faster.

Please check out the sdk docs and sample apps to get more idea on the process of building your own custom app.

Thanks

3 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.