如何隔离网页中的部件，使一个部件不会影响其他部件？

Question

我正在管理一个项目，其中开发是由多个开发人员在一个网页的不同部分工作。由于副作用，我们在组合网页的各个部分时面临集成问题。

如果web部件有错误、编写不当或被web筛选器阻止，则会影响网页其他部分的呈现。

有没有一种方法可以干净利落地划分网页？

我的研究只指出了共享点web部件，而没有针对这个问题的方法或框架。IFrame Isolation是相关的，但该解决方案类似于在圆孔中放置方形钉子。

Answer 1

如果web部件有错误、编写不当或被web筛选阻止，则会影响网页其他部分的呈现。

使用try/catch块：

​

window.addEventListener("error", function(e){return false;}, true);
try{angular.run();}
catch(e){console.log(e.toString() )};
$("body").append("<div>Hi</div>");

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

或者延迟加载：

​

void(function foo()
  {
  /* get head element */
  var head = document.getElementsByTagName("head")[0];

  /* create script element */
  var jQueryJS = document.createElement("script");


  /* define script src attribute to lazy load */
  jQueryJS.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";

  /* append script */
  head.appendChild(jQueryJS);


  /* call tests after jQuery loads */
  jQueryJS.onload = function () 
    {
    $("body").append("<h1>Hi</h1>");
    }
  }() 
);

​

其他方法包括：

支持

• HTML5沙箱/CSP的安全architecture
• TreeHouse: web工作人员沙箱architecture
• JSand: Secure ECMAScript(SES)-enabled沙箱architecture
• ADSafe:虚拟iframes

参考

• The Web Security Model (pdf) - Philippe De Ryck
• Web security: Securing Untrusted Web Content in Browsers
• Application Security Trends and Challenges (pdf)
• Sandboxing Javascript - Lieven Desmet and Nick Nikiforakis (pdf)
• Server-Side Template Injection: RCE for the modern webapp (pdf)