Putting non-iFrameable Content in a Modal

Discussion in 'Programming' started by drumeggbond, May 15, 2018.

  1. drumeggbond

    drumeggbond Newbie

    Joined:
    May 15, 2018
    Messages:
    7
    Likes Received:
    1
    Gender:
    Male
    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!
     
  2. 0x29a

    0x29a Newbie

    Joined:
    May 9, 2018
    Messages:
    36
    Likes Received:
    20
    Gender:
    Male
    Occupation:
    Programmer/Electrical Engineering
    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?
     
    • Thanks Thanks x 1
  3. drumeggbond

    drumeggbond Newbie

    Joined:
    May 15, 2018
    Messages:
    7
    Likes Received:
    1
    Gender:
    Male
    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
     
  4. 0x29a

    0x29a Newbie

    Joined:
    May 9, 2018
    Messages:
    36
    Likes Received:
    20
    Gender:
    Male
    Occupation:
    Programmer/Electrical Engineering
    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?
     
    • Thanks Thanks x 1
  5. drumeggbond

    drumeggbond Newbie

    Joined:
    May 15, 2018
    Messages:
    7
    Likes Received:
    1
    Gender:
    Male
    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
     
  6. 0x29a

    0x29a Newbie

    Joined:
    May 9, 2018
    Messages:
    36
    Likes Received:
    20
    Gender:
    Male
    Occupation:
    Programmer/Electrical Engineering
    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?
     
    • Thanks Thanks x 2
  7. drumeggbond

    drumeggbond Newbie

    Joined:
    May 15, 2018
    Messages:
    7
    Likes Received:
    1
    Gender:
    Male
    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!
     
  8. 0x29a

    0x29a Newbie

    Joined:
    May 9, 2018
    Messages:
    36
    Likes Received:
    20
    Gender:
    Male
    Occupation:
    Programmer/Electrical Engineering
    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
     
    • Thanks Thanks x 1
  9. drumeggbond

    drumeggbond Newbie

    Joined:
    May 15, 2018
    Messages:
    7
    Likes Received:
    1
    Gender:
    Male
    Yes, we are using Drupal 7 specifically, so PHP is our core language - thank you!
     
  10. 0x29a

    0x29a Newbie

    Joined:
    May 9, 2018
    Messages:
    36
    Likes Received:
    20
    Gender:
    Male
    Occupation:
    Programmer/Electrical Engineering
    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.
     
    • Thanks Thanks x 1
    Last edited: May 16, 2018
  11. drumeggbond

    drumeggbond Newbie

    Joined:
    May 15, 2018
    Messages:
    7
    Likes Received:
    1
    Gender:
    Male
    Wow, that's super helpful, thank you so much! How do I give you a "thanks?"
     
  12. 0x29a

    0x29a Newbie

    Joined:
    May 9, 2018
    Messages:
    36
    Likes Received:
    20
    Gender:
    Male
    Occupation:
    Programmer/Electrical Engineering
    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!
     
    • Thanks Thanks x 1
    Last edited by a moderator: Jul 23, 2018
  13. drumeggbond

    drumeggbond Newbie

    Joined:
    May 15, 2018
    Messages:
    7
    Likes Received:
    1
    Gender:
    Male
    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!
     
    • Thanks Thanks x 1