CORS Iframe messaging with DOM access and callback

#dom

#postmessage

#iframe

#selector

#cors

#parent

#child

Sometimes you can't go around using iframes, but you still want your own design and have the iframe do your commands but be invisible. I made a small little utility that uses the postmessage to send and receive json parsed DOM data.

Now i haven't set this all up to be 100% safe yet, it's origin calls are wildcarded which on production would be ill advised. Anyway it works and you could send flow through the iframe and pick off errors by checking at which page it is or what the dom is doing. It's not pretty but iframes aren't pretty..

Place this on the iframe side to enable some dom manipulation via postmessage packages

# DOM Manipulation via PostMessage
#
do ( dom = window ) ->

 #
 # Abstract API for doing small DOM manipulations
 #
 class DomManipulator
 parseHTML: ( strHtml ) ->
 elConverted = document.implementation.createHTMLDocument()
 elConverted.body.innerHTML = strHTML
 elConverted.body.children
 stringifyHTML: ( elTarget ) ->
 if typeof elTarget is 'object' then elTarget.outerHTML else false
 getElement: ( strElement ) ->
 elTarget = document.body.querySelector( strElement )
 elTarget
 getText: ( strElement ) ->
 elTarget = @getElement strElement
 elTarget.textContent
 getProperty: ( strElement, strProperty ) ->
 elTarget = @getElement strElement
 if elTarget then elTarget.getAttribute( strProperty ) else false
 setProperty: ( strElement, strProperty, strValue ) ->
 elTarget = @getElement strElement
 if elTarget then elTarget.setAttribute strProperty, strValue #elTarget[strProperty] = strValue
 @getProperty strElement, strProperty
 doMouseEvent: ( strElement, strEvent ) ->
 elTarget = @getElement strElement
 if elTarget
 evtMouseAny = document.createEvent('MouseEvents')
 evtMouseAny.initMouseEvent strEvent, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
 elTarget.dispatchEvent evtMouseAny
 true
 false

 #
 # Extends DOM Manipulator and transforms the manipulations to be compatible with PostMessage
 #
 class PostMessageDomManipulator extends DomManipulator
 constructor: () ->

 #
 # Public PostMessage DomManipulator API
 #
 @objApi =
 getElement: (( objOptions, objJsonData ) -> 
 strElement = objOptions['strElement']
 if strElement then objJsonData.strReturn = @stringifyHTML @getElement(strElement)
 ).bind @
 getText: (( objOptions, objJsonData ) ->
 strElement = objOptions['strElement']
 if strElement then objJsonData.strReturn = @getText strElement
 ).bind @
 getProperty: (( objOptions, objJsonData ) ->
 strElement = objOptions['strElement']
 strProperty = objOptions['strProperty']
 if strElement and strProperty then objJsonData.strReturn = @getProperty strElement, strProperty
 ).bind @
 setProperty: (( objOptions, objJsonData ) -> 
 strElement = objOptions['strElement']
 strProperty = objOptions['strProperty']
 strValue = objOptions['strValue']
 if strElement and strProperty and strValue then objJsonData.strReturn = @setProperty strElement, strProperty, strValue
 ).bind @
 doMouseEvent: (( objOptions, objJsonData ) ->
 strElement = objOptions['strElement']
 strEvent = objOptions['strEvent']
 if strElement and strEvent then objJsonData.strReturn = @doMouseEvent strElement, strEvent
 ).bind @

 # Give a debug message that can be read
 console.debug 'Initializing postMessage protocol'

 # Bind the postMessage to onReceiveData. That will transform the call for the Public API
 dom.addEventListener 'message', @onReceiveData.bind( @ )
 @doSendData.bind(@) boolInitialized: true, strId: 'intitialize'

 #
 # For receiving messages via PostMessage to DOM Manipulation
 #
 onReceiveData: ( e ) ->
 strOrigin = e.origin
 objJsonData = JSON.parse e.data
 strLocation = objJsonData['strLocation']
 strAction = objJsonData['strAction']
 objParameters = objJsonData['objParameters']

 # Parent always needs to say what he expects, else we might end up going out of sync
 boolExpected = strLocation is window.location.href or strLocation is '*'
 boolOrigin = true
 boolAction = strAction
 boolParameters = objParameters
 boolPassing = boolExpected and boolOrigin and boolAction and boolParameters

 if not boolPassing then return @doSendData strErrorMessage: 'Origin not allowed or you were expecting someone else.'

 # Try to execute the request by testing if the action exists and can be called
 try
 objJsonData['strReturn'] = false
 if @objApi[strAction] then @objApi[strAction]( objParameters, objJsonData )
 @doSendData objJsonData
 catch
 @doSendData { strErrorMessage: 'Could not pass action onto manipulator. Something malformed..' } 

 #
 # For sending messages via PostMessage back to the parent
 #
 doSendData: ( objData = {} ) ->
 objData.objLocation = window.location
 objData.strId = objData.strId or 'keep-alive'
 strOrgin = '*' # Needs to be set for safety, only send messages to allowed domain
 strJsonData = JSON.stringify objData
 if parent
 parent.postMessage strJsonData, strOrgin
 #
 # on DOMContentLoaded initialize the PostMessageDomManipulator
 #
 onLoad = () ->
 dom.pmdm = new PostMessageDomManipulator()
 dom.addEventListener 'DOMContentLoaded', onLoad

On the parent place something like

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

 <script>
 window.onload = function() {

 var onClickDemo = function() {
 console.info('Trying to post a message to the target');
 var objData = {
 strId: '',
 strLocation: '*',
 strAction: 'setProperty',
 objParameters: {
 strElement: '#amount',
 strProperty: 'value',
 strValue: '100'
 }
 }

 document.getElementsByTagName('iframe')[0].contentWindow.postMessage(JSON.stringify(objData), '*');
 },
 onClickTriggerDemo = function() {
 console.info('Trying to trigger the mouse event');

 var objData = {
 strId: 'ontoNextPage',
 strLocation: '*',
 strAction: 'doMouseEvent',
 objParameters: {
 strElement: '#continueButton',
 strEvent: 'click'
 }
 }
 document.getElementsByTagName('iframe')[0].contentWindow.postMessage(JSON.stringify(objData), '*');
 },
 onGetErrorMessage = function() {
 console.info('Trying to get the error');

 var objData = {
 strLocation: '*',
 strAction: 'getElement',
 objParameters: {
 strElement: '#textWithdrawalDeclined'
 }
 }
 document.getElementsByTagName('iframe')[0].contentWindow.postMessage(JSON.stringify(objData), '*');
 }
 onMessageReceived = function( e ) {
 console.debug( 'data;', JSON.parse(e.data));
 }
 elIframe = document.createElement('iframe');
 elIframe.width = '100%';
 elIframe.height = '800';

 document.body.querySelectorAll( '.try' )[0].addEventListener('click', onClickDemo);
 document.body.querySelectorAll( '.do' )[0].addEventListener('click', onClickTriggerDemo);

 window.addEventListener( 'message', onMessageReceived )
 document.body.appendChild(elIframe);
 }
 </script>

 <input type="submit" value="Try a postMessage" class="try">
 <input type="submit" value="Try a trigger" class="do">
</body>
</html>

Basically you throw packages over the line JSON stringified:

var objData = {
 strId: '',
 strLocation: '*',
 strAction: 'setProperty',
 objParameters: {
 strElement: '#amount',
 strProperty: 'value',
 strValue: '100'
 }
}

document.getElementsByTagName('iframe')[0].contentWindow.postMessage(JSON.stringify(objData), '*');

PostMessage DOM i have made very small, you have the following: