Skip to content

Instantly share code, notes, and snippets.

@framp

framp/00-guest-porthole-index.html

Last active August 29, 2015 14:23
Show Gist options
  • Save framp/93b335ede12aaf61cf5d to your computer and use it in GitHub Desktop.
Save framp/93b335ede12aaf61cf5d to your computer and use it in GitHub Desktop.
Download ZIP
Porthole remote requester
Raw
00-guest-porthole-index.html
<!DOCTYPE html>
<html>
<head>
<title>Proxy</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/porthole.min.js"></script>
<script type="text/javascript">
var parentDomain = 'PARENTDOMAIN'
var windowProxy;
window.onload=function(){
windowProxy = new Porthole.WindowProxy('http://' + parentDomain + '/porthole/proxy.html')
windowProxy.addEventListener(function onMessage(messageEvent) {
if (messageEvent.origin == "http://" + parentDomain) {
jQuery.ajax(messageEvent.data.settings)
.done(function(data) {
windowProxy.post({ id: messageEvent.data.id, data: data })
})
.fail(function() {
windowProxy.post({ id: messageEvent.data.id, error: true })
})
}
})
}
</script>
</head>
<body>
</body>
</html>
Raw
01-guest-porthole-proxy.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/porthole.min.js"></script>
<script type="text/javascript">
window.onload=function(){ Porthole.WindowProxyDispatcher.start(); };
</script>
</head>
<body>
</body>
</html>
Raw
02-parent-porthole-proxy.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/porthole.min.js"></script>
<script type="text/javascript">
window.onload=function(){ Porthole.WindowProxyDispatcher.start(); };
</script>
</head>
<body>
</body>
</html>
Raw
03-parent-remoteRequest.js
module.exports = function(Porthole, guestDomain, prefix) {
var windowProxy
var listeners = {}
prefix = prefix || '/porthole'
window.addEventListener('load', function() {
var randomId = Math.floor(Math.random()*1e5)
var iframe = document.createElement('iframe')
iframe.setAttribute('id', 'guestFrame' + randomId)
iframe.setAttribute('name', 'guestFrame' + randomId)
iframe.setAttribute('src', 'http://' + guestDomain + prefix)
iframe.style.display = 'none'
document.body.appendChild(iframe);
windowProxy = new Porthole.WindowProxy('http://' + guestDomain + prefix + '/proxy.html', 'guestFrame' + randomId)
windowProxy.addEventListener(function onMessage(messageEvent) {
if (messageEvent.origin == 'http://' + guestDomain) {
if (messageEvent.data.id in listeners) {
if (messageEvent.data.error)
listeners[messageEvent.data.id][1].call(messageEvent)
else
listeners[messageEvent.data.id][0].call(messageEvent, messageEvent.data.data)
delete listeners[messageEvent.data.id]
}
}
})
})
return function(settings, done, fail) {
var id = + new Date + '' + Math.floor(Math.random()*1e2)
windowProxy.post({ id: id, settings: settings })
listeners[id] = [done, fail]
}
}
Raw
04-parent-index.js
var remoteRequest = require('./remoteRequest')(GUESTDOMAIN)
//BOOM: request everything you want as if you were GUESTDOMAIN
remoteRequest({'url':'http://api-with-per-domain-limit.com/...'}, console.log.bind(console))
Raw
05-parent-demo.html
<!DOCTYPE html>
<html>
<head>
<title>Porthole Demo</title>
<script type="text/javascript" src="/porthole/js/porthole.min.js"></script>
<script type="text/javascript">
var remoteRequest = (function(Porthole, guestDomain, prefix) {
var windowProxy
var listeners = {}
prefix = prefix || '/porthole'
window.addEventListener('load', function() {
var randomId = Math.floor(Math.random()*1e5)
var iframe = document.createElement('iframe')
iframe.setAttribute('id', 'guestFrame' + randomId)
iframe.setAttribute('name', 'guestFrame' + randomId)
iframe.setAttribute('src', 'http://' + guestDomain + prefix)
iframe.style.display = 'none'
document.body.appendChild(iframe);
windowProxy = new Porthole.WindowProxy('http://' + guestDomain + prefix + '/proxy.html', 'guestFrame' + randomId)
windowProxy.addEventListener(function onMessage(messageEvent) {
if (messageEvent.origin == 'http://' + guestDomain) {
if (messageEvent.data.id in listeners) {
if (messageEvent.data.error)
listeners[messageEvent.data.id][1].call(messageEvent)
else
listeners[messageEvent.data.id][0].call(messageEvent, messageEvent.data.data)
listeners[messageEvent.data.id]
}
}
})
})
return function(settings, done, fail) {
var id = + new Date + '' + Math.floor(Math.random()*1e2)
windowProxy.post({ id: id, settings: settings })
listeners[id] = [done, fail]
}
})(Porthole, GUESTDOMAIN)
window.setTimeout(function() {
remoteRequest({'url':'http://api-with-per-domain-limit.com/...'}, console.log.bind(console))
}, 1000)
</script>
</head>
<body>
</body>
</html>
@framp
Copy link
Author

framp commented Jun 22, 2015

I need to make a request from one domain (PARENT) as if I were another (GUEST).
Leveraging porthole, I managed to create a simple setup to do just that.

The directory tree is:

GUEST:
--porthole/                                              
----index.html                     #file containing a proxy to jQuery.ajax
----proxy.html                     #proxy needed by porthole
----js/
------porthole.min.js              #porthole
PARENT:
--porthole/
----proxy.html                     #proxy needed by porthole
----js/
------porthole.min.js              #porthole
--js/
----remoteRequest.js               #library which abstracts setting up porthole
----index.js                       #your app, aka where you're using remoteRequest 
--demo.html                        #demo to quickly try remoteRequest

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment