Really cannot understand why yahoo iframe works but the google one does not:
<!DOCTYPE html><html><body>
<iframe frameborder="0" src="http://www.yahoo.com"></iframe>
<iframe frameborder="0" src="http://www.google.com"></iframe>
</body></html>
any ideas?
From http://msdn.microsoft.com/en-us/library/cc288472(v=vs.85).aspx#search
Clickjacking Defense: Some hackers try to trick users into clicking buttons that appear to perform safe or harmless functions, but instead perform unrelated tasks. Clickjackers embed malicious code or "redress" the user interface by using transparent frames that overlay specific UI elements with misleading text and images. To help prevent clickjacking, Web site owners can send an HTTP response header named X-Frame-Options with HTML pages to restrict how the page may be framed.
X-Frame-Options: Deny
If the X-Frame-Options value contains the token Deny, Internet Explorer 8 prevents the page from rendering if it is contained within a frame. If the value contains the token SameOrigin, Internet Explorer will not render the page if the top level-browsing-context differs from the origin of the page containing the directive. Blocked pages are replaced with a "This content cannot be displayed in a frame" error page.
Using IE8, I get the following message in the Google iframe
This content cannot be displayed in a frame
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.
Looks like Google uses some code to prevent it's content from being displayed in an iframe
EDIT:
I found a decent explanation here: http://forums.asp.net/p/1733782/4654025.aspx/1?I+am+gettignthe+following+error+in+asp+net+with+facebook+app+early+it+is+working+fine+Once+i+click+on+Open+this+content+in+a+new+window+
I have also same error.
I just included inside tag and its works for me fine.
i tested it in chrome, firefox and opera
<div style="height:820px; width:100%" >
<div style="background-color:Green; height:50px; width:100%"> </div>
<iframe id="content" style="height:820px; width:100%; overflow:auto;" src="http://www.google.com" ></iframe>
</div>
You can show google in iframe using the below link by passing igu=1
https://www.google.com/webhp?igu=1
HTML Code:
<html>
<body>
<iframe src="https://www.google.com/webhp?igu=1" height="750" width="850"></iframe>
</body>
</html>
Related
I am using Firebase Dynamic Links REST API to generate short links.
If I paste that link into the browser it redirects and loads the appropriate image. But when I use the same link to load image in <img> tag in my webpage it fails.
I created a sample(codesandbox link below) trying to load the same image. I put two image tags, one with bit.ly shortener and one generated with the firebase dynamic links generator. The bit.ly link loads fine.
Sample codesandbox : https://codesandbox.io/s/using-img-tag-forked-ufnd31?file=/index.html
Sample short link for a image : https://files.flux.chat/vs4fy3cY7s1aMnS57
Create dynamic link payload
URL : https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=WEB_API_KEY
BODY : {
"dynamicLinkInfo": {
"domainUriPrefix": "https://files.flux.chat",
"link": "https://firebasestorage.googleapis.com/v0/b/fluxchathq.appspot.com/o/business%2F5Nmu0449tlNVWVdOpo8h%2Fincoming%2FNA?generation=1654498929454543&alt=media&token=664c135f-48f3-4de8-8ba7-d75ca3a5362f",
"navigationInfo": {
"enableForcedRedirect": true
}
},
"suffix": {
"option": "UNGUESSABLE"
}
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div>
<img class="image" src="https://files.flux.chat/vs4fy3cY7s1aMnS57" />
<img class="image" src="https://bitly/3Lr8Bq1" />
</div>
</body>
</html>
I don't have any experience with this, but I think shortened urls won't work as an image source-- they don't point to an image directly, they redirect to an image.
Here's an old answer that seems relevant: https://stackoverflow.com/a/27062627/954986
That is not possible unless you own the domain where you want the shortened URL. For example, to do that, you would need to own (or have access to) the website bit.ly.
bit.ly is not hosting your video or your image, it only redirects them to the real URL when you click on the link.
[...]
You will see that your image is NOT in the code. It only redirects to the page that DOES contain your image.
Perhaps you could make an XHR request in javascript, and see if it returns a 3** status with some other location, and use that as the source for the image? (edit: the short link doesn't have CORS enabled, so this probably won't work)
I just tested with curl (well, httpie which is far superior), and the sample shortlink you provided gives a 302, with the Location response header being the actual image.
edit: I tested your sandbox, and the flux.chat image source shows a GET request resulting in a 403 Forbidden status code in the browser console. Maybe it's because it's being called from localhost? But firebase sees something about the request it doesn't like (maybe origin being localhost, maybe it being in an image source, maybe ..?) and that's preventing it from loading.
Sorry I don't have anything more concrete for you, definitely a strange issue.
I am facing this weird issue when working with iframes.
I have a page(jsp) based on spring portlet framework which I want to render in an iframe. I made a dummy iframe and it was working perfectly fine in both IE(iE11) and Chrome when i was testing with my local server. However once the code got deployed to the dev server, the iframe renders the first page in IE, but does not render the next page on click of a button on that page. It is still working perfectly fine in chrome. I have no idea as to why that is happening.
Here is the code for my dummy iframe :
<html>
<head>
<title>IFRAME DEMO</title>
</head>
<body>
Forgot Username
Forgot Password
<iframe src="" width="82%" height="800" name="sampleFrame">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
After reading some oldthreads, I figured out that I need to add the domain to the trusted site of IE and that solution worked. However this iframe will be exposed to the end user and I cannot expect every user to change this setting. Can we enforce it at server level somehow ?
Using SOAP call I am getting a URL and displaying in iframe.That URL contents one form, User need to fill all data and submit it. While I am invoking SOAP function, has given one return link also which one redirecting to my site.But problem is while returning that page is coming inside the iframe. My requirement is pretty clear that it should redirect to given path not inside iframe.
I do appreciate for advance help.
Here is the code for Iframe
<iframe style="width:955px;height:700px;margin: 0px auto;" src="<?php echo $response_data['Url']?>" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen id="js-signFrame">
</iframe>
If you have control over both the host website and the iframe content you can use easyXDM to transfer messages between the iframe and the site (of course you can use HTML5 socket but easyXDM have a great fallback mechanism which supports older browsers as well).
You can use the message logic to alter window.location of the parent window.
Here is a POC I made to show how to transfer data between different domains without getting caught by browser's same-origin-policy, you can use it as reference.
link:
https://github.com/eitankw/cross-domain
I am trying put place a Facebook Like-Box on a page on my site, and then style it via my own CSS (chiefly to increase the height awarded to div#stream_content. (The idea is to have the FB feed act as a news feed, but I don't want the user to have to scroll to see more the top two items or so as it does by default).
I have read and experimented with suggestions from these articles and more:
http://stackoverflow.com/questions/4064038/customizing-facebook-like-box,
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/,
http://hitech-tips.blogspot.com/2010/05/facebook-like-button-xfbml-tutorial.html
I am going the FBML route (rather than using an iframe) as I gather is required for applying a cross-domain stylesheet. I gather also that I need this doctype declaration for my webpage:
<!doctype html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
So then I have this in the body of the page:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box
profile_id="***my ID here***"
width="450"
height="600"
colorscheme="dark"
show_faces="false"
stream="true"
header="false"
logobar="0"
css="http://***my domain here***/css/FBstyles.css?1"
href="http://www.facebook.com/***my page name here***"
></fb:like-box>
But I still get these sorts of errors:
"(4) Unsafe JavaScript attempt to access frame with URL ...(my webpage)...from frame with URL http://www.facebook.com/plugins/likebox.php?channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Dfd907a0e%26origin...blahblahblah. Domains, protocols and ports must match."
Where am I screwing up?
I went this route too. Although you are using FBML, the actual embedded code ends up being an iframe anyway. (you can see it in the DOM with an HTML inspector after it loads). About the only thing I was able to do was put it in a div with a colored background, since the iframe is transparent, and a border.
You are probably getting errors since the javascript on the Facebook server is trying to access the CSS on your server. I didn't think you could do this.
EDIT:
In the StackOverflow link you provided, the posted answers clearly state that using your own CSS only works with a "Fan" box, not with a "Like" box.
I can see this web site is somewhat over my head, but I'm having trouble finding an answer.
I want to put my header, with links to other pages, over external content. Here's why: My MLM gives me a replicated web site that they maintain. I want to add links to my blog, contact info, even meta tags to the site. I though I had it done by using an iframe. I have my content at the top, and the MLM site shows up in the iframe. (here is the link www.trivanijoanne.com) The problem is that the iframe doesn't resize when the external content changes, and it is confusing for the user to need to scroll up to see the page. Also, the pdf pages don't load inside the iframe.
I looked around online and see that iframes are a thing of the past. What should I be using to accomplish this task?
you could use PHP to get the page markup (possibly using cURL or fopen) and display it whilst putting your own content into the body section
(str_replace()
<body>
with
<body><div id='header'>my content</div>
)
and attach your own css stylesheet with
*{
position:relative;
top:-100px;
}
if you cant use PHP for some reason then this could also be done using javascript and iFrames