Loading ...
Sorry, an error occurred while loading the content.

Re: ADsafe

Expand Messages
  • adam.kumpf
    ... CanvasRenderingContext2D ... dangerous!! ... include the canvas element). Although the returned type is no longer a CanvasRenderingContext2D. Trying to
    Message 1 of 36 , May 10, 2010
    • 0 Attachment
      --- In caplet@yahoogroups.com, "adam.kumpf" <adam.kumpf@...> wrote:
      >
      >
      >
      > --- In caplet@yahoogroups.com, "adam.kumpf" adam.kumpf@ wrote:
      > >
      > >
      > > --- In caplet@yahoogroups.com, "Douglas Crockford" <douglas@> wrote:
      > > >
      > > > I added a getContext method. It makes it possible to draw on a
      > > <canvas>.
      > > >
      > > > I am now logging all errors to ADSAFE.log as a convenience for
      > > developers.
      > > >
      > >
      > >
      > > Thanks Doug -- it's great that you are so responsive!
      > >
      > > One word of caution, though. From the returned CanvasRenderingContext2D
      > > it is possible to access the raw HTML Canvas element, which in turn
      > > allow access up the DOM (ahhh!).
      > >
      > > Is there a way to override the canvas variable within the
      > > CanvasRenderingContext2D such that it cannot be accessed?
      > >
      > > Here's the code I was running that allowed me to get up the DOM:
      > >
      > > ---------------------------------------
      > >
      > > <!-- BEGIN ADSAFE WIDGET FRAGMENT -->
      > > <div id="TEMPLATE_">
      > > <canvas id="TEMPLATE_CANVAS">
      > > Default canvas content if browser doesn't support it.
      > > </canvas>
      > > other html markup required by the widget goes here
      > > <script>
      > > "use strict";
      > > ADSAFE.id("TEMPLATE_");
      > > </script>
      > > <!-- LIBS HERE-->
      > > <script>
      > > "use strict";
      > > ADSAFE.go("TEMPLATE_", function (dom, lib) {
      > > // This is where the code for the widget is placed.
      > > var tc = dom.q("#TEMPLATE_CANVAS");
      > > var context = tc.getContext('2d');
      > > ADSAFE.log(context);
      > > var docsBody = context.canvas.offsetParent; // potentially dangerous!!
      > > ADSAFE.log(docsBody);
      > > });
      > > </script>
      > > </div>
      > > <!-- END ADSAFE WIDGET FRAGMENT -->
      > >
      > > ---------------------------------------
      > > Cheers,
      > > Adam
      > >
      >
      >
      > Something like this seems to do it (i.e., copy the context, but don't include the canvas element). Although the returned type is no longer a CanvasRenderingContext2D. Trying to overwrite the canvas property doesn't seem to work (since it is a getter only).
      >
      > Thoughts? Can this be done more directly instead of copying everything?
      >
      > --------------------------
      >
      > getContext: function (contextId) {
      > var a = [], b = this.___nodes___, i, tempCtx, attr;
      > for (i = 0; i < b.length; i += 1) {
      > if (typeof b[i].getContext === 'function') {
      > tempCtx = b[i].getContext(contextId);
      > a[i] = [];
      > for (att in tempCtx) {
      > if (att !== "canvas") {
      > a[i][att] = tempCtx[att];
      > }
      > }
      > }
      > }
      > return a.length === 1 ? a[0] : a;
      > },
      >
      > --------------------------
      >
      >
      > Cheers,
      > Adam
      >



      Actually, that doesn't work so well.  The functionality of the context no longer works when its contents are placed into a generic object.

      Instead, this is a bit more tedious, but seems to at least work.  If every property/function is handled in a function (using closure) we can keep the context around, but not include any calls that are security risks.

      For example (this is crude, just a work in progress and would need many more properties and functions to have full functionality):

      ---------------------------

      getContext: function (contextId) {
      var a = [], b = this.___nodes___, i, fn;
      for (i = 0; i < b.length; i += 1) {
      if (typeof b[i].getContext === 'function') {
      fn = function () {
      var ctx = b[i].getContext(contextId);
      ADSAFE.log(ctx);
      return {
      // properties (need both Setters and Getters for each)
      setFillStyle: function(f){
      ctx.fillStyle = f;
      },
      getFillStyle: function(){
      return ctx.fillStyle;
      },
      // functions (need to have the right number of arguments)
      fillRect: function(a, b, c, d){
      ctx.fillRect(a, b, c, d);
      },
      getImageData: function(l, t, w, h){
      return ctx.getImageData(l, t, w, h);
      },
      putImageData: function(imgD, l, t){
      ctx.putImageData(imgD, l, t);
      }
      }
      }
      a[i] = fn();
      }
      }
      return a.length === 1 ? a[0] : a;
      },


      ---------------------------

      Are there any better ways to do this without explicitly going through every property and function?!

      Cheers,
      Adam





    • Douglas Crockford
      I updated the ADsafe DOM interface. Previously, a method like .getValue() could return undefined a single value an array of values depending on the number of
      Message 36 of 36 , Nov 11, 2010
      • 0 Attachment
        I updated the ADsafe DOM interface. Previously, a method like .getValue() could return

        undefined
        a single value
        an array of values

        depending on the number of results. Now, a method like .getValue() will return the first value that is available, or undefined if there are none. A new method, .getValues() will always return an array, possibly an empty array.
      Your message has been successfully submitted and would be delivered to recipients shortly.