i have this html on mobile app:
<header class="bar-title">
<a class="button-prev" onclick="history.back(-1)">
BACK
</a>
<h1 class="title">FACEBOOK</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;" >
<iframe style="height: 100%; width: 100%;" src="https://www.facebook.com/pages/SOMEPAGE" ></iframe>
</div>
but i get error:
Refused to display 'https://www.facebook.com/pages/SOMEPAGE' in a frame because it set 'X-Frame-Options' to 'DENY'
little comment: i dont have access to facebook page options
X-Frame-Options is an response header.
The X-Frame-Options HTTP response header can be used to indicate
whether or not a browser should be allowed to render a page in a
or . Sites can use this to avoid clickjacking attacks,
by ensuring that their content is not embedded into other sites.
It means facebook blocks this kind of behaviour
Related
I am currently working on embedding a tiktok video into a react application.
At the moment, I am trying to display the html code, one can get by using tiktoks api (https://developers.tiktok.com/doc/embed-videos), through the use of an iframe.
The html code:
<blockquote class=\"tiktok-embed\" cite=\"https://www.tiktok.com/#scout2015/video/6718335390845095173\" data-video-id=\"6718335390845095173\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"#scout2015\" href=\"https://www.tiktok.com/#scout2015\">#scout2015</a> <p>Scramble up ur name & I’ll try to guess it😍❤️ <a title=\"foryoupage\" target=\"_blank\" href=\"https://www.tiktok.com/tag/foryoupage\">#foryoupage</a> <a title=\"PetsOfTikTok\" target=\"_blank\" href=\"https://www.tiktok.com/tag/PetsOfTikTok\">#petsoftiktok</a> <a title=\"aesthetic\" target=\"_blank\" href=\"https://www.tiktok.com/tag/aesthetic\">#aesthetic</a></p> <a target=\"_blank\" title=\"♬ original sound - tiff\" href=\"https://www.tiktok.com/music/original-sound-6689804660171082501\">♬ original sound - tiff</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>"
As the last part (the async script) was creating errors in the iframe, I removed it per code. Instead, I am loading it as soon as the component mounts and append it to the head of the document. Only when the script was already loaded, the iframe is actually rendered. For that, I used the method from this post: Problem embedding tiktok video into angular 7
render(){
return (
this.state.embedHtml != null ?
<iframe
srcDoc = {this.state.embedHtml}
sandbox = "allow-forms allow-same-origin allow-scripts allow-top-navigation"
/>:null
)
}
However, all I get is this visual and these values:
TikTokIFrame(Video not showing)
There are no errors in console.
So yeah, what I actually would expect is the tiktok video to be visible, as well as the text having the proper style. However, this is not the case.
I was trying several different approaches. (From setting the innerHtml of various elements to the given html, to using an iframe (as shown above)).
Does anybody have an idea, why the video is not showing?
Use https://www.tiktok.com/embed/{video_id} instead of the page URL. You can find the video_id by looking at the last number string of the tiktok url. For example, the video ID of this video
https://www.tiktok.com/#heaven.marshall/video/7072819797184171310
is 7072819797184171310
Set your CSS of iframe and iframe container
const iframe_container = {
left: 0,
width: "100%",
height: 500,
position: "relative"
}
const iframe ={top: 0,
left: 0,
width: "100%",
height: "100%",
position: "absolute",
border: 0}
Place the following DOM element anywhere in your react page.
<div className={iframe_container}>
<iframe
src="https://www.tiktok.com/embed/7072819797184171310"
className={iframe}
allowfullscreen
scrolling="no"
allow="encrypted-media;"
></iframe>
</div>
This is my WordPress website europeanvirtualassistant.com
if you test it on phone it redirects to europeanvirtualassistant.youcanbookme.com I want to remove this redirection but I am unable to find the reason of this redirection. I have checked WP plugin and there is mobile redirect plugin installed. I have checked my header/footer files of theme. and I have also checked .htaccess I have downloaded theme and searched in all files and nothing is in it aswell but there is nothing like which is causing this weird redirection on iPad and mobile. Can anyone help me out in this.
I believe this part is doing that
<div class="overlay-content overlay-content-3280 spb-popup-class-3280">
<p><p>
<iframe id="ycbmiframeeuropeanvirtualassistant" style="width: 100%; height: 1000px; border: 0px; background-color: transparent;" src="https://europeanvirtualassistant.youcanbook.me/?noframe=true&skipHeaderFooter=true" width="300" height="150" frameborder="0"></iframe></p>
<p><script>
<![CDATA[
window.addEventListener && window.addEventListener("message", function(event){if (event.origin === "https://europeanvirtualassistant.youcanbook.me"){document.getElementById("ycbmiframeeuropeanvirtualassistant").style.height = event.data + "px";}}, false);]]></script></p>
as ycbm may not support mobile and is detecting modal height.
Recently, I am working on the Hosted Payment Fields https://www.braintreepayments.com/blog/your-checkout-our-iframes/. And when i input something wrong, The container div 's class is changed, how does this worked? I think there is no way to call the parent with different domain?
the code with bad input.(class : "braintree-hosted-fields-invalid")
<div class="form-control braintree-hosted-fields-invalid" id="hosted-fields-number">
<iframe src="https://assets.braintreegateway.com/hosted-fields/2.15.5/hosted-fields-frame.html#5c7db060-9271-4eac-b4a2-0f405d743293" frameborder="0" allowtransparency="true" scrolling="no" type="number" name="braintree-hosted-field-number" id="braintree-hosted-field-number" style="border: none; width: 100%; height: 100%; float: left;">
</iframe>
<div style="clear: both;">
They're presumably using web messaging, which is specifically designed to provide cross-origin communication. So their script running on the parent page listens for messages from their script running in the iframe and responds to those messages by updating the classes on the field.
If you look at my site www.tripleflowmusic.com, once you load the page, other HTML document with twitter plugin is loaded (Updates.html) in to container with help of of following code (jQuery):
$(document).ready(function() {
$("#subpageframe").load('Pages/Updates.html', function(){
$("#subpageframe").fadeIn(200);
But when I click News button, which does the following thing (It basically reloads Updates.html in the container):
$("#UpdatesButton").click(function() {
$("#subpageframe").fadeOut(200, function() {
$("#subpageframe").load('Pages/Updates.html', function(){
$("#subpageframe").fadeIn(200);
The twitter plugin won't show
The question is, why is this happening?
P.S. To get access to sub pages, simply remove "#" from the URL in the address bar
Your iframe and format isn't there like it is on the homepage. This code is in the homepage but not in http://www.tripleflowmusic.com/#Pages/Updates.html:
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; margin: 0px; padding: 0px; display: inline-block; position: static; visibility: visible; width: 520px;" title="Twitter Timeline" height="600"></iframe>
You have some "a class" and "style" in the news page instead of the proper
<center data-twttr-id="twttr-sandbox-0">
format.
Shows fine on both Safari and Chrome on OS X for me, can you be more specific with what browser you're using and OS?
While we are at it you might want to clean up some of the errors that are being thrown:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.tripleflowmusic.com/FunctionElements/MusicPlayer/Covers/missing.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.tripleflowmusic.com/MediaElements/MusicPlayer/Songs/nylmbyb.mp3 Failed to load resource: the server responded with a status of 404 (Not Found)
I am loading my embed code in iframe through jQuery like this
<div id="My-page" style="width:900px; height:900px; position: absolute;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;" class="iframely-widget-container">
<script>
$("#My-page").empty().append($("<iframe/>", {
src: "http://localhost/flipbeets3.0.com/get-embedded-code/abdul/p~2~2~2?slug-hash=HrFBx&default-tab=result&host=http%3A%2F%2Fcodepen.io"
}));
</script>
</div>
it is showing disallowed key characters error
There is no need to encode the URL when you load it via javascript. This code should work for you:
<div id="My-page" style="width:900px; height:900px; position: absolute;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;" class="iframely-widget-container"></div><script>$("#My-page").empty().append($("<iframe/>", {src: "http://localhost/flipbeets3.0.com/get-embedded-code/abdul/p~2~2~2?slug-hash=HrFBx&default-tab=result&host=http://codepen.io"}));</script>