Putting non-iFrameable Content in a Modal

drumeggbond · May 15, 2018

First things first, I am NOT trying to clickjack - I don't even honestly know what that is or how someone would benefit from it - my question is being asked specifically for UI/UX purposes.

So one thing my team loves about building sales flows with Facebook Messenger bots is that the native browser in the Messenger app functions a lot like an iframe - it opens webpages in a modal-style box with an X to close it and functions like a modal window.

My question is: Is there a method in Chrome Mobile and/or Safari Mobile that allows you to do something like this with distinctly non-iframeable site pages that is NOT just opening the page in a new tab?

Our goal is to open webpages in a way that they can easily be closed when the user is done with them, which will return them to the underlying page - new tabs just doesn't fit the bill. Unfortunately iframing into a modal won't work for us, although we'd love it to, because the offers we're seeking to open are not iframeable.

Let me know your thoughts, I'm open to any approach and discussing, thanks!

0x29a · May 15, 2018

Not entirely sure what you're trying to accomplish..

You have a website, if the visitor clicks on a link in your site, you want the site to open another website within your site? like a popup or something? I don't use FB messenger, do you have another example you can provide?

drumeggbond · May 15, 2018

Sure - so we build these offer walls that have like 4 links stacked up, with the instruction to complete each item as its own step. When the user clicks the links, they open new windows, typically with forms in them - these are provided by third-parties. We want an implementation so users can more intuitively know to close these items, return to the main list of 4 items, and proceed to the next item. In an ideal world I would be able to build a multi-step flow for these and step the user through them one by one, but they are all they're own individual offers and need to be done this way.

Let me know if that helps, thanks

0x29a · May 15, 2018

When the user clicks the links, they open new windows, typically with forms in them - these are provided by third-parties

Please correct me if I'm wrong, but you want these "sites/forms" to show up WITHIN your site, once user hits the link, instead of opening a new tab and going to the external site, correct? Like a 'virtual browser' within your site?

drumeggbond · May 16, 2018

0x29a said:
Please correct me if I'm wrong, but you want these "sites/forms" to show up WITHIN your site, once user hits the link, instead of opening a new tab and going to the external site, correct? Like a 'virtual browser' within your site?

I couldn't have said it better myself, that is exactly what we're after

That is exactly the issue - when they open in new tabs there is no intuitive way to communicate that they need to close the window afterwards, but that little X in the corner solves all of our issues - we just can't use iframe modals, which is the big challenge

The only other applicable option would be if the mobile browsers offered some sort of "new tab alternative" like a popup window, but I can't imagine such a thing exists

0x29a · May 16, 2018

Cool, all clear now. If you seen one of thous 'online web proxy' sites, you can display a site within the site. Your site would simply fetch the content of the target site (do a curl request) and render it within your site. Are thous target sites yours our affiliate networks? If affiliate networks, there might be few problems with this approach:

Problem 1: The offer/affiliate site will see all the users coming from the same location, meaning since your site is used as a 'middle-man' it will be always the same IP, which depending on your affiliate network might raise some red flags.

Problem 2: The offset/affiliate site will send cookies. Techically you 'can' forward the cookies, but the users browser will store them as of they have come from your domain, not the affiliates. If cookies are important for the affiliate site to track sales, recurring orders, this might become a problem.

Problem 3: Depending on how the site is built, some functionality might break. JS/cross-domain issues.

If you can get passed thous problems, you can detect when user has completed the offers, auto-close them, have a nice 'loader' indicator etc.. , but it would require a custom solution. I believe you could achieve a smooth UI experience if you had a AJAX based "browser" which executes requests in the background (sends them to backend for cURL to execute) and forwards them back to the sub-browser, but as mentioned before, it would require a bit of coding.

Another approach would be making your own app (since you mentioned mobile), that way you could have a full control over this process.

By the way, do you mind sharing the reason you're avoiding iframes?

drumeggbond · May 16, 2018

0x29a said:
Cool, all clear now. If you seen one of thous 'online web proxy' sites, you can display a site within the site. Your site would simply fetch the content of the target site (do a curl request) and render it within your site. Are thous target sites yours our affiliate networks? If affiliate networks, there might be few problems with this approach:

Problem 1: The offer/affiliate site will see all the users coming from the same location, meaning since your site is used as a 'middle-man' it will be always the same IP, which depending on your affiliate network might raise some red flags.

Problem 2: The offset/affiliate site will send cookies. Techically you 'can' forward the cookies, but the users browser will store them as of they have come from your domain, not the affiliates. If cookies are important for the affiliate site to track sales, recurring orders, this might become a problem.

Problem 3: Depending on how the site is built, some functionality might break. JS/cross-domain issues.

If you can get passed thous problems, you can detect when user has completed the offers, auto-close them, have a nice 'loader' indicator etc.. , but it would require a custom solution. I believe you could achieve a smooth UI experience if you had a AJAX based "browser" which executes requests in the background (sends them to backend for cURL to execute) and forwards them back to the sub-browser, but as mentioned before, it would require a bit of coding.

Another approach would be making your own app (since you mentioned mobile), that way you could have a full control over this process.

By the way, do you mind sharing the reason you're avoiding iframes?

That's all fabulous info, thank you. Answering in reverse:

The reason we're exploring this is simply because the affiliate offers we are sending users to have disabled iframing with that xFrame metatag that disallows it - they do it to prevent abuse of their offers, and most of them are not interested in providing us an iframeable version of the offer

