Wednesday, 30 November 2011

Walking

Walking by craigand
Walking, a photo by craigand on Flickr.

Monday, 28 November 2011

Sheffield Gets Festive

DSCF0058
Welcome to this end of Division Street!

DSCF0066
Welcome to the other end of Division Street!

DSCF0067
Lights outside John Lewis

DSCF0073DSCF0097
Bubble Tree in the Peace Gardens Winter Gardens, rear entrance

DSCF0078
Wintery bubble things

DSCF0074
The Peace Gardens

DSCF0087
Outdoor seating, for those foolish enough to want it

DSCF0091
Furnival Gate

DSCF0092
The Moor

DSCF0093
Arundel Gate

DSCF0095
Another outdoor seating area, also populated by nobody much

DSCF0096
Can you tell what it is yet?

DSCF0099
Outside the Globe

DSCF0100
Path to the station

DSCF0101
The Showroom, all lit up

DSCF0102
Reflections in the water feature

DSCF0104
Precarious stairs

DSCF0106
Waterfalls outside the station

DSCF0107
Closer look at the waterfalls

DSCF0110
Wall o' waterfalls

DSCF0112
Waiting by the taxi rank

DSCF0114
Not much warmer inside the station

DSCF0116
A view over the station waterworks

DSCF0117
Illuminated fountain

DSCF0123
The Winter Gardens. A bit blurry, but I like it anyway.

DSCF0135
The Town Hall looking rather terrifying

DSCF0136
Happy <insert holiday here>!

Thursday, 17 November 2011

Lest we forget

In Remembrance
In remembrance

Fields of blood
Fields of blood

Wreaths
Wreaths

Cenotaph
Cenotaph

Monday, 14 November 2011

Around Sheffield

IMG_0687
Balloons

IMG_0667
Stairs to the Job Centre

IMG_0681
Secret garden

IMG_0685
Creepers

IMG_0686
View from Barkers Pool

IMG_0693
Interesting street lamp

IMG_0707
Magistrates Court

Monday, 7 November 2011

XSS Hacks For Fun And Profit


Sometimes, just sometimes, I want to do something completely ludicrous with my web pages. For instance, just recently I wanted to embed dynamic, externally hosted content in a Blogger page, and I wanted to do it without having internal scroll bars. This meant sizing the iframe hosting the content to precisely fit the content within it, resizing it every time the content changed.

Told you it was ludicrous.

Anyway, I quickly ran into a few problems to do with cross-site scripting. Specifically, when a page is contained in an iframe within a page on a different domain, there are two things you can't do:

  1. It's impossible to size an iframe to its contents from the containing page
  2. It's impossible to size an iframe to its contents from inside the iframe

So how do I do it? Well, I use a mighty XSS hack! Give this a try:

Create a resizing widget

Create a blogger page called 'resize-widget' that contains the following code:

<script type="text/javascript">
<!-- 
      /**
       * This iframe gets load by the first iframe. This one
       * will communicate with the main page telling it to
       * resize the iframe that has content in it. It will
       * get the height from the URL that was used to
       * link to this page, e.g. iframe-resize.html?height=456
       */
        var params = window.location.search.substring( 1 ).split( '&' );
        var height;
        for( var i = 0, l = params.length; i < l; ++i ) {
          var parts = params[i].split( '=' );
          switch( parts[0] ) {
          case 'height':
            height = parseInt( parts[1] );
            break;
          }
        }
        if( typeof( height ) == 'number' ) {
          window.top.updateIFrame( height );
        }
//-->
</script>

What does it do? Not a lot. It pulls the request URL apart, finds a parameter named "height", and then calls a Javascript function on the topmost frame, passing the value of the height parameter as an argument.

Of course, it assumes that it is allowed to call functions on the topmost frame (i.e. it's on the same domain), and that the updateIFrame function exists. But assuming that is true, all is well.

Create the containing page

Next, create a page to contain your iframe to be resized. I will call mine iframe-resize-demo, although of course you can call it anything you like. Put this code in it:

<script type="text/javascript">
<!--
      /**
       * This function must be available on the main outer page.
       * When called with a height it will update the size of the
       * iframe to match that height.
       */
      function updateIFrame( height ) {

        var iframe = document.getElementById( 'myiframe' );
        var sidebar = document.getElementById( 'sidebar-wrapper' );
        iframe.setAttribute( 'height', Math.max(height, sidebar.scrollHeight) );

        var content = document.getElementById( 'content-wrapper' );
        document.body.scrollTop = Math.min(document.body.scrollTop, content.offsetTop);
      }
//-->
</script>

<iframe frameborder="0" height="150px" id="myiframe" scrolling="NO" src="http://my-nested-domain.com" width="100%"></iframe>

Aha! There's that updateIFrame function that takes a height as its parameter! What does it do? It updates the height of the iframe to match the height parameter. Actually it does a little more - it resizes it to the maximum of either the height parameter or the scrollHeight of the Blogger sidebar. It does this to ensure the Blogger template flows properly.

Create the dynamic, externally-hosted content

Of course, the external content can contain anything you like. But put this in it:

<script type="text/javascript">
<!--
/**
 * This function will update the URL on the inner iframe,
 * i.e. the iframe within an iframe.
 */
function resizeThisFrame() {
    var iframe = document.getElementById( 'inneriframe' );
    var wrapper = document.getElementById( 'wrapper' );
    var height = Math.max( document.body.offsetHeight, document.body.scrollHeigh
t );
    iframe.src = 'http://myblog.blogspot.com/p/resize-widget.html?height
='+height;
}
//-->
</script>

<body onload="resizeThisFrame()">
<iframe height="1px" width="1px" id="inneriframe" style="display: none;"></iframe>

What does it do? When the document body loads, it calculates the total height of the document, adds it to the URL of the resize-widget page we created a while back, and loads that URL into the iframe. This sets of a chain of events that culminates with the height parameter calculated here being passed into the updateIFrame function, and the iframe containing the page we've just written being expanded to fit!

Don't you feel dirty now?

Inspiration from Blog What I Made, and modified to work with Blogger.

Skip

Skip

Sunday, 6 November 2011

Street Force

Street Force

Who ya gonna call?

Saturday, 5 November 2011

Puddle

Puddle

This is what I was parked in. Thankfully I had decent boots on so I didn't get wet.

Friday, 4 November 2011

Security by Elevation

Security by elevation


I'm seeing this technique more and more frequently these days. Most peculiar seeing a row of bikes all hanging off a fence at different heights.

Thursday, 3 November 2011

Wintry Church

Church by craigand
Church, a photo by craigand on Flickr.