Displaying External Webpages within an Enyo App

I'm new to Enyo and am trying to implement display interface for my website within an Enyo app.

Basically all that I want to display is the app's toolbar on the top of the page, and the rest of the page would simply display the contents of my website.

Considering that my website is already optimized for responsive display, how do I implement this without encountering Cross-Origin issues?

Comments

  • You probably have a few options.

    One is, you can do something like the Bing Maps example (http://latest.enyojs.com/support/apps/bingmaps/). Specifically, look at http://latest.enyojs.com/support/apps/bingmaps/source/MapsApp.js and http://latest.enyojs.com/support/apps/bingmaps/maps/BingMap.js.

    Or you could use an iframe. Something like:
    
    			if (!this.$.readingPane.$.iframe) {
    				var height = this.$.topPane.getBounds().height;
    
    				this.$.readingPane.setBounds({
    					height: height
    				});
    				this.$.readingPane.createComponent({
    					fit: true,
    					touch: true,
    					name: "iframe",
    					src: urlSrc,
    					tag: "iframe",
    					classes: "frame",
    					onload: "frameload",
    					attributes: {
    						onload: enyo.bubbler
    					},
    					style: "background: white; height:98%; width:100%;"
    				});
    			}
    			this.$.readingPane.render();
    
    
    CSS:
    .frame {
    	height: 100%;
    	width: 100%;
    	border: 0;
    	background-color: white;
    }
  • Tried the iframe approach, but its resulting in a CORS issue:-
    "Load denied by X-Frame-Options: http://mydomain.com/subpath/ does not permit cross-origin framing."

    Any ideas about how to get around this issue?
  • Do you have control of the website that is being displayed in the iframe? If so you should be able to manipulate the response headers on the server to allow CORS.
  • Unfortunately not! That's the source of all my problems! I do not have access to manipulate response headers on the server.

    Is there any way by which I can read the contents on the site and reproduce them within the app without triggering the CORS issue? Using WebServices or something similar? Any ideas?
  • Check out the gallery
  • Avoiding CORS requires both server and client cooperation. What you are talking requires a server side http connection to scrape the http response (i.e. proxy). Cross origin restrictions can not be circumvented in a session that includes user interaction.
  • That's actually what I expected, however, the CORS issue is arising here due to the use of an iframe. So, if we dump the iframe approach altogether, is it somehow possible to send an Ajax request to fetch the contents of the page and display the contents by DOM manipulation?
  • Yes, you should find kinds that help with that in the gallery.
  • If it's not working in an iframe then I fail to see how an Ajax request is going to work in your regular page without a proxy.
  • There's probably not going to be a way to do it without using some feature of your app container. This is why Cordova has a ChildWebBrowser control, why webOS had a WebBrowser control, and why Firefox OS has endorsed modifications to iframe to allow it to be used as a browser window for privileged apps.
  • Thanks! I was trying it on Firefox OS and it turns out that I need to set the app as a privileged app and set the app permissions as:-
     "permissions": {
        "systemXHR": {}
    }
    
    And then whenever I need to use systemXHR, I simply need to add the ‘mozSystem’ attribute to
    the XHR instance as:-
    var xhr = new XMLHttpRequest({
        mozSystem: true
    })
Sign In or Register to comment.