只允许少数网站嵌入我的 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 时出现权限被拒绝错误。 Hacker、Friend 和 Widget 都有不同的域，所以这是一个跨站点脚本错误。

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

Answer 1

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

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