前端安全 - 是否可以限制访问范围？

Question

鉴于前端代码的规模越来越大，Webpack 5 提供的微前端和模块联合的概念是一个可能的解决方案。但是，考虑到您正在集成来自其他团队/第 3 方的代码的可能性，外部代码可能会尝试通过简单地访问 window 对象并遍历其子对象来访问它不想要的信息。

这不一定是密码和信用卡等重要信息，这些信息通常使用 iframe 进行隔离。用户电子邮件或跟踪数据等不太敏感的信息可能会被收集和滥用。

在这种情况下，是否有不涉及iframes的技术设置可以限制脚本的访问范围？这在技术上可以在 WebAssembly 程序中实现吗？

Edit: 是的，保守的规则是不运行不受信任的代码。然而，提出的问题是，如果不使用 iframe 限制其对信息的访问，沙盒前端代码在技术上是否可行。

Answer 1

Javascript 本质上是“public”，所以在某些时候你放入或取出的东西最终会暴露出来，要么通过网络 fetch/XHR，要么通过函数执行.

javascript 中有一个“私有”模式，可防止在对象内部窥探——您可以在其中明确定义公开的 methods/properties：

window.myThing = (function(){

    var a = "a";
    var private_b = "b";

    function one(){
        return "one"
    }

    function private_two(){
        return private_b
    }

    return {
        public_a : a,
        public_one : one
    }

}());


for(var prop in window.myThing){
    console.log(prop, window.myThing[prop])
}

// ----------------------------------
// only the following properties 
// are exposed from the window scope:
// ----------------------------------
//  + public_a as - a
//  + public_one as ƒ one()

理论上，这种类型的模式可以允许内部 (non-exposed/non-traversable) 方法和属性...并利用某种形式的“来龙去脉”加密。

前端安全 - 是否可以限制访问范围？

Frontend security - Is it possible to limit access scope?

javascript

security

frontend

webassembly

micro-frontend