構建小部件時隱藏Javascript

Question

我正在構建一個將很容易集成的web小部件。假設http://www.bicycleseller.com/想將我的小部件整合到他的網頁上。他所要做的就是複製並粘貼以下到他的網頁的頭部分：在主體部分

<script src="http://www.widgetprovider.com/widget.js" type="text/javascript"></script> 
<script> 
Widget.create("123456accessKeyOfBicycleSeller").render("myWidget"); 
</script> 

和<div id="myWidget"></div>到任何地方。小部件將顯示在該div中。

我作爲控件提供者，主辦widget.js：

var Widget = new function() { 

    this.url = "www.widgetprovider.com/widget.jsp"; 
    this.name = ""; 
    this.parameters = "width=400,height=200,screenX=750,screenY=300,resizable=0"; 


    this.create = function (accessKey) { 
     this.accessKey = accessKey; 
     return this; 
    }; 


    this.render = function (divId) { 
     // make sure the document is fully loaded and place the widget on BicycleSellers page. 
     // when the widget (a jpeg) is clicked, a jsp page I host will popup. 
     window.onload = function() { 
      document.getElementById(divId).innerHTML = '<img src="images/widget-image.jpg" onclick="Widget.display()"/>'; 
     }; 
     return this; 
    }; 

    this.display = function() { 
     // open a popup window that displays a page I host. 
     var popup = window.open(this.url + "?accessKey=" + this.accessKey, this.name, this.parameters); 
     popup.focus(); 
     return this; 
    }; 
}; 

因此，BicycleSeller把他的頁面上的小部件，當他的用戶點擊它，則會彈出，顯示他們內容來自我主持的網頁。 但是，每個想要嵌入我的小部件的網站管理員必須提供accessKey，這對他們來說是唯一的，因爲彈出窗口的內容將取決於此。

我的問題是：

1）在這種情況下，誰去bicycleseller.com並查看HTML源代碼可以看到他accessKey這是硬編碼在頭部。然後他們可以導航到www.widgetprovider.com/widget.jsp?accessKey=123456。我不希望這種情況發生。關於這個還能做什麼？例如;我在看Facebook的來源，他們似乎很好地隱藏了一切。

2）這是繼續構建小部件的好方法嗎？我想的是一個燈箱，而不是一個彈出式窗口（可能會被彈出式窗口攔截器攔截 - 儘管在這個例子中它沒有）。歡迎任何意見/建議。

3）如果我嘗試放置到窗口小部件並寫入Widget.create("key1").render("div1"); Widget.create("key2").render("div2");，則會生成兩張圖像。但點擊後，兩個彈出窗口都會顯示key1的信息。這是因爲widget.js中的Widget類是單例。如果我沒有將它變成單身人士，那麼我不能放置圖像的onclick屬性（Widget.display()）。我該怎麼做？

尋求三個問題的幫助。任何幫助將不勝感激。謝謝。

Answer 1

您的服務器可以驗證請求的「Referer」標頭。這樣可以阻止臨時用戶通過在地址欄中輸入網址或通過第三方鏈接來查看彈出內容，從而避開上下文。標題可能被欺騙，但這需要一些努力，而不是標準的瀏覽器功能。

您將無法阻止黑客在自己的計算機上加載彈出窗口。

關於彈出窗口是一個好主意的問題，我認爲內聯會更好，但也更多的工作和便攜性，所以你必須決定彈出窗口是否足夠好。

爲了使窗口小部件不是一個單身，而不是：

$(window).load(function() { 
    document.getElementById(divId).innerHTML = '<img src="images/widget-image.jpg" onclick="Widget.display()"/>'; 
}); 

使用：

var widget = this; 
$(window).load(function() { 
    var image = document.createElement("img"); 
    image.src="images/widget-image.jpg"; 
    image.onclick = function() { widget.display() }; 
    document.getElementById(divId).appendChild(image); 
}); 

通過設置onclick到實際功能，而不是一個函數的代碼，你可以參考後面通過閉包到Widget的實例。

Answer 2

對於第一個問題，我認爲@JGWeissman給出了一個可能的解決方案。

