In relation to this previous question.
After researching JSONP and conducting some tests, I've realized that I am completely clueless about what I'm doing...
What is required?
I am developing a customer service tool for people to integrate into their websites. Ultimately, anyone who wants our web application embedded on their site will need to obtain JavaScript code along with an authorization key.
What do I currently have?
I have tinkered with the code a bit and this is where I stand:
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>
This JavaScript triggers 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 provided by users should be "12345"
Considering the iframe method may not be ideal, I have decided to explore other options.
As shown in the json.php file, I tried building something using div elements. However, when I include "handle" along with the divs, it results in a 500 internal server error.
I suspect this error is due to widgetScript.js attempting to call a PHP file from another server...
With iframes out of the equation and HTML element based construction also posing challenges, I find myself at a loss for solutions.
Question
How can I create a chat widget professionally and securely utilizing JSONP?
My primary concern is preventing unauthorized manipulation of the JavaScript to access the chat widget.
This inquiry may require more extensive assistance beyond StackOverflow.
Feel free to direct me to external resources if necessary.
Any advice, guides, or tutorials would be highly appreciated!