Javascript 如何构建只有试用版或付费用户才能使用的私有web小部件（JS）？

我正在构建一个必须是私有的web小部件（只有试用/付费用户才能使用它）

是的，我知道没有安全的方法可以使用客户端解决方案（JS）实现100%的安全性。然而，我的意图只是尽可能地使它变得困难

所以，事情是这样的：

用户必须注册并在注册期间提供其站点的域。之后，他将得到7天的试用期，可以在我的控制面板上配置他的小部件

配置完成后，他将能够复制并粘贴JS代码段，稍后在他的站点上加载小部件的内容。例：

<script>
(function(){
    jQuery(document).ready(function($) {

        var token = 'f04e42bae1b330bdc35351f6f709f66b';
        var data = {'product_id': 123};

        $.ajax({
            url: 'https://myserver.com/widget.php',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: "application/json",
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', token);
            }
        }).done(function(data) {
            console.log(data);
        })

    });
})();
</script>

我理解，即使用户试图在其网站上使用我的小部件而不使用其他人的代码片段/令牌付费，但“同源策略”将阻止他这样做（浏览器将如上所述阻止它），因为域将不匹配，对吗

这种方法安全吗？还是有更好、更安全的方法来实现这一要求？对整体解决方案有什么建议吗

---

谢谢

因此后端获取密钥和域并检查数据库是否有效，然后吐出JavaScript代码。这基本上就是任何订阅api的工作方式。@epascarello实际上，我不确定是否每个api都使用这个头来控制访问：头（“访问控制允许来源：/”$user->domain）；对吧？我从来没说过有人用标题。他们通常接受请求并生成JavaScript。不难检测api密钥是否处于活动状态并与域匹配。标头不会阻止用户使用代理绕过CORSSo。后端会获取密钥和域并检查db是否有效，然后吐出JavaScript代码。这基本上就是任何订阅api的工作方式。@epascarello实际上，我不确定是否每个api都使用这个头来控制访问：头（“访问控制允许来源：/”$user->domain）；对吧？我从来没说过有人用标题。他们通常接受请求并生成JavaScript。不难检测api密钥是否处于活动状态并与域匹配。标头不会阻止用户使用代理绕过COR

<?php

$token = $_SERVER['HTTP_AUTHORIZATION'];
$productId = $_POST['product_id'];

$user = getUserByToken($token);

if($user){
    header("Access-Control-Allow-Origin: //" . $user->domain);
    $w = new Widget($user);
    $items = $w->getItems($productId);
    ...
}

?>

XMLHttpRequest cannot load http://myserver.com/widget.php. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8001' is therefore not allowed access.