跨域魔术：iFrame，JavaScript或两者兼而有之？

Question

长短是这样的：

我正在创建一个可嵌入的小部件，开发人员可以将其嵌入到他们的网站上。我需要在这些外部站点上运行一些JavaScript，但我还需要向我自己的服务器发出GET和POST请求。此外，我需要知道使用此小部件的访问者是否通过我的应用程序进行了身份验证。

我无法确定如何以安全的方式解决这个问题。如果我不需要运行javascript并将数据传入/传出托管我的小部件的页面，iFrames将是理想的选择。我不认为我可以允许JavaScript访问我的iFrame的内容，而不会暴露自己的恶意代码。

有没有通常的做法来完成我想要做的事情？

我在后端运行Node / Express服务器，如果这有所不同。

Answer 1

您可以使用两种技术来启用此功能：

1. 跨源资源共享

   由于小部件将在您的客户上运行＆＃39;网站，你想要保持这一点，这正是Cross Origin Resource Sharing的用途。

   您编写的网站代码仅支持来自白名单网站的跨源请求，并且在您为小部件添加客户时，您可以使该列表保持最新。任何试图使用未经授权的网站中的窗口小部件的人都会遇到Same Origin Policy（因为您的网站无法通过CORS访问它们），请求将失败。

   如果您需要支持您的客户＆＃39;使用IE8或IE9的用户，你需要编写小部件来处理IE8-9处理CORS is broken的事实;您必须使用仅限IE XDomainRequest而不是XMLHttpRequest。 （如果你使用jQuery，不，这是一个跨浏览器问题，他们决定不为你处理。）IE10及以上解决了这个问题。

2. postMessage

   作为epascarello points out，对于纯客户端跨域通信（例如，如果您想使用iframe），您可以使用postMessage，即使没有CORS，也可以实现安全的跨源通信，因为邮件每一侧的代码都必须选择加入邮件。为了确保您只处理您信任的消息，请查看消息事件的origin属性（您在postMessage上找到的任何体面的文章将显示其工作原理），并确保代码可以＆＃ 39;如果不是从你的出生地获得服务，就要复制并轻易地被黑客攻击（例如，确保在某个地方，某种程度上，你正在使用SOP来保护它）。

它可能是一个或者任何东西，很可能是：CORS，如果你想让小部件嵌入到其他网站的HTML中（这是我可能做的），{ {1}}和不 CORS如果您要使用iframe（我假设将与服务器进行通信）。