只允许少数网站嵌入我的 iFrame

Question

我有一个小部件。我只希望少数网站通过 iFrame 嵌入我的小部件。

_________________
| Friend         |
|   __________   |
|   | Widget  |  |
|   |_________|  |
|________________|

“简单！”，你说。只需将其放在小部件代码的开头即可：

if (!/^http:\/\/([a-z0-9]+\.)?friend\.com)/.test(document.referrer)) {
   alert('hacker detected');
   return;
}

但是，如果黑客这样做，此代码将无法保护我们：

_____________________
| Hacker             |
| _________________  |
| | Friend         | |
| |   __________   | |
| |   | Widget  |  | |
| |   |_________|  | |
| |________________| |
|____________________|

通过巧妙的 CSS，黑客可以砍掉 Friend 的布局并仅显示小部件。没有人会怀疑正在发生任何形式的黑客攻击。所以你再说一遍，“简单，让我们这样做：”

if (!/^http:\/\/([a-z0-9]+\.)?friend\.com)/.test(top.location.href)) {
   alert('hacker detected');
   return;
}

但这仍然不起作用。读取 top.location.href 时出现权限被拒绝错误。黑客、朋友和小部件都有不同的域，因此这是一个跨站点脚本错误。

在你笑着说“没有黑客会经历这么多麻烦来做这件事”之前，我想说我已经发现有人这样做了。有问题的小部件包含敏感数据，法律上只允许我在某些网站上显示这些数据。

Answer 1

您必须要求您的朋友实现代码，以防止他的网站被用作 iframe。

if(top != self){
   alert('Hacker Attack');
}