How to add Open Graph properties to an iframe?
For example, this is a Facebook "Like" button generated by default by prettyPhoto (lightbox-like jquery plugin for displaying full-screen images):
<iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href=http%3A%2F%2Fexample.com%2F%23prettyPhoto%2F2%2F&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowtransparency="true"></iframe>
This code has the following problems:
in practice, it Likes the page http://example.com instead of the
dynamic photo page (which is http://example.com/#prettyPhoto/2/)
It shows title and description from page http://example.com instead of the dynamic photo page
The http://developers.facebook.com/tools/debug tool, when I pass my dynamic image page address to it (http://example.com/#prettyPhoto/2/) tells me that:
Inferred Property: The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
Will setting those properties help to have the correct url and description for the image? How to insert those properties into the "Like" button iframe? For example, let's assume that the og:title is "My super image". How should the mentioned above iframe code look like with this property set, where to put it?
How to add Open Graph properties to an iframe?
Not at all, of course.
Those properties are put into the HTML code of URLs delivering HTML documents; the “iframe” has nothing to do with it whatsoever.
This code has the following problems:
in practice, it Likes the page http://example.com instead of the dynamic photo page (which is http://example.com/#prettyPhoto/2/)
It shows title and description from page http://example.com instead of the dynamic photo page
Those are not problems of the like button code, but of the site at http://example.com.
The hash part of an URL has only client-side meaning – it does not even get transferred to the web server at all. So http://example.com/#prettyPhoto/2/ and http://example.com/ are the exact same URL, from the web server’s view (the server serving example.com). So it will deliver the same data for requests to “both” of those URLs, and that is totally not the like button’s or for that matter Facebook’s fault.
It is most likely the fault of the noob who set up that page on example.com using fancy AJAX an’ stuff, thinking that’s cool and whatnot, but lacking basic knowledge about the techniques involved at the same time.
Will setting those properties help to have the correct url and description for the image?
No; not until the matter of making the individual contents of the site available under individual URLs is not resolved first.
Related
I'm trying to support a CQ5 (5.5) installation developed by an outside firm for my company.
It appears that my company wanted a pretty 404 page that looked like the rest of the site, and using the custom Sling 404.jsp error handler to redirect to a regular page that merely says "Page Not Found" was the easiest way to do it. The problem is that the 404 page actually returns a 200 status code since it really is just a regular content page that bears a "Not Found" message on it.
This is causing us problems with Google and the GoogleBot, since Google believes all the old search links to now non-existent pages are still valid (200 status code).
Is there any way to configure CQ to return the appropriate 404 status code for the "not found" HTML page that we display? When I am in the CQ Author mode editing the page, I find nothing in page properties or in components that could be added to the page.
Any help would be appreciated, as CQ is not exactly my area of expertise.
You'll have to overlay /libs/sling/servlet/errorhandler/404.jsp file in order to do so - copy it to /apps/sling/servlet/errorhandler/404.jsp and change according to your specification.
And if you are looking specifically into setting appropriate response status code - you can do it by setting respective response property:
response.setStatus(404);
UPDATE: instead of redirecting to the page_not_found.html you might want to include it to the 404.jsp after setting response status:
<sling:include path="path/page_not_found.html" />
You can set the response code fairly easily with this sort of code: response.setStatus(SlingHttpServletResponse.SC_NOT_FOUND);
So for example, a quick-and-dirty implementation on your page_not_found.jsp would be as follows:
<%
response.setStatus(SlingHttpServletResponse.SC_NOT_FOUND);
%>
(or a longer-term/better implementation would be to set it via a tag and a tag library to avoid scriptlets)
If your page_not_found.html page is a static HTML page and not rendered via a jsp, you may need to change your 404.jsp so it redirects to a page that is rendered via a jsp for this approach to work. The status code is set by the server rendering the response. It is not something intrinsic in the HTML itself, so you won't be able to set this in a regular, static HTML page. Something must be done on the server to set this status code. Also see How to Return Specific HTTP Status Code in a Plain HTML Page
Opening a page using querystring and trying to share that page using share button and setting meta tags and it is working for some postid which I am getting from querystring in asp.net
Below is the link of page
http://efinancedoctor.in/AddComments.aspx?PostId=6- for this it is giving warnings like
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
and for
http://efinancedoctor.in/AddComments.aspx?PostId=10 - it is working good
The PostId10 link was scraped after the PostId6 link, and includes an image tag which is causing the problem. Re-scraping this today gives the same error that PostId6 has.
The existing scrape of both links shows it can't find any meta tags, so that is what is causing the problem.
PodtId10 also gives this error from the old scraped information:
og:image could not be downloaded or is too small
og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://efinancedoctor.in/images/logo-right.gif' will be used instead. Consult http://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.
The problem is that the GIF is 180x203 pixels, but facebook's minimum size is 200x200 px.
For the PostId10, you also have an error for the og:image property, because the content isn't a url.
It should be : <meta property="og:image" content="http://efinancedoctor.in/images/logo-right.gif" />
For the PostId6, here is the code that Facebook see : https://developers.facebook.com/tools/debug/og/echo?q=http%3A%2F%2Fefinancedoctor.in%2FAddComments.aspx%3FPostId%3D6
And I don't see meta tags for Facebook in the <head></head>. So if they are not there, Facebook doesn't know what to display.
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 have a website that uses IFrame in a page that loads other pages based on server side logic. So, if I do a View source, I would see something like this:
<iframe src="DeterminedOnServerSide.aspx" id="myFrame">
</iframe>
My question is - Is there any way, an attacker can change the src attribute to point other users to a malicious website considering that the src is determined on the server side?
Yes or no. You have not specified how "DeterminedOnServerSide.aspx" is determined. If your code for this consists of DeterminedOnServerSide = Server.Request["frame"] then it can clearly be 'hacked'. If you use a method that ensures only valid urls are chosen, then it is not vulnerable.
No, not unless they've compromised your server and can access and modify those source files. And if that's the case, changing of the 'src' attribute in the iframe is the least of your worries.
Yes. A XSS attack has the capability of changing the src of an iFrame.
Check it out: http://research.zscaler.com/2009/12/xss-embedded-iframes.html
The page you "include" using the IFRAME can navigate to a new page, changing the source.
Any user of the site can change the src value of the IFrame, using Developer tools like Firebug and IE Developer Tools
Any sucsessful man in the middle attack can change all your html source including the src attribute. If the attacker is in control of a proxy or network between your customer and your server they can change any of your html including the src attribute.
Any sucsessful hack into your server can change all you sourcecode and change the attribute.
What Hacker are you thinking of? you should only iframe to people/sites you trust, as this is a common way for cross site scripting attacks.
The only ways to change the src attribute of your iframe (or anything in your website) are:
The webpage which load the iframe has an XSS vulnerability and the attacker use the DOM to change it.
He (or she) get access to your source code. Then the change of a iframe attribute is your less important concern ;-)
I'm trying to execute an HTTP GET from my website to another website that is brought in via iframe.
On Firefox, you can see in the source that the correct url is in the iframe src along with it's correct parameters-- and it works.
On IE, you can see in the source that the correct url is in the iframe src along with it's correct parameters-- and it doesn't work...
Is there something about IE that doesn't let you pass parameters through an iframe in the querystring?
I've tried refreshing the iframe in IE, I've tried refreshing my page & the iframe in IE, and I've tried copying the url and re-pasting it into the iframe src (forcing it to refresh as if I just entered it into the address bar for that iframe window). Still no luck!
Anyone know why this is happening, or have any suggestions to try to get around this?
Edit: I cannot give a link to this because the site requires a password and login credentials to both our site and our vendor's site. Even though I could make a test account on our site, it would not do any good for the testing process because I cannot do the same for the vendor site. As for the code, all it's doing is creating the src from the backend code on page load and setting the src attribute from the back end...
//Backend code to set src
mainIframe.Attributes["src"] = srcWeJustCreated;
//Front end iframe code
<iframe id="mainIframe" runat="server" />
Edit: Problem was never solved. Answer auto accepted because the bounty expired. I will re-ask this question with more info and a link to the page when our site is closer to going live.
Thanks,
Matt
By the default security settings in IE query parameters are blocked in Iframes. On the security tab under internet options set your security level to low. If this fixes your problem then you know that is your issue. If the site is for external customers then expecting them to turn down their security settings is probably unreasonable, so you may have to find a work around.
Let's say your site is www.acme.com and the iframe source is at www.myvendor.com.
IIRC, most domain-level security settings don't care about the hostname, so add a DNS CNAME to your zone file for myvendor.acme.com, pointed back to www.myvendor.com. Then, in your IFRAME, set the source using your hostname alias.
Another solution might be to have your Javascript set the src to a redirector script on your own server (and, thus, within your domain). Your script would then simply redirect the IFRAME to the "correct" URL with the same parameters.
If it suits you, you can communicate between sites with fragment identifiers. You can find an article here: http://tagneto.blogspot.com/2006/06/cross-domain-frame-communication-with.html
What BYK said. I think what's happening is you are GETting a URL that is too large for IE to handle. I notice you are trying to send variable named src, which is probably very long, over 4k. I ran into this problem before, and this was my code. Notice the comment about IE. Also notice it causes a problem with Firefox then, which is addressed in another comment.
var autoSaveFrame = window.frames['autosave'];
// try to create a temp form object to submit via post, as sending the browser to a very very long URL causes problems for the server and in IE with GET requests.
var host = document.location.host;
var protocol = document.location.protocol;
// Create a form
var f = autoSaveFrame.document.createElement("form");
// Add it to the document body
autoSaveFrame.document.body.appendChild(f);
// Add action and method attributes
f.action = protocol + '//' + host + "/autosave.php"; // firefox requires a COMPLETE url for some reason! Less a cryptic error results!
f.method = "POST"
var postInput = autoSaveFrame.document.createElement('input');
postInput.type = 'text'
postInput.name = 'post';
postInput.value = post;
f.appendChild(postInput);
//alert(f.elements['post'].value.length);
// Call the form's submit method
f.submit();
Based on Mike's answer, the easiest solution in your case would be to use "parameter hiding" to convert all GET parameters into a single URL.
The most scalable way would be for each 'folder' in the URL to consist of the parameter, then a comma, then the value. For example you would use these URLs in your app:
http://example.com/app/param,value/otherparam,othervalue
http://example.com/app/param,value/thirdparam,value3
Which would be the equivalent of these:
http://example.com/app?param=value&otherparam=othervalue
http://example.com/app?param=value&thirdparam=value3
This is pretty easy on Apache with .htaccess, but it looks like you're using IIS so I'll leave it up to you to research the exact implementation.
EDIT: just came back to this and realised it wouldn't be possible for you to implement the above on a different domain if you don't own it :p However, you can do it server-side like this:
Set up the above parameter-hiding on your own server as a special script (might not be necessary if IE doesn't mind GET from the same server).
In Javascript, build the static-looking URL from the various parameters.
Have the script on your server use the parameters and read the external URL and output it, i.e. get the content server-side. This question may help you with that.
So your iframe URL would be:
http://yoursite.com/app/param,value/otherparam,othervalue
And that page would read and display the URL:
http://externalsite.com/app?param=value&otherparam=othervalue
Try using an indirect method. Create a FORM. Set its action parameter to the base url you want to navigate. Set its method to POST. Set its target to your iframe and then create the necessary parameters as hidden inputs. Finally, submit the form. It should work since it works with POST.