Simple two (or multi) column layout that works

Hi There!

2 Column layout is very painful does not work often. Here is a very simple 2 colum layout that works.



<style>
.grid{
  margin:0px;
  padding:0px;
  overflow: hidden;
}
.grid:after{
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow:hidden;
}
.left{
  float:left;
  margin:0px;
  padding:0px;
  overflow:hidden;
  width:49%;
}
.right{
  float:right;
  margin:0px;
  padding:0px;
  overflow:hidden;
  width:49%;
}
</style>
<div class="grid">
      <div class="left">
   Left Stuff Goes Here 
      </div>
      <div class="right">
   Right Stuff Goes Here 
      </div>
</div>
To make 3 or more column layout follow the same strategy , just distribute the width of children (e.g. left and right) and keep adding them, all the children will float left and last child will float right. Such multicolumn layout can be well nested to achieve complex grids .
 Thanks,

Design of cross domain POST API in Javascript

Hi There,

As all of you know that cross domain POST is not allowed in javascript. At Times few APIs require you to do POST, such APIs are extremely hard to use in pure javascript mashups. We can not move back to GET method because the input set is limited ( restricted by length of URL) on GET.  So in this article I am proposing a design of POST API which will be javascript friendly.

Lets say I am designing a API which requires "text"  as input in POST, and returns an JSON response.

                 API URL: http://api.xyz.com/myapi 
                 API Input:  text as POST field.
                 API Output: JSON object.

1) How client can invoke the API?
 of-course cross domain HTTPXMLrequest is not allowed
Another popular technique of  injecting script tag with callback to get cross domain JSON (jsonp) can not be used becuase it can only do GET request. so how to do a POST to differnet domain? Solution is you can use iframes.
  1. Create an iframe in javascript
  2. Create a form whose method is POST, action is API URL and target is the iframe.
  3. Create hidden input as "text" and assigned the value whatever you want.
  4. Submitted the form.

Here is the code

function crossDomainPost(url, text) {
    // Add the iframe with a unique name
    var iframe = document.createElement("iframe");
    var uniqueNameOfFrame = "sum";
    document.body.appendChild(iframe);
    iframe.style.display = "none";
    iframe.contentWindow.name = uniqueNameOfFrame;

    // construct a form with hidden inputs, targeting the iframe
    var form = document.createElement("form");
    form.target = uniqueNameOfFrame;
    form.action = url;
    form.method = "POST";

    // repeat for each parameter
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = "text";
    input.value = text;
    form.appendChild(input);
    document.body.appendChild(form);

    form.submit();
}

2) How to read the output back?
Now since form is submitted in iframe, whatever is happening in iframe is not accesible to main window and vise versa due to cross origin restrictions imposed by browsers. So this is where you should follow my proposed design,
The API maker will return an HTML page with script block in it. Script block should send a message (HTML5 cross frame messaging API) to parent frame.
e. g. Output of API  goes like this.
<html>
<script>
var json={your-data}
window.parent.postMessage(json,"*");
</script>
</html>

This is how client will read in his javascript code
window.addEventListener("message", function (event) {
      my_callbac(event.data);
}, false);

Note: message posted is HTML5 API may not be available in many browsers. 


Thanks and enjoy!!!!!

iSad

As you know that Steve Jobs is no more with us
 To to express your  condolences please change your DP to this photo (Next 5 days...)
Thanks, and share this message!!!! 





How complex is to remove javascript from HTML? (to prevent XSS)

Hi,
There are few situations where you want your users to enter plain HTML but you do not want them to execute javascript. Problem seems very simple but its very complex.

In this article I will let you know the complexity of doing this rather proposing any solution.

Lets start with the ways javascript can appear in an HTML document. Here are few things  I am listing.

1. In script tag
javascript typically appears in an script tag e.g

<script src="http://www.someurl.com">
</script>

Or


<script>
alert('hi javascript')
</script>

2. In event attributes


Next simple way in which javascript can appear in your HTML is as event handler.


<div onclick="alert('hi javascript')">
</div>

Though w3c document describes following attributes as intrinsic events but depending on browser implementation it might change

    onunload
    onclick
    ondblclick
    onmousedown
    onmouseup
    onmouseover
    onmousemove
    onmouseout
    onfocus
    onblur
    onkeypress
    onkeydown
    onkeyup
    onsubmit
    onreset
    onselect
    onchange
    onerror <-- img onerror event



3. In anchor href

<a href="javascript:alert('hi javascript')">Click Me</a>

4.  In href and src tag of some media tags

In some of the older browsers (e.g. IE6) img src tag can contain javascript.
e.g.


<img src="javascript:alert('hi javascript')"/>

this situation might also appear in various ways as

<TABLE background="javascript:alert('hi')" or 

<LINK REL="stylesheet" href="javascript:alert('hi');">
<BGSOUND SRC="javascript:alert('hi javascript');">

5. In CSS attributes 



html{
 background: #28d expression("alert('hi javascript')");
}


this can appear in any place where CSS can appear i.e. external CSS, style block or inline style attribute.

6. base64 encoded svg can contain script tag

<EMBED SRC="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dH A6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv MjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hs aW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIxOTQiIGhlaWdodD0iMjAw IiBpZD0ieHNzIj48c2NyaXB0IHR5cGU9InRleHQvZWNtYXNjcmlwdCI+YWxlcnQoIlh TUyIpOzwvc2NyaXB0Pjwvc3ZnPg==" type="image/svg+xml" AllowScriptAccess="always"></EMBED> 


7. Encoded Scenario of any of the above case. 

Any of the above case may or may appear as encoded format e.g.
<a href="javascript:alert('hi javascript');">
is same as
<a href="&#x6A;&#x61;&#x76;&#x61;&#x73;&#x63;&#x72;&#x69;&#x70;&#x74;&#x3A;&#x61;&#x6C;&#x65;&#x72;&#x74;&#x28;&#x27;&#x68;&#x69;&#x20;&#x6A;&#x61;&#x76;&#x61;&#x73;&#x63;&#x72;&#x69;&#x70;&#x74;&#x27;&#x29;&#x3B;">

Important Note: 
1) code might appear in upper case or lower are e.g "javascript:" can be writtent as JaVaScript:

2) <script> tag can appear as multiline
<s
c
r
i
p
t
>


3) since html attribute values may or may not be wrapped under quotes
url like http://www.yahoo.com+ onmouseover ="alert('hi')" might generate code like this
<a href=http://www.yahoo.com onmouseover="alert('hi')"/>  which is wrong!!!!!!!!!

4) Usefull Links
http://coding.smashingmagazine.com/2011/01/11/keeping-web-users-safe-by-sanitizing-input-data/
http://ha.ckers.org/xss.html