如何保障SaaS应用中嵌入式HTML自定义元素的操作安全？

问题背景 #

我有一个SaaS模式的Web应用create-resource.com，终端用户可对资源执行CRUD操作。现在希望允许客户将自定义按钮元素嵌入他们的网站（如customer-site.com），当访客点击按钮时，会以该客户（唯一ID为ABC）的身份在我的应用中创建资源。

我已基于HTMLElement扩展实现了自定义元素，并编写embed.js用于加载该元素，通过元素上的id（如customer-abc）确定资源归属的客户。

客户网站嵌入示例代码（customer-site.com/index.html）：

<html>
    <head>
        <script src="create-resource.com/embed.js" />
    </head>
<body>
    <create-resource text="Build a resource" id="customer-abc">
</body>
</html>

当前核心问题：若他人获知客户的唯一ID/密钥，即可在自己的网站嵌入该自定义元素，冒用客户身份创建资源。需要保障自定义元素的安全性，仅允许真实客户执行操作。

可行安全方案 #

1. 域名绑定+签名验证 #

• 为每个客户配对生成客户ID + 专属密钥（Secret Key）
• 客户嵌入元素时，除id外需添加signature属性：该签名由客户ID + 当前网站域名 + 专属密钥通过HMAC-SHA256等哈希算法生成
• embed.js初始化元素时，将客户ID、当前域名、签名一同发送至你的后端验证：
  • 后端根据客户ID取出对应密钥，用相同算法重新生成签名
  • 比对前后签名是否一致，同时校验域名是否在客户预先备案的允许列表内
  • 双条件都满足才允许后续创建资源操作

示例嵌入代码：

<create-resource 
    text="Build a resource" 
    id="customer-abc"
    signature="a1b2c3d4e5f6..."
>

2. 动态短期令牌机制 #

• 客户网站后端先调用你的API，传入自身域名和客户ID，获取短期有效（如15分钟）的临时令牌
• 客户将令牌作为属性添加到自定义元素上，或由embed.js加载时自动从客户后端拉取
• 用户点击按钮时，自定义元素携带令牌请求你的后端，后端验证令牌的有效性（是否过期、对应域名和客户ID是否匹配），验证通过才执行创建操作

3. 跨域请求头校验（基础加固） #

• 在后端接口中严格校验请求的Origin或Referer头，仅允许客户预先配置的域名发起请求
• 注意：该方法仅作为辅助校验，不可单独使用（Referer头存在被篡改的可能），需配合签名/令牌方案使用

4. 嵌入初始化时的后端回调验证 #

• embed.js加载并初始化自定义元素时，先向你的后端发起验证请求，携带客户ID和当前域名
• 后端检查该客户是否允许此域名嵌入，返回一个一次性验证凭证
• 后续创建资源的请求必须携带此凭证，否则直接拒绝处理

内容的提问来源于stack exchange，提问作者Sachin Kumar