How to secure API invocation inside an iframe with WSO2 API Manager

First you need to get started with the WSO2 API Manager, I'm using API Manager version 1.4.0 in this post.You can find API Manager latest version from here[1] and you can find installation guide for your platform here[2].

As I'm going to use a sample which is shipped with API Manager 1.4.0 by default, follow this guide[3] in order to set up the Samples.

Now I need the API Access-Token before invoking the API within iframe.

You can login to API store (https://localhost:9443/store) with the following credentials,username: subscriber1/Password: subscriber1 ,find YoutubeFeeds API under the APIs tab and subscribe to the API.

Click on the generate button within My Subscriptions tab. Now you will see something similar to this,

 After obtaining the application key you can test sample API invocation using curl command, E9Cx0Iyu20sOAZXLE5ltvkfWgWMa is the Access Token here.


 curl -H "Authorization :Bearer E9Cx0Iyu20sOAZXLE5ltvkfWgWMa" http://localhost:8280/youtube/1.0.0/most_popular

You will see results from the YouTube.

Now lets move to the iframe part.

I'm going to use LAMPP in order to host my sample html content.

Lets create a simple html file index.html under my /var/www/oauth_iframe/ directory and and set iframe content using following ajax request,

$.ajax({
    type: "GET",
    url: "http://localhost:8280/youtube/1.0.0/most_popular",
    beforeSend: function(xhr, settings){
    xhr.setRequestHeader('Authorization', 'Bearer E9Cx0Iyu20sOAZXLE5ltvkfWgWMa');},    success: function(data){
        $("#iframe").attr('src',"data:text/html;charset=utf-8," + escape(data));
    }
});

If you need to restrict your API invocation from other domains,  
you can set your domain in allowed domains, this will ensure API content access only through the given domain.

[1] http://wso2.com/products/api-manager
[2] http://docs.wso2.org/display/AM140/Installing+the+Product
[3] http://docs.wso2.org/display/AM140/Setting+up+the+Samples