Determine if a site is accessible through an iframe? embed a shopping cart widget

Question

I have a shopping basket that I want to embed in the widget / iframe on other user sites, I see three ways to do this with drawbacks. Below are the parameters, calculated mainly for the smallest work.

• Create an interactive shopping cart user interface in javascript widgets, then transfer values ​​to the script server using AJAX, the variables are transferred to the main site when the user clicks “checkout”, the user is then redirected to the main page of the shopping cart using variables filled with what entered into the widget.

  • pros: full experience
  • minus . Most work on creating user interface requests and AJAX.
    
    

• Somehow to determine whether the user enters the shopping cart through an iframe, if in this case there is an alternative code that opens a new window when the user clicks “checkout”, redirects the user to a protected page and receives variables from the cart through AJAX to complete the final check .

  • Pros: average workload, must complete an AJAX request to retrieve variables from the shopping cart to complete the final check
  • minus . We can easily detect if a site is accessible from a user in an iframe on another site?
    
    

• complete the entire validation process inside the iframe / widget.

  • Pros: minimum amount of work, just insert the basket into the iframe
  • minus will not show https in the browser. User may be reluctant to buy

What is the best option?

Answer 1

If you could provide a little more information, perhaps I could offer you an even better option. For starters, what did you create this application (languages ​​/ frameworks)? Also, will you say that your application functionality is similar to Shopify because you allow users to host e-commerce sites through your service? If not, tell us a little more about your application.

Here is a quick answer to your options.

option 1: the only real option i see. Regardless of whether you implement a shopping cart in a specific iframe or display it on a user’s page as part of a template, you must go to the client on your main site to complete the checkout process. Or at least give them a lot of screen real estate for work (for example, significant modality).

option 2: dirty. You can find out if the request comes from a remote form (e.g. iframe) by adding URL parameters. But taking the approach you propose with this does not make much sense.

option 3: too heavy if you do not take a modal approach, like what I mentioned in response to option 1.

If you are creating an application like Shopify, you should be able to create a template for each user website that has a section on displaying the shopping cart related to the current customer session. With this approach, there are no frames or widgets. But then again, it all depends on the use cases of your application.

Answer 2

If your only problem with Option 2 is to detect if your content is loading in the iframe, you can do this using JavaScript using "top.frames.length" or "top === self."

For example, you can show or hide other contents of the conditional form or another submit button using the following:

if (top.frames.length == 0) { // Show content if not embedded in an iframe. document.getElementById('embedded-content').style.display = "none"; document.getElementById('unembedded-content').style.display = "block"; } else { // Show content if embedded in an iframe. document.getElementById('embedded-content').style.display = "block"; document.getElementById('unembedded-content').style.display = "none"; } 

Answer 3

As you said, the first option is the best in terms of user experience and, most likely, to achieve the maximum possible conversions. How much better the conversion is compared with the next best solution, it is impossible to objectively measure, since it includes regular customers, your own brand name, type of products, etc. Since conversion rates will directly affect you (and your company), this is to make an assessment, to see if your efforts will be spent in the short and long term.

The second option is sweet middle ground; you still get brand recognition, and customers will have some confirmation of security (through the address bar); (i) frame detection is easily performed by a simple JavaScript comparison: top === window . However, you lose continuity and, therefore, are likely to lose some transformation. If this risk is manageable, I would take this opportunity in the short term.

The inability to see the security certificate directly through the green lock makes the third option the least desirable. However, not all is lost; thanks to the clever use of images, you can still gain some trust with your end user, as described in this image , which is part of a larger article from Smashing magazine.

Your decision should be based on:

• what can be done in the short term
• what needs to be done in the long run
• How important are safe visual cues to my potential client.
• time / money spent on a solution versus revenue (break-even analysis)