How does one build a widget on someones website and is hosted on yours?

Question

This question is a referenced to this question.
So, after some research of JSONP and some testing, I've come to the conclusion, that I have no idea what I'm doing...

What do I need?

I am making a customer service for people to use on their website. In the end, someone who wants our web application embedded into their website, needs to get some JavaScript code with a authorization key.

What do I have?

I have played with the code a bit and this is what I have:

homepage.php (client side)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
var key= "12345";
var url = 'http://www.example.com/json.php?callback=?&auth=' + key + '';

$.ajax({
    type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       document.write(json.csBlock[0].frame); //Call to the iFrame
       // document.write(json.csBlock[0].layout);
       // document.write(json.csBlock[0].core);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);
</script>
</head>
<body>

 </body>
 </html>

So this JavaScript requests a callback to my server...

json.php (server side)

<?php 
if ($_GET['auth'] === "12345"){
?>
jsonCallback(
    {
        "csBlock":
        [
            {
                "frame": "<iframe src='http://www.example.com/content/testpage.php'></iframe>",
                "layout": "<link rel='stylesheet' href='http://www.example.com/css/klantpage.css'>",
                "handle": "<script src='http://www.example.com/js/self/widgetScript.js'></script>",
                "core": "<div class='dashboard_widget'></div><div id='chatContainer' class='chatContainer'><div id='view_ajax' class='view_ajax'></div></div><div id='ajaxForm' class = 'ajaxForm'><textarea id='chatInput'></textarea></div><input type='button' value='Send' id='btnSend' class = 'btn btn-primary'></div></div>"

            }
        ]
    }
);
<?php
}
else {
    ?>
    jsonCallback(
    {
        "csBlock":
        [
            {
                "layout": "<div style='width: 250px; height: 50px; background-color: #842979; position: fixed; bottom: 0; right: 5%; border-top-left-radius: 5px; border-top-right-radius: 5px; text-align: center; line-height: 300%; color: white; font-family: calibri; font-size: 13pt;'>KEY NOT PERMITTED</div>"
            }
        ]
    }
);




    <?php
}
?>

The key that someone sends to us should be "12345"
So for this aspect, I think an iFrame would be bad practice... So I'm going to avoid that.
Now, as you can see in the json.php file I have kind of build something with the divs.
The thing is, when I build it with the divs(and also include "handle":), it gives me a 500 internal server error.
And I think this is because widgetScript.js is trying to call a PHP file which is on another server...
So with the iFrame out of the way, and building it with just HTML elements out of the way, how many options do I have for what I know? None.

Question

How do I make a chat widget professionally and securely with JSONP?
My concern is that people could alter the JavaScript and use the chat widget anyway.

This question might be a bit too much to answer here on StackOverflow.
So redirecting me to another website is completely fine with me.

Any tips, guides, tutorials would be greatly appreciated!

People will allways be able to alter the way they connect to your chat server, that's unavoidable. In this regard, the only method is so called security through obscurity - if your code is messy enough, attackers might just give up. Obviously this is with a risk that you get lost in the code as well. — Tomáš Zato - Reinstate Monica, Nov 12 '15 at 08:57
@TomášZato Hmm... I thought about that, that seems to be a fair solution... I've seen it too... Thank you very much — Sj03rs, Nov 12 '15 at 08:59

score 0 · Answer 1 · answered Nov 12 '15 at 12:13

How do I make a chat widget professionally and securely with JSONP? My concern is that people could alter the JavaScript and use the chat widget anyway.

A better way would be to use WebSockets, it's faster and safer.

My opinions come, since I have done Professional Chat Widgets before, both for external and internal applications on the web. ( I've used both JSONP and WebSockets )

The WebSocket widget would reduce the effort and the load placed upon the destination website. It would require less JavaScript on the client-side and it's also easier to maintain on the code.

You would secure your accesses per domain.

That's just my two cents, we can discuss it further if you wish.

How does one build a widget on someones website and is hosted on yours?

1 Answers1