Question

此问题引用了this问题。
所以，经过JSONP的一些研究和一些测试，我得出结论，我不知道我在做什么......

我需要什么？

我正在为人们在其网站上使用提供客户服务。最后，想要将我们的Web应用程序嵌入其网站的人需要使用授权密钥获取一些JavaScript代码。

我有什么？

我已经使用了一些代码，这就是我所拥有的：

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>

所以这个JavaScript请求回调我的服务器......

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
}
?>

有人发送给我们的密钥应该是"12345"
所以对于这方面，我认为iFrame是不好的做法......所以我要避免这种情况现在，正如您在json.php文件中看到的那样，我可以使用div构建一些内容问题是，当我使用div构建它（还包括"handle":）时，它会给我500个内部服务器错误。
我认为这是因为widgetScript.js正试图调用另一台服务器上的PHP文件...
因此，在iFrame完成的情况下，只使用HTML元素构建它，我知道有多少选项？无。

问题

如何使用JSONP专业且安全地制作聊天窗口小部件？我担心的是，人们可以改变JavaScript并使用聊天小部件。

这个问题可能有点太多了，无法在StackOverflow上回答。
因此，将我重定向到另一个网站对我来说完全没问题。

任何提示，指南，教程都将不胜感激！

Answer 1

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.

如何在某人网站上构建一个小部件并托管在您的网站上？

1 个答案: