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执行此操作：

enter image description here

Try it out here

我更确定有一种方法可以使用Inspector编辑b，但我还没有花时间弄明白。不要浪费时间试图阻止用户修改他们可以查看的代码。

Answer 2

你做不到。即使将它们包装成匿名函数，用户也可以通过调试器访问它们。作为最后的手段，他可以简单地拦截您自己机器的流量，并用其他东西替换您的JavaScript。

底线：浏览器中的JavaScript是客户端。客户可以随心所欲地做任何事情。

Answer 3

尝试做这样的事情：

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

还有一点需要注意 - Chrome开发者工具还允许您编辑javascript（不是服务器上的javascript文件，只是当前正在运行的副本。）转到Chrome Dev Tools-＆gt; 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/

更多阅读

Douglas Crockford的“JavaScript中的私人会员”* - http://www.crockford.com/javascript/private.html
“{OOP in JS，第1部分：公共/私人变量和方法”http://phrogz.net - http://phrogz.net/JS/classes/OOPinJS.html
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;}
    });

demo

或

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

demo

禁止从chrome控制台编辑javascript？

6 个答案: