使用域名限制对自定义聚合物元素的访问

Question

我正在尝试使用 Polymer 自定义元素来实现以下目标。

• 检测请求来自的域名以呈现自定义元素
• 如果域名匹配 [ 基本上 - 如果授权 ] 则呈现自定义元素模板
• 如果域名不匹配/未授权重定向到错误页面聚合物模板

我创建了一个自定义 HTML 元素 - 我将其提供给其他网站；如果其他站点/域授权我的站点 - 那么只有我应该显示自定义聚合物元素/否则我应该显示错误模板。

这样可以吗？

或者当有人将 my-custom-element 添加到他们的网站时，他们可以不受我限制地使用它？ 如果我在这里遗漏了一些明显的东西，请告诉我。

以下聚合物元素也无法为我提供任何实现预期结果的能力。

<app-route>
<app-route-converter>

例如：

假设有人在他们的网站/HTML 页面中使用 my-custom-element.html。

如果 my-custom-element.html 在有效/授权域中使用；那么它应该为自定义的 Polymer 元素提供服务；如果 my-custom-element.html 在无效/未授权域中使用 - 在这种情况下，它应该显示元素模板的错误部分。

有效用例：

• xyz.com/
• subdomain.xyz.com/
• xyz.com/*

无效的用例：

• anyotherdomain.com

请注意：我目前正在使用 Oauth 提供商对域所有者进行身份验证。但是这些 Oauth 令牌不会与来自其各自站点的所有请求一起传递。我授权有效性的方式是使用“域”[如果它在我的网站上注册]

Answer 1

所以您想限制您创建的自定义元素的使用位置？

我的意思是你可以做一个简单的

constructor() {
  if (!this.location.href.match('https://stackoverflow.com') { 
    return false; 
  }
  super();
}

在您的元素中。

但是是的，就像防止右键单击一样保存将防止您的图片被复制。 （例如根本没有）。不过，如果您的目标只是阻止非技术人员，它可能会成功。