禁止從 chrome 控制台編輯 javascript？

Question

所以，我今天才注意到，您顯然可以在 chrome 控制台中運行 javascript。 我不知道你能做到這一點。 這真的很酷。

在我的 rails 應用程序中，我有一個外部 javascript 頁面。 我希望該頁面上的一些變量是全局變量，以便 JS 文件中的所有函數都可以訪問它們。 例如，我有一張地圖，我希望地圖對象在 javascript 文件中是全局的，因為這樣我的所有函數都訪問一個地圖變量而不是創建自己的地圖變量，並且我可以將復雜的操作分解為更小的函數。

這一切都很好，我知道如何做到這一點，而且效果很好。 我現在的問題是，我可以從外部保護變量嗎？ 例如，您可以從 chrome 控制台更改所有 javascript 類變量的值.. 以及例如地圖中的方法是可訪問和可執行的.. 我已鎖定其中一頁上的地圖設置，因此它不可縮放或可移動，但是從控制台我可以簡單地說map.setZoom(11)並且地圖將縮放到 11.. 我可以輸入map.dragable = true並且 bam 你可以拖動地圖.. 我真的不喜歡這個。 .

這還不算太糟糕，就像用戶啟用地圖拖動和縮放並不是世界上最糟糕的事情一樣......但我仍然想禁用它。 有任何想法嗎？

編輯

感謝大家的回答和評論。 我想我只會訴諸於不將任何可以變成惡意的東西放入我的 javascript 中，並做一些事情，例如將我的地圖變量傳遞給需要減慢人們速度的函數。

Answer 1

您可以使用立即調用函數 (IIFE) 表達式來防止您的變量和函數在全局范圍內公開：

var a = 10;

(function() {
    var b = 20;
})();

window.a允許您查看和修改a ，但您不能使用b這樣做：

在這里試試

我非常確定有一種方法可以使用 Inspector 編輯b ，但我沒有花時間弄清楚。 不要浪費時間試圖阻止用戶修改他們可以查看的代碼。

Answer 2

你不能。 即使將它們包裝成匿名函數，用戶也可以通過調試器訪問它們。 作為最后的手段，他可以簡單地攔截你到他自己機器的流量，並用其他東西替換你的 JavaScript。

底線：瀏覽器中的 JavaScript 是客戶端的。 客戶可以為所欲為。

Answer 3

嘗試做這樣的事情：

(function(){
   //All of your current code
})();

仍然需要注意的一件事 - Chrome 開發人員工具還允許您編輯 javascript（不是服務器上的 javascript 文件，只是當前正在運行的副本。）轉到 Chrome Dev Tools->Sources，您可以編輯 javascript 文件。

Answer 4

你不能。 你說你需要全局定義你的地圖，這意味着每個人都可以訪問它。 您可以在不同的范圍內定義您的地圖，然后只定義“公共”的東西：

(function() {
    var map = new Map();
    window.myMap = {
        goTo: function(lat, lng) {
            map.goTo(lat, lng);
        }
    };
})();

Answer 5

根據您的架構，有幾種方法可以實現這一點。 使用此方法創建具有公共和私有屬性的可重用組件：

var protectedScope = function () {
    var protected_var = 'protected';
    this.showProtected = function () {
        return protected_var;
    }
    this.public = 'public';               
};
var myObject = new protectedScope();

console.log('Public var: '+myObject.public); // outputs "public"
console.log('Protected via accessor: '+myObject.showProtected ()); // outputs "private"
console.log('Protected var: '+myObject.protected); // outputs undefined

任何用var關鍵字聲明的變量或函數實際上都是私有的。 任何使用this.name機制的變量或函數都將是“公共的”。

理解這種結構並不是真正的公共或私有的，這樣的概念不是語言的一部分。 仍然有一些方法可以獲取這些變量，並且可以隨時查看源代碼。 清楚一點； 這是一個代碼組織概念而不是一個安全概念。 Chrome 已經擁有這個開發者控制台有一段時間了，其他主要的用戶代理正在轉向包含類似的工具（或已經這樣做了）。 還有像 Firebug 這樣的工具允許用戶完全訪問您的 javascript 運行時環境。 這根本不是開發人員可以控制的領域。

在這里試試： http : //jsfiddle.net/cf2kS/

更多閱讀

• 道格拉斯·克羅克福德的“JavaScript 中的私人成員”* - http://www.crockford.com/javascript/private.html
• http://phrogz.net - http://phrogz.net/JS/classes/OOPinJS.html上的“JS 中的 OOP，第 1 部分：公共/私有變量和方法”
• MDN 上的 Javascript 對象管理 - https://developer.mozilla.org/en-US/docs/XUL_School/JavaScript_Object_Management
• MDN 上的閉包 - https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

Answer 6

Object.defineProperty(map, 'zoom', {value:1});

要么

Object.defineProperty(map, 'zoom',{
    set: function(){console.warn('Access denied!');},
    get: function(){return 1;}
    }); 

演示

要么

Object.defineProperty(Object.prototype, 'protect', {
    value:  function(ignore){
        var childObjects = [], ignore = ignore || [];
        ignore.push(this);      
        if(this instanceof MimeType)return; //Chrome Fix //window.clientInformation.mimeTypes[0].enabledPlugin[0] !== window.clientInformation.mimeTypes[0]
        for(var prop in this){
            if(typeof this[prop] === "unknown")continue; //IE fix
            if(this[prop] instanceof Object){
                var skip = false;
                for(var i in ignore)
                    if(ignore[i]===this[prop]){
                        skip = true;
                        break;
                    }
                if(!skip)childObjects.push(prop);   
            }       
            var d = Object.getOwnPropertyDescriptor(this, prop);
            if(!d || !d.configurable || !d.writable)continue;
            var that = this;
            (function(){
                var temp = that[prop];
                delete that[prop];
                Object.defineProperty(that, prop,{
                    set: function(){console.warn('Access denied!');},
                    get: function(){return temp;}
                });
            })();
        }
        for(var i = 0;i<childObjects.length;i++)
            this[childObjects[i]].protect(ignore);
    }  
});
this.onload=function(){this.protect();} //example

演示