Making our own app would be fabulous, but adding "install this app" as a step in our signup will drop a lot of users - it is however something we are considering as a long-term solution, but it will not solve the problem

So all of our offers are wrapped in HasOffers links, so "ip" is normally passed along in the link as a URL query value, so IP MIGHT not be an issue - I do not believe we use cookies to convert offers

Your Problem 3 was my biggest concern - if we're ripping a site with cURL I'm concerned we'll lose essential functions, which is not even to mention that we already have to "unwrap" a HasOffers link to get to the destination site

Are there any tutorials on the cURL method you could point me to? I'd love to learn more about it but really don't know where to begin - thank you for all of the guidance!

0x29a · May 16, 2018

The cURL I mentioned is simply a command/library which lets you create a HTTP request from a command line or execute it from the code, you can use any another library of your choice. Do you use PHP? I can give you a small example

drumeggbond · May 16, 2018

Yes, we are using Drupal 7 specifically, so PHP is our core language - thank you!

0x29a · May 16, 2018

Here's an example:

Code:

<?php
 
    $curl     = curl_init();
    $buffer = request( $curl, "http://example.com" );

    echo "<div style=\"width:800px;height:800px;border:2px solid yellowgreen;\">"
        echo $buffer;
    echo "</div>";

    function request($curl, $url, $post = null)
    {
        try
        {
                curl_setopt_array($curl, array
                (
                        CURLOPT_RETURNTRANSFER          => true,
                        CURLOPT_FOLLOWLOCATION          => true,
                        CURLOPT_HEADER                  => false,
                        CURLOPT_AUTOREFERER             => true,
                        CURLOPT_SSL_VERIFYPEER          => false,
                        CURLOPT_URL                        => $url,
                        CURLOPT_USERAGENT               => 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:30.0) Gecko/20100101 Firefox/30.0',
                        CURLOPT_HTTPHEADER              => array
                        (
                                'Accept-Language: en-US;q=0.6,en;q=0.4',
                                'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
                        )
                ));

                return  curl_exec( $curl );
        }
        catch(Exception $exception)
        {
                die( $exception );
        }
    }

Place it somewhere in the websites directory and run it through browser, it should show the site within a green box. Please note, there will be a lot of things you will have to take of, this is simply a very primitive example of the idea.

Also note, that you should use it via AJAX request, instead of processing it directly with PHP on request, that way you will have a nice smooth interface. The basic idea is this:

1. Your site executes AJAX request and calls the the second example I provided. Arguments such as website target etc.. are passed to the script.
2. Script reads the post request, executes it and returns the result.
3. Response to our AJAX request has been received, we're rendering it within the browser inside some DIV.

The 2nd example (sketch) your websites AJAX request will call this script and the script will execute the request to affiliate site and return the HTML to your AJAX request:

Code:

<?php
 
    $curl     = curl_init();
    $buffer = request( $curl, $_POST[ 'target' ] );

    function request($curl, $url, $post = null)
    {
        try
        {
                curl_setopt_array($curl, array
                (
                        CURLOPT_RETURNTRANSFER          => true,
                        CURLOPT_FOLLOWLOCATION          => true,
                        CURLOPT_HEADER                  => false,
                        CURLOPT_AUTOREFERER             => true,
                        CURLOPT_SSL_VERIFYPEER          => false,
                        CURLOPT_URL                        => $url,
                        CURLOPT_USERAGENT               => 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:30.0) Gecko/20100101 Firefox/30.0',
                        CURLOPT_HTTPHEADER              => array
                        (
                                'Accept-Language: en-US;q=0.6,en;q=0.4',
                                'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
                        )
                ));

                return  curl_exec( $curl );
        }
        catch(Exception $exception)
        {
                die( $exception );
        }
    }

    // Response for our AJAX request
    echo json_encode
    (
        'content' => $buffer,
        'header'  => .....
    );

This is just the basic idea, a lot more detail will have to go into this. If this was helpful, please be sure to give me a 'thanks'

Additional note: You will have to re-write internal links in the response from curl, so that when user clicks a link, the click event is overwritten and another AJAX request is triggered within your site. If you don't fix the links, the users browser will simply redirect to whatever they clicked, which is not what you want.

As I mentioned before, this might end up being quite a bit of work as there are a lot of things to handle, might be better to look for an existing script that does this, but if you have time, might be a fun project.

drumeggbond · May 16, 2018

Wow, that's super helpful, thank you so much! How do I give you a "thanks?"

0x29a · May 16, 2018

I'm happy to help

(mod edit: don't beg for likes)

But don't get your hopes up, as affiliate network might not be down with this approach if they're not down with iframes, but all depends how advanced they are and on their rules. Good luck!

drumeggbond · May 16, 2018

Oh yea, I'm keeping my hopes very low lol - honestly I don't expect to get anything from this, but I do want to make sure I've exhausted all options before kicking it to the higher ups - cheers, and thanks again!

Putting non-iFrameable Content in a Modal

drumeggbond

Newbie

0x29a

Newbie

drumeggbond

Newbie

0x29a

Newbie

drumeggbond

Newbie

0x29a

Newbie

drumeggbond

Newbie

0x29a

Newbie

drumeggbond

Newbie

0x29a

Newbie

drumeggbond

Newbie

0x29a

Newbie

drumeggbond

Newbie

Main Menu

Marketplace

Making Money

BlackHat World