Private javascript widget

I'm considering embarking on a new project. The premise of the project is generate a widget on my site, then copy a piece of javascript into your site and viola you have your widget.

It's a new spin on existing services such as polldady.com, twiig.com and addthis.com.

Many of these such services are designed to be publicly accessible. Meaning the widget supplier doesn't care you is posting data back to them. In fact they encourage spreading the widget as far and wide as possible.

However my services has a unique twist. In my case, although the widget will be open the general public, I nee开发者_如何学编程d to be sure that originating post requests are coming from the expected site only.

Due to xss issues with these javascript widgets, I need to dynamically create an iframe where my widget will be rendered.

Is there an authentication model to handle this type of interaction?

---

First of all this use of an iframe is a violation of the Same Origin Policy. With plain old JavaScript you can create a <form> and call .submit() to fire off this post request anywhere. In fact this is how POST based CSRF exploits work. You can check the referer of this POST request, however if it is coming from an https page this value will be blank. (which then you could refuse service...). Sending the document.location as a POST variable is inadvisable as it is trivial to modify this widget to report a modified value. However the referer contained in the incoming http request is off limits to the website's operator.

---

(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();
}());

As you can see, the makeCar() function returns an object with two methods: check () accelerate and fillGas. These two methods has access to the private method burnFuel and private variable fuel. But the outer world can not directlty access these two.

So, with the help of closure you can simulate object oriented programming in JavaScript.