I have the same problem with product options not showing in the amp-iframe. (With reference to Origin of amp-iframe must not be equal to container if allow-same-origin is set post.) So now, I am trying to set the source of the content to be from another origin, which redirects back to my website. But I am not sure how to rewrite the code that would incorporate the new redirect url as the source. Can someone advise me please? Here are the codes:
<amp-iframe height="400" width="600"
layout="responsive"
sandbox="allow-forms allow-pointer-lock allow-popups allow-scripts allow-top-navigation allow-modals allow-same-origin"
src="{{product.amp_options_url}}">{{! USE src="https://XXX.ngrok.io\{\{product.amp_options_url\}\}" FOR TESTING ON LOCALHOST }}
</amp-iframe>
And I need to rewrite this part:
src="{{product.amp_options_url}}"
to incorporate this url (that redirects to my website) as the src:
https://origin.example.com/
So that I could serve the amp-iframe content as if it is from another origin.
Any help would be appreciated!!!
Related
I have a page created with Elementor. Nothing fancy. Just a Section, inside of which there is a Column, inside of which there is an HTML Code block. Inside the HTML block there is just an iFrame, like <iframe src="https://app.squarespacescheduling.com/schedule.php?owner=xxxxxxxx" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>...
The above URL of the iFrame is the general appointment scheduling of the owner xxxxxxxx of the Squarespace; but there are also more specific URLs, like <iframe src="https://app.squarespacescheduling.com/schedule.php?owner=xxxxxxxx&appointmentType=yyyyyyyy" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>, which refer to a specific task yyyyyyyy of the owner xxxxxxxx...
So what I basically want is to be able, instead of creating 15 different pages, each with the appropriate yyyyyyyy task value, to create just one page withouth the appointmentType param in the iFrame's URL, and then pass somehow the param with the appropriate value, when calling the page itself.
Is this even possible though, or should I do it the hard/boring way of creating each page for each task? TIA
OK, this was relatively easy once I found the correct resource... So I'm sharing it here, in case anyone needs it in the future!
Basically it's all explained in this video: https://www.youtube.com/watch?v=CBLIWeSmz30
The only difference in my case was that probably the code of the iFrame was complicated enough, and I was hitting some escaping issue, resulting in the last part of the code (<script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>) to getting lost...
So I had to deviate slightly from the suggested solution, and instead I followed the shortcode solution. So I added a shortcode with the following snippet:
add_shortcode('scheduler_iframe', 'scheduler_iframe_func');
function scheduler_iframe_func($atts)
{
return '<iframe src="https://app.squarespacescheduling.com/schedule.php?owner=xxxxxxxx&appointmentType=' . $atts['course'] . '" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>';
}
From there, it was just a matter of setting up correctly the appropriate settings in Elementor. So for that, I replaced the HTML block with a Shortcode block, and instead of adding the shortcode in the appropriate field, I chose Request Parameter, then I set it up like in the images below:
Finally visiting the URL of that page and passing the appropriate ?course=yyyyyyyy querystring in the URL, was enough to fetch the appropriate iFrame that I wanted to show!
I'm trying to embed an iframe into my blogger site. But the main problem is that Blogspot does not support iframe with HTTP URL and my target website is on HTTP.
this is my iframe example:
<iframe
src="http://mywebsite.com"
style="border:0px #ffffff none;"
name="myiFrame"
scrolling="no"
frameborder="1"
marginheight="0px"
marginwidth="0px"
height="400px"
width="600px"
allowfullscreen
></iframe>
Blogger shows the following warning:
There are HTTP resources on this page, because of which mixed content can negatively affect the security and display of certain elements when viewing your blog over a secure connection.
How can I embed an iframe with HTTP URL into Blogspot.com?
Blogger provides an option to Dismiss the warning. Refer to the screenshot -
Once that warning has been dismissed and you try to save the post once again, Blogger doesn't show any warning and saves the contents of the post.
A friend of mine has a Wordpress site and I help out from time to time. I went on there today and noticed that some images are not being displayed.
He has a post created and published and in that post he has this code:
[caption id="attachment_1173" align="alignnone" width="800"]<img class="size-full wp-image-1173" src="http://domain.com/wp-content/uploads/2017/02/335237585.jpg" alt="Image 1" width="800" height="569" /> Image caption[/caption]
However when I view the page the alt tag is displayed and if I inspect the element the source (src) of the image is pointing to a completely different domain:
http://d14x51nv4ivcb0.cloudfront.net/wp-content/uploads/2017/02/35237585.jpg
Which fails to load correctly.
Also at the end of the source code there is this comment:
<!-- Performance optimized by W3 Total Cache. Learn more: https://www.w3-edge.com/products/
Content Delivery Network via Amazon Web Services: CloudFront: d14x51nv4ivcb0.cloudfront.net
Served from: domain.com # 2017-02-28 12:04:57 by W3 Total Cache -->
So it seems like the cloudfront domain/W3 Total Cache is down? I have never used W3 Total Cache before but seems strange that in the post the image src is set correctly but it gets transformed when viewed.
*** NOTE ****
Please skip to "Update 9" which is highlighted below for the real question; below was troubleshooting the original issue to find what was really going on.
*** (Previous title of this question: "After rewriting image url with htaccess, new page shows fine but image from the redirect does not display unless I reload the page?")
A strange thing is occurring, maybe it is a problem with my htaccess code.
Here is my code:
RewriteCond %{REQUEST_FILENAME} .*jpg$|.*gif$|.*png$ [NC]
RewriteCond %{HTTP_REFERER} !mysitee\.com [NC]
RewriteRule ([^/]*)\.(jpg|gif|png)$ http://mysitee.com/?attachment=$1
What this does is change:
http://mysitee.com/wp-content/uploads/2015/10/myimage.jpg
to this:
http://mysitee.com/?attachment=myimage
The code works very well, but a strange thing happens that I need fixed. I am using Wordpress by the way.
The problem is that on the new page, the image on the attachment page I rewrite the url to go to, does not display unless I manually reload the page.
Perhaps it has something to do with the htaccess redirecting too quickly before the http request to display the image could happen?
Here's what happens on the redirect:
But when I manually press reload on the page, the image loads.
I also did something else, I redirected to the post page after that, and the same thing happens on the post page - all the other images load fine, but the image I redirected from shows as blank until I manually reload the page. So it's not just a problem with the attachment page.
See, here is what happens when I redirect it to the post page the same way:
As you see, the other images and content still loads, just not the image from the image redirect. Again, if I manually reload the page, then the image loads.
It seems like an http request issue as a result of the redirect, or maybe it has to do with asynchronous loading due to the redirect, or maybe even my htaccess code isn't written properly. I can't be sure.
I need it to display the image after the redirect. Please help.
Update -
here is the html code on redirect when the image is not loading:
<div class="attachment">
<a href="http://mysitee.com/mycategory/myimage/attachment/myimage/#main" rel="attachment">
<img width="600" height="896" src="http://mysitee.com/wp-content/uploads/2015/07/myimage.jpg" class="attachment-1200x1200" alt="myimage">
</a>
</div>
and here is html code when I refresh the page and the image loads:
<div class="attachment">
<a href="http://mysitee.com/mycategory/myimage/attachment/myimage/#main" rel="attachment">
<img width="600" height="896" src="http://mysitee.com/wp-content/uploads/2015/07/myimage.jpg" class="attachment-1200x1200" alt="myimage">
</a>
</div>
The code is completely the same which makes me thing it's probably something other than the html code causing the issue.
Update 2 -
I just compared the entire source code of the webpage before and after reload, and it is 100% identical, not a single character is different.
Update 3 -
I also viewed the error window under inspect element and there are no page errors displaying. So it must be an internal issue not a front end issue.
Update 4 -
Okay, here's something interesting. When I right click the image that isn't loading, "copy image" is greyed out but I can still copy the image url which is correct.
does this help?
Update 5 -
I tried to add:
Options +FollowSymLinks
to the htaccess, but it had no effect.
Update 6 -
I used tor to access from an outside ip and different browser, to see if the issue was local, but the issue is not just local, it happens everywhere.
Update 7 -
Here is something interesting. In the inspection window, I navigated to the image and when I right clicked the image and opened in new tab, it did not open the image but instead it opened the same attachment url. See the screenshot:
Update 8 -
Here is the network inspection window:
I see that it is requesting the attachment url instead of the image url. When I reload the page, it shows the image url where it is currently showing the attachment url in the network inspection window. Could be the problem.
Here is a screenshot of the Network inspection window when I reload the page which loads the image. As you see, it's different. So this is clearly where the problem lies, it is because the htaccess redirect is causing the redirected image on the new page to load from the attachment url instead of the image url until I manually reload the page.
------------------------------------------------------------------------------------------------
UPDATE 9 - (Final Question that needs answered)
Ok so further debugging confirmed the issue, although I don't know how to fix it. I checked by redirecting to the other URL as well, and the image url is requesting that url instead of the image url just the same.
So what's happening is the same url that is being redirected, htaccess is also rewriting the url for that same image on the new redirected page with the redirect.
For example:
for the image:
http://mysitee.com/wp-content/uploads/2015/10/myimage.jpg
which, on page visit is redirected via the htaccess code at the beginning of this question to:
http://mysitee.com/?attachment=myimage
, now, on the page http://mysitee.com/?attachment=myimage which also contains the original image http://mysitee.com/wp-content/uploads/2015/10/myimage.jpg,
the htaccess is also rewriting that image http://mysitee.com/wp-content/uploads/2015/10/myimage.jpg to the redirected url http://mysitee.com/?attachment=myimage.
So in other words, to simplify into easier terms, let's make:
IMAGE-X = http://mysitee.com/wp-content/uploads/2015/10/myimage.jpg
URL-Z = http://mysitee.com/?attachment=myimage
so what is occurring is that whenever IMAGE-X is redirected to URL-Z via htaccess, every instance of IMAGE-X on page URL-Z is also rewritten by the htaccess changing the url of IMAGE-X to URL-Z.
See the path below:
Original URL: IMAGE-X
1. htaccess redirect causes it to redirect to URL-Z
2. on page URL-Z, it contains the image IMAGE-X
3. but since it is in the same HTTP request, htaccess also rewrites the URL of IMAGE-X in the HTTP request to request the URL of URL-Z
Put yet another way, the HTML that the server is seeing is this:
<div>
<a href="#">
<img src="http://mysitee.com/?attachment=myimage">
</a>
</div>
But what the server SHOULD be seeing is this:
<div>
<a href="#">
<imgsrc="http://mysitee.com/wp-content/uploads/2015/07/myimage.jpg">
</a>
</div>
So how do I fix the htaccess so that it does not also rewrite the images on the redirected url too?
please help thank you
I am trying to generate some embeddable iframe code so a user can include the code on a blog to display content I'm planning to deliver. Right now the content I'm trying to deliver is just a website. I am trying to use the following code on a Wordpress blog:
<iframe width="420" height="315" src="http://www.cnn.com" frameborder="0"></iframe>
However when the page is viewed Wordpress simply outputs a link for "http://www.cnn.com" based on the following html.
http://www.cnn.com
That said, if I use Youtube generated iframe code, the iframe loads fine. For example:
<iframe width="420" height="315" src="http://www.youtube.com/embed/_OBlgSz8sSM" frameborder="0" allowfullscreen></iframe>
results in:
<iframe class='youtube-player' type='text/html' width='420' height='315' src='http://www.youtube.com/embed/_OBlgSz8sSM?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' frameborder='0'></iframe>
Any idea what Youtube is doing to enable this functionality or more generally how to get my simply iframe to work.
I don't know why you get an anchor instead of the iframe, but I know that google don't want their homepage in iframes. If you would have an iframe with the src http://www.google.com, you would see an empty iframe. Also see this example.
=== UPDATE ===
Wordpress prohibits iframes with few exceptions. Probably you can handle it with shortcodes. Try adding following untested code into the functions.php in your theme.
// [iframe src="www.cnn.com"]
function iframe_func($atts) {
extract(shortcode_atts(array(
'src' => 'default'
), $atts));
return '<iframe src="{$src}"></iframe>';
}
add_shortcode('iframe', 'iframe_func');
Now you can add [iframe src="www.cnn.com"] in the article editor in the wordpress admin.
Creating a shortcode is the way I get around this problem. It bypasses the WYSIWYG editor and puts the html in the page.
I would approach it like this.
Add this to your functions.php file:
function add_iframe($atts) {
extract(shortcode_atts(array(
'src' => '/'
), $atts));
$theframe = '<iframe src="'.$src.'" width="420" height="315" frameborder="0"></iframe>';
return $theframe;
}
add_shortcode('iframe', 'add_iframe');
Useage:
Add [iframe src=http://thesiteyouwanttoshow.com] to the content where you want the iframe to show.
If you are loading your own web page within the iframe remember that most hosted solutions will have xFrame options set to SAMEORIGIN, so no matter what you change in Wordpress, the page will still not render as it is being blocked by the target website.
I spent hours with this problem so hopefully if you are having this issue you will the target website as well. If you are hosting a solution on rails the answer I found is here and a website that will definitely load in Wordpress can be found here, so feel free to use that endpoint as a test.
Google uses the X-Frame-Options header (set to SAMEORIGIN) to prevent you from placing it in an iframe. Getting around this would require the user to use a browser that doesn't support X-Frame-Options.
Unfortunately the major search engine sites such as google and yahoo (bing excluded) don't allow for iframe embedding since they offer a plethora of APIs and integration options. So there is really no real way for you to do this. If you are not planning on embedding google as your iframe source then you should be in the clear with the current code that you have in place. Try it out and just change the source to something else - google will not show up in its place. If you want a search engine there unfortunately it is with horror that I say that bing is the only one that works.
Hope this helps!
So in recap - Google does not embed in iframe, but other content that you produce should based on your coding:
example:
<iframe width="420" height="315" src="http://www.uncrate.com" frameborder="0"></iframe>
http://jsfiddle.net/pKby8/
The Anchor that you get is a result of the xFrame option. When it connects to the google servers the servers kick back a cute response hinting that you should link to them instead of iframe.
I would create a WordPress short_code that would insert your iFrame in the output. I think by adding the iFrame code directly in the post box wordpress is changing it.
http://codex.wordpress.org/Shortcode_API