使用公开可见的API密钥/秘密密钥在JS中进行API调用。 WordPress/Woocommerce

Question

我目前正在尝试在 Wordpress 上实现一个前端表单，它将使用 Woocommerce API 将新产品发布到我的网站。我的第一个尝试是使用 JS/Jquery 将数据发送到相关的 API 端点。这需要我添加一些 JS，通过包含 ClientKey 和 ClientSecret 来验证 API 调用。

我的问题是：

1. 告诉我这是否以及为什么安全性很差（因为任何人都可以看到 API 凭据）
2. 您建议什么替代方案？

我意识到这可能是一个非常普遍的 JS/API 问题，但已经包含了 Wordpress/Woocommerce 的详细信息以供上下文。

这是我正在使用的示例代码，它有效，但如果我要在生产站点上使用，我担心安全性。 :

const wooClientKey = 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const wooClientSecret = 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const wooUrl = 'https://localhost/my-site/wp-json/wc/v2/products';

function basicAuth(key, secret) {
    let hash = btoa(key + ':' + secret);
    return "Basic " + hash;
}

let auth = basicAuth(wooClientKey, wooClientSecret);

function getData(url) {
    jQuery.ajax({
        url: url,
        method: 'GET',
        beforeSend: function (req) {
            req.setRequestHeader('Authorization', auth);
        }
    })
        .done(function (data) {
            console.log(data);
            return data;
        });
}

getData(wooUrl);

Answer 1

您正在通过网络公开这些凭据，供所有人查看。如果您假设没有人会通过查看网页源代码看到您的 html，那是不正确的。

假设，我得到了你的凭据。我可以使用这些凭据执行任何允许的操作，就像您所做的那样。

最佳实践是将这些凭据放入您的后端（或网络服务）。公开休息呼叫（进行身份验证）。从您的网络用户界面调用它。让您的后端代码与 wordpress/woocommerce 对话，并返回响应。