4

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

在我的 rails 应用程序中，我有一个外部 javascript 页面。该页面上的一些变量我希望是全局的，以便 JS 文件中的所有函数都可以访问它们。例如，我有一张地图，我希望地图对象在 javascript 文件中是全局的，因为这样我的所有函数都可以访问一个地图变量而不是创建自己的变量，并且我可以将复杂的操作分解为更小的函数。

这一切都很好，我知道该怎么做，而且效果很好。我现在的问题是，我可以保护变量不受外部影响吗？例如，您可以从 chrome 控制台更改所有 javascript 类变量的值。以及地图中的方法是可访问和可执行的。我已将地图设置锁定在其中一个页面上，因此它不可缩放或可移动，但是从控制台我可以简单地说map.setZoom(11)，地图将缩放到 11.. 我可以打字map.dragable = true，然后你可以拖动地图.. 我真的不喜欢这个..

这还不算太糟糕，就像用户启用地图拖动和缩放并不是世界上最糟糕的事情。但我仍然想禁用它。有任何想法吗？

编辑

感谢大家的回答和评论。我想我只会诉诸不将任何可能变成恶意的东西放入我的 javascript 中，并做一些事情，例如将我的 map 变量传递给必要的函数以减慢人们的速度。

4

6 回答 6

6

您可以使用立即调用函数 (IIFE) 表达式来防止变量和函数在全局范围内公开：

var a = 10;

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

window.a允许您查看和修改a，但您不能这样做b：

在此处输入图像描述

在这里试试

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

于 2012-11-01T18:09:10.147 回答
5

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

底线：浏览器中的 JavaScript 是客户端的。客户可以为所欲为。

于 2012-11-01T18:12:15.420 回答
3

尝试做这样的事情：

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

仍然需要注意的一件事 - Chrome 开发人员工具还允许您编辑 javascript（不是服务器上的 javascript 文件，只是当前正在运行的副本。）转到 Chrome Dev Tools->Sources，您可以编辑 javascript 文件。

于 2012-11-01T18:10:00.723 回答
2

你不能。你说你需要在全球范围内定义你的地图，这意味着每个人都可以访问它。您可以在不同的范围内定义您的地图，然后只定义“公共”事物：

(function() {
    var map = new Map();
    window.myMap = {
        goTo: function(lat, lng) {
            map.goTo(lat, lng);
        }
    };
})();
于 2012-11-01T18:12:28.260 回答
1

根据您的架构，有几种方法可以实现这一点。使用此方法创建具有公共和私有属性的可重用组件：

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/

更多阅读

于 2012-11-01T18:16:17.260 回答
0 
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

演示

于 2014-04-23T10:23:57.550 回答