在回答你的第二個問題時，我不相信用戶發起的點擊打開彈出窗口會被彈出窗口阻止程序阻止。我相信攔截器正在尋找無論用戶在頁面上執行什麼操作都能運行的代碼。製作自己的lightbox比如彈出相當容易，但可能不值得花時間，尤其是因爲您無法控制您正在嵌入的頁面。他們可能會以與Flash類型彈出解決方案不兼容的方式嵌入Flash，這可能會導致您頭痛。

在回答第三個問題時，我會這樣做，所以每次「創建」一個小部件時，實際上都會創建一個代表它的對象。您可以在數組中的Widget對象中跟蹤這些小部件的「實例」。您也可以在window.onload方法上實例化，該方法循環遍歷「實例」，併爲每個點擊方法提供觸發實例accessKey的方法。因爲你似乎把它們聯繫在一起，所以我也擺脫了創建和渲染之間的分離。所以在這裏是做的一個方法：

var Widget = new function() { 
     var widgets = []; 
     this.url = "http://www.yahoo.com"; 
     this.name = ""; 
     this.parameters = "width=400,height=200,screenX=750,screenY=300,resizable=0"; 

     window.onload = function() { 
      var w; 
      for (w = 0; w < widgets.length; w++) { 
       document.getElementById(widgets[w].id).innerHTML = '<img src="images/widget-image.jpg" onclick="Widget.display(' + w + ')"/>'; 
      } 
     }; 

     this.display = function (index) { 
      widgets[index].display();//display the widget instance corresponding to the index 
     } 

     this.create = function (accessKey, elId) { 
      var newWidget = { 
       accessKey: accessKey, 
       id: elId, 
       display: function() { 
        // open a popup window that displays a page I host. 
        var popup = window.open(Widget.url + "?accessKey=" + accessKey, Widget.name, Widget.parameters); 
        popup.focus(); 
       } 
      }; 

      widgets.push(newWidget); 

      return newWidget; 
     }; 


    }; 

Answer 3

我想你應該指出一個事實，即你的小工具 - 這是一個基於JavaScript的 - 可以緩存和（即使沒有被緩存），客戶端可以查看來源。畢竟，JavaScript是在客戶端計算機上執行的，而不是您的服務器。爲了「隱藏」像你想做的事情，你必須注意讓「敏感數據」由服務器端腳本來處理。客戶可以下載的所有東西都可以被客戶查看和搞砸。他們唯一無法做到的事情就是在服務器上「屏幕背後」發生的事情。所以，如果你想隱藏任何東西，把它放在你的服務器上。

您可以通過javascript獲得的唯一安全級別是「混淆」。但這是一個安全水平，幾乎任何投資一點點時間的人都可以解除。 （閱讀：腳本孩子一定會喜歡扭轉類似的東西爲它的樂趣）

Answer 4

我不知道2和3，但我可以回答1.

你能不能做：預防人們看着你的源代碼。一切都可能被欺騙，你可能會阻止不經意的用戶，但是你不會讓一個有決心的人拖延超過幾秒鐘（是的，秒）。 可以阻止人們在他們的網站上使用您的代碼。

您可以製作在您控制的寬限期後自行失效的鏈接。例如：

$key = "client_key"; 
$time = $_SERVER['REQUEST_TIME']; 
$hash = md5("nonce" . $key . $time); // super secret method than no one should ever find out 
return return "hash=" . $hash . "&key=" . $key . "&time=" . $time; 

這確實要求您在客戶的網站上放置服務器端代碼。散列確保沒有人可以'混淆'變量，因爲沒有人知道你用於散列的方法（儘管選擇一些比較模糊的東西，添加適當的隨機數）。您可以使用time變量來拒絕具有非常舊的值的請求，例如：24小時。

儘管如此，你不能阻止人們獲取代碼一次，併爲自己保留一份本地副本，但至少你已經排除了他們的更新和錯誤修復。

您還可以添加混淆，使他們不能輕易修改或保持的代碼。

沒有辦法完全防止人們'偷'你的JavaScript。