私有JavaScript小部件

Question

我考虑开始一个新项目，该项目的前提是在我的网站上生成一个小部件，然后将一小段JavaScript复制到您的网站上，您就可以拥有自己的小部件。

这是对现有服务（如polldady.com、twiig.com和addthis.com）的新诠释。

许多此类服务都是公开可访问的。也就是说，小部件提供商不关心谁向他们发布数据。事实上，他们鼓励尽可能广泛地传播小部件。

然而，我的服务有一个独特的转折点。在我的情况下，尽管小部件对公众开放，但我必须确保发起的请求仅来自预期的站点。

由于这些JavaScript小部件存在xss问题，我需要动态创建一个iframe，在其中呈现我的小部件。

是否有身份验证模型来处理这种类型的交互？

- xzyfer

Answer 1

首先，使用iframe违反了同源策略。只需使用普通的JavaScript即可创建一个<form>并调用.submit()在任何地方触发此POST请求。事实上，这就是基于POST的CSRF攻击的工作原理。您可以检查此POST请求的referer，但如果它来自https页面，则此值将为空（然后您可以拒绝服务...）。将document.location作为POST变量发送是不明智的，因为轻松修改此小部件以报告修改后的值。但是，传入的HTTP请求中包含的引用方是网站运营商无权访问的。

- rook

Answer 2

(function(){

  var makeCar = function(){
    // private variable

    var fuel = 0;
    console.log("call new car");
    // private method

    function burnFuel(){
      fuel-=10;
      console.log('Burned fuel [10]');
    }

    return {
 
   check: function(){
   
  console.log("checkfuel:"+fuel);
   },    
      accelerate : function(){
        if(fuel > 0){
          burnFuel();
        }else{
          console.log('Out of gas. Fill now.');
        }
      },

      fillGas : function(gas){
        if(fuel <= 100){
          fuel += gas;
        }else{
          console.log('Reached capacity. Stop spilling.');
        }
      }
    }

  };

  var carA= makeCar();
  carA.check();
  carA.fillGas(200);
  carA.check();   
  carA.accelerate();
  carA.check();
  carA.accelerate();
  carA.check();
  carA.fillGas(400);
  carA.check();
}());

正如您所看到的，makeCar()函数返回一个带有两个方法的对象：check()、accelerate和fillGas。这两个方法可以访问私有方法burnFuel和私有变量fuel。但是外部世界无法直接访问这两个方法。

因此，在JavaScript中，通过闭包的帮助，您可以模拟面向对象编程。

- Avinash Maurya