嵌入式iframe/javascript小部件的安全性

Question

我正在構建一個功能類似於Google Analytics的網站。我沒有做分析，但我正在嘗試提供一行javascript或一行iframe，以便將功能添加到其他網站。

具體來說，嵌入式內容將是一個按鈕，它將彈出一個新窗口並允許用戶執行一些操作。最終用戶將完成並且窗口將關閉，此時該按鈕將更新爲反映用戶完成流程的新元素。

彈出窗口將從我的網站加載內容，但我的問題屬於JavaScript（或iframe）的嵌入行。這樣做的最佳做法是什麼？谷歌分析和優化使用JavaScript來修改主機頁面。顯然，iFrame也可以工作。

我的安全問題是有人會從一個站點複製嵌入代碼並將其放在另一個站點上。實現我的腳本/ iframe的每個頁面/站點組合都將具有一個唯一的ID，該站點的開發人員將從我的站點上的經過身份驗證的帳戶生成該ID。然後我給他們提供適當的嵌入代碼。

我的第一個想法是隻使用一個iframe，使用特定於網頁/網站組合的網址參數從我的網站加載一個頁面。如果我走這條路線，是否有一種方法可以確定該頁面是隻從嵌入特定域或網址前綴的iframe加載的？類似的事情可以用JavaScript來完成嗎？

我讀this post這非常有幫助，但我的用例有點不同，因爲實際上我會彈出內容供用戶進行交互。擔心的是，託管我的嵌入式網站的敵人會欺騙性地誘使他們自己的用戶使用該小部件。這些用戶會認爲他們代表敵方網站與我的網站互動，但實際上代表友好網站進行互動。

Answer 1

如果你想保留它作爲一個簡單的客戶端只有小部件，簡單的答案是你不能完全按照你描述的。

爲這個想到的兩個解決方案如下，第一個是折衷但簡單，第二個涉及更多（對於您和您的小部件的用戶）。

進行了檢測

你可以驗證referer HTTP header檢查域相匹配的預期爲特定的網站ID，但請記住，不是所有的瀏覽器將發送這（和最不會當引用頁面是HTTPS），並且某些瀏覽器隱私插件可以配置爲隱藏它，在這種情況下，您的小部件將無法工作，或者您需要在用戶體驗中增加額外笨重的一步。

1. 網站www.foo.com使用嵌入的說嵌入的腳本你的widget <script src="//example.com/widget.js?siteId=1234&pageId=456"></script>
2. 你的小部件使用服務器端代碼來生成的.js文件動態（例如用於.js文件的要求可以按照你的服務器上的重寫規則映射到PHP/ASPX）。
3. 服務器端代碼檢查referer HTTP標頭以查看它是否與數據庫中的期望值相匹配。
4. 匹配時，小部件將正常運行。
5. 在不匹配，或者如果引用者是空白/缺失，小部件將繼續運行，但會有一個額外的步驟，要求用戶確認他們已訪問從www.foo.com
6. 小部件爲了確認從clickjacking安全，您必須open the confirmation step in a popup window。

服務器檢查

可能有點過專爲你的目的和運行成爲誰希望嵌入你的widget客戶過於複雜的風險 - 你決定。

1. 網站www.foo.com想要將您的小部件嵌入到當前從用戶接收的頁面請求中。
2. 的www.foo.com服務器進行API請求（通過一個祕密密鑰）的API，您的主機，請求頁面ID的一次性密鑰456
3. 你的API驗證密鑰，生成安全的一次性密鑰和傳球在數據庫中記錄請求時返回一個值。
4. www.foo.com嵌入腳本如下<script src="//example.com/widget.js?siteId=1234&oneTimeKey=231231232132197"></script>
5. 你的小部件使用服務器端代碼動態生成的js文件（例如，.js文件可以遵循您的服務器上的重寫規則映射到PHP/Java）。
6. 服務器端代碼檢查oneTimeKey和siteId組合以檢查它是否有效，如果是，則生成小部件代碼並刪除數據庫記錄。
7. 如果用戶重新加載頁面，上述步驟將被重複，並且會生成新的一次性密鑰。這可以防止頁面上的evil.com刮取嵌入代碼和參數。

Answer 2

這裏的回答非常徹底，並提供了很多很棒的信息和想法。我通過驗證服務器端的X-Frame-Options頭來解決這個問題，儘管在瀏覽器中對這些頭文件的支持並不完整，並且可能是可欺騙的。