Feb 22, 2010 @ 06:00pm
3D Secure (3DS) is an authorisation step that can be added to a purchase journey, it's aim to avoid card fraud by asking for additional security information. There has been lots of discussion/criticism around it's implementation, my aim in this post is not about these issues but about how to actually implement it.
The 3DS process is not hosted on the vendors server, instead the user is directed to a third party site to enter their details. The current recommendation is that this is done through an iFrame on the vendors site. The previous recommendation was that the user is redirected to the 3DS pages.
A key issue here (aside from the phishing concerns!) is that iFrames are hard to handle without JavaScript, the vendor must post details to the 3DS server so we need to provide non-js messaging and controls so the user can continue and complete the process.
3D Secure process
- The 3DS page is included through an iFrame
- Within the iFrame, the customer negotiates the 3DS process and the result is then posted back to a page hosted by the vendor
- The vendors page uses the result of the call to update the transaction held in session data. We can use JavaScript at this point to submit the parent page
- The backend system determines the appropriate result page, success or failure, and this is presented to the user
For the non-js version, as mentioned, the vendors page loaded in the iFrame should include a button that targets the parent page (target=top") so the user can continue manually.
Read more information on 3D Secure (Wikipedia)
Jan 5, 2010 @ 04:14pm
Internet explorer has many differences from the other browsers, and many bugs besides, today I ran into two more.
iframe with height:0 still leaves space in IE8
On the site I've been working on there is third party tracking, using an iframe. Since we need this to remain invisible, so as to not leave gaps, these have height="0".
Unfortunately this isn't working as expected in IE8 and a space is seen in the page. The solution I've applied is to position absolute the iframe, display:none is too risky since we need the content of the iframe to load.
IE6 and IE7 comments add spacing
On the same site each third party script has comments around it explaining what it does, both IE6 and IE7 take exception to this and start adding spacing. There are no floated elements around them so it's not quite like the Duplicate Characters Bug. The fix though is inspired by that same problem. I want to keep the comments so I've changed the comment tags to be conditional comments, .
Sep 14, 2009 @ 05:23pm
There is lots of noise at the moment around HTML 5, and Canvas is a big part of that. You may expect the Canvas element to be a straight replacement for Flash, but it's lacking that level of abstraction present in Flash.
The name canvas is literal, the element only acts as a painting area, there is no time-line and objects/graphics are rendered onto the canvas and not stored on it. Once painted on they can be painted over but not moved or modified.
When painting to the canvas we use its context object, functions of which fall into two groups: painting operations and painting settings. For example, if you change the opacity value it will not affect the current canvas content, but it will affect any further painting operations.
The context object can maintain a history of painting settings, with states stored in a last-in, first-out list. Calling save() pushes the current context state to the history, calling restore() pops the last state from the list and resets the context to that state.
The Canvas is for creating dynamic images, so for most applications you'd probably be better off with normal HTML, or even SVG.
