I have created a website and will be running it in Chrome, fullscreen, on a touchscreen display. Within this website I would like to have an embedded website so that a the user can lookup more information on that product's website without leaving my website. Is there a way to embed a website within a website using HTML, CSS, or JavaScript?
I don't want to use a third party app such Bitty.
Use an HTML <iframe></iframe> here is a resource on them: http://www.w3schools.com/tags/tag_iframe.asp
Just keep in mind some sites use X-Frame-Options: SAMEORIGIN which means that website will not work in a iframe unless it is hosted on the same domain.
More on X-Frame-Options: SAMEORIGIN: https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options?redirectlocale=en-US&redirectslug=The_X-FRAME-OPTIONS_response_header
The first obvious response is iframe. Have you considered that?
http://www.w3schools.com/tags/tag_iframe.asp
<iframe src="http://www.w3schools.com" width=pixels height=pixels></iframe>
Related
Since iframes no longer work on my site since I secured it. What would be the best way to display external content on an https page. Is there an alternative or is there simply no way around the mixed content rule?
It is possible to display content in iframe, you just need to use https protocol when you embed your iframe.
This means of course that the source site you are embedding must support https.
Forgot to add as well, that the site you are embedding, could have some iframe/embed restrictions, like for example Facebook:
Refused to display 'https://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'DENY'.
We've partnered with a company whose website will display our content in an IFRAME. I understand what the header is and what it does and why, what I need help with is tracking down where it's coming from!
Windows Server 2003/IIS6
Container page: https://testDomain.com/test.asp
IFRAME Content: https://ourDomain.com/index.asp?lots_of_parameters,_wheeeee
Testing in Firefox 24 with Firebug installed. (IE and Chrome do the same thing.) Also running Fiddler so I can watch network traffic while I'm at it.
For simplicity's sake, I created a page with nothing on it but the IFRAME in question - same physical server, different domain/site - and it failed with
Load denied by X-Frame-Options: https://www.google.com/ does not permit cross-origin framing.
(That's in the Firebug console.) I'm confused because:
Google is not referenced anywhere in the containing app, or in the IFRAMEd app. All javascript libraries are kept locally; there is no analytics in the app. No Google, nowhere.
The containing page has NOTHING on it, except the IFRAME. No html tags, no head tag, no body tag. IFRAME. That's it.
The X-FRAME-OPTIONS header does not exist in IIS on the server: not at the "Websites" node, not in the individual sites.
So where the h-e-double-sticks is that coming from? What am I missing?
Interesting point: if I remove http"S" from the IFRAME url, it works. Given the nature of the data, SSL is required.
You might check global.asax.cs, the app could be adding the header to every response automatically. If you just search the app for "x-frame-options" you might find something also.
My current understanding is that the only way to display external web pages in the WinJS app is to use iframes. This seems to be a limitation, since I am not able to embed youtube links or twitter search links.
eg. http://www.youtube.com/watch?v=diP-o_JxysA
How do I go about displaying these webpages? Are there any workarounds for this limitation other than the run your own proxy solutions.
You cannot without running your own proxy and modifying the headers, or modifying the headers directly on the host server.
Note that for other types of resources, like login pages that don't like to be iframed (e.g. Salesforce.com), you can use the WebAuthenticationBroker.
This thread was created back in 2008 Restricting IFRAME access in PHP
I am looking to do almost the exact same thing. i.e. I want to have sites which are publicly accessible as long as they are being viewed from a specific iFrame, from a specific app. The IFrame app will have user authentication giving them access to urls outside the core application. The urls are all likely to be built using Open Source PHP tools e.g. Wordpress.
Both the viewing iFrame and the viewed sites/pages will be owned by us.
Have there been any developments in last few years on ways to do this?
For various reasons not related to this particular issue, I am considering using the serverside RIA framework Vaadin (JAVA) for building the app that will contain the iFrame viewer.
The demo of the embed widget is here http://demo.vaadin.com/sampler#WebEmbed Looking at the page source I don't see anywhere that the address of the embedded webpage is displayed. So to some extent I wonder if I can hide my urls from search engines, give them very long, randomly generated URI's and maybe they will be impossible to find anyway?
You should be able to modify a framekiller to do the opposite. A framekiller is a piece of javascript to prevent clickjacking by detecting if the page has been loaded within an iframe.
Limiting the iframe to load within a specific page is more difficult. Looking at the referer is easy, but also easy to bypass. If you load the iframe from an https page the referer will be blank. A better way would be to require the server to obtain a Nonce and include this in the iframe url. Such as http://iframe_url?key=difhj8j84528423j423894hfdj897 or whatever. Having the server make a request to your server would be ideal. Doing it with client side code and jsonp to fetch the nonce is problematic because an attacker could deliver modified javascript to fetch the nonce.
I've inherited an ASP.NET web site that has an SSL certificate bought via GoDaddy.
The problem is that the certificate seems to be invalid because of some "mixed content/resources" (I think that's how its called) coming from http sites.
Chrome is showing the red cross over the lock next to https, meaning it's unsecured. The popups says the following:
Click in "What do these mean?" goes here which says:
The [crossed-lock] icon appears when
Google Chrome detects high-risk mixed
content, such as JavaScript, on the
page or when the site presents an
invalid certificate.
The certificate is correct and valid because I tried creating a blank "Hi world" .aspx page and it's showing the green lock with no problems.
Reading a little bit, I found that I should only include images and javascript coming from https sites. The only thing it had coming from http was the addthis widget, but they support https, so I changed to https, but it's still saying that is unsecured.
I've searched for anything else coming from http in the source, but didn't find anything.
Is there some way (site, chrome extension, firefox extension, whatever) that will show exactly which are the resources that are "unsecured"?
I've never dealt with SSL/HTTPS certificates, but I need to fix this issue asap.
Check your site in http://www.whynopadlock.com, which will give you a list of url which is not consider as secure by your browser.
Check the chrome console
You will get it like this,
The page at https://xys displayed insecure content from http://asdasda.png.
Make it http site to https then it will work.
I've found the problem using the Chrome Developer Tools. It was a js that's embedding a flash from an 3rd party site which it's using http.
Are you on Windows? Download and run Fiddler while browsing the site, and watch for HTTP connections.
Mixed content means contents of a web page are mixed with HTTP and HTTPS links.
These links include your JS, CSS, Image, Video, Audio, Iframes etc.
If your website is enabled for HTTPS (SSL certificate has installed), make sure you serve only HTTPS contents throughout your web page.