I use Pdf.js, I get base64 file from web service (this.attachmentSource), and when I want to add var iframe = "<iframe width=800 height=550 src='" + this.attachmentSource + "' > </iframe>",For some pdfs in google chrome I get iframe empty, but in Mozila everything work fine, who can explain this mystery?
I tracked down the issue
The iframe is being block by chrome detecting insecure content and blocking the iframe from loading. this only occurs when using Chrome, IE Firefox, Safari on PC work fine.
Safari and Chrome also work fine on the iPad. It appears Chrome on PC has a different set of rules and blocks the content. Selecting the shield in the URL title bar allows the content to be displayed. Pressing Ctrl shift J gives some information about what content is being blocked.
wouldn't it be nice if all the browser followed the one set of rules
I happened to notice: server Response Header:
x-frame-options: DENY
The DENY option is the most secure, preventing any use of the current page in a frame. More commonly, SAMEORIGIN is used.
I was using AWS CloudFront with a Lambda#Edge function already, so I found a solution here: Configuring X-Frame-Options Response Header on AWS CloudFront and S3
If you are using a different server stack, you will have to adjust your server response headers accordingly.
iFrame doesn't support most of the things. For ex: if you have graphs in your application it won't be displayed.Use embed or object instead.
<object data="{{srcUrlTrusted}}" width="100%" height="800">
<embed ng-src="{{srcUrlTrusted}}" width="100%" height="800"> </embed>
</object>
I was having the same issue when trying to embed a PDF. I tried both an <iframe> and <embed> approach, but they still wouldn't open in Chrome.
The solution for me was opening the PDF in Adobe Acrobat and under the "Protect" tab, select "Remove Hidden Information".
I didn't create this PDF, so I am not sure which policy, etc was causing the issue.
Hope this helps!
Related
I have a iframe where videos played when the user choose. Everything is on my website, but I want to hide the referrer to the user, so they don't know in what page the videos are. I'm trying with referrerpolicy="no-referrer", but in firefox doesn't work, in chrome works fine. Anyone know why this happens and how to fix it?
<iframe class="embed-responsive video" id="myvideo" src="" referrerpolicy="no-referrer"
scrolling="no"></iframe>
It looks like what you are trying to do is valid, but there are several open bugs in firefox that prevent this from working as it should.
You may be able to fix this at the server level though, through the use of the referrer-policy header. Tweak your server config so that the videos are returned with this header set:
Referrer-Policy: no-referrer
I'm looking for how to embed a PDF file in a web page that will be viewable in the native Android browser / Chrome. If I use something like this:
<object data={'LINK_TO_PDF.pdf'+'#zoom=100&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0'}
type='application/pdf'
width='100%'
height='90%'>
<p>This browser does not support inline PDFs. Please download the PDF to view.</p>
</object>
It works great on Chrome, FireFox, and Edge on Windows. It works great in Safari on iPad (iPadOS) and Safari on iPhone (iOS).
But it does not display on Android.
The files are not publicly accessible, so I cannot use the Google Docs viewer.
PDF.js doesn't seem to help. PDFObject doesn't seem to help. I've looked a bit at ViewerJS.org, but most of its source code has not been updated in 7yrs.
I've seen lots of questions and answers about this, but most of them are old. Surely in 2021, there's a way to do this that works with Android?
(Having to download the file, open it up in a third-party PDF Viewer app, and then close it, switch apps, delete the PDF, and go back to the webpage seems very backwards.)
How can this be done to provide a good user experience on Android?
My embed element is able to show pdf preview in chrome but not in safari. Can anyone advise on how I can render the embed PDF Preview element on safari?
I have tried some of the methods but none worked.
Recommended way to embed PDF in HTML?
Thank you!
<embed src="" type="application/pdf">
In many mobile browsers, PDFs are not able to be rendered using standard embeds, instead, you might want to turn to a library such as pdf.js by Mozilla. This library renders pdfs independently of the built-in PDF viewer, so it doesn't have the same restrictions as embeds.
This code is working in Dreamweaver default browser but not in chrome or firefox. It shows only blank page , without showing google.com. Don't know why! May be the problem is with iFrame. But I have to show something other page in my page. Is there any workaround??
<!DOCTYPE html>
<html>
<head>
<title>booo yeah</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
var height = $(window).height();
var width = $(window).width();
$('iframe').width(width);
$('iframe').height(height);
});
</script>
</head>
<body>
<iframe src="http://www.google.com" frameBorder="0"></iframe>
</body>
</html>
Screenshot:http://goo.gl/jTpB2g
On back there is dreamweaver with left side code and right side its default browser showing the working code. In front, there is chrome in which nothing is showing
The website you are trying to display has security that prevents it from being used in iframe. for example <iframe src="http://www.w3schools.com"></iframe> works fine. The problem is not with your browser.
Open you console panel and you can see an error message says:
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Google search returns an X-Frame-Options header with SAMEORIGIN, that meas this page can only be displayed in a frame on the same origin as the page itself.
See more from X-Frame-Options
Solutions:
If you have access to the site, try set X-Frame-Options to ALLOWALL or simply remove this from http response.
If you are stuck at google, try use Google Custom Search instead, replace your url with this http://www.google.com/custom, which sends 'X-Frame-Options: ALLOWALL ' which allows you to embed this site in your IFRAME.
It's probably not displaying for security reasons.
Same Origin Policy
The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a document from another origin. This policy dates all the way back to Netscape Navigator 2.0.
Some websites do allow it but Google doesn't. Strange that it's ok with Dreamweaver doing it.
There are ways you can circumvent it (I can't say they'll be suitable for your problem though).
Ways to circumvent the same-origin policy
As ajtrichards said, Google has restrictions due to Same Origin Policy.
Just try another domain you will see that your code works
jsbin.com/UJeHaqe/1/edit
I'm writing a firefox extension to read out the privacy settings of a facebook user. (not a facebook app!!) To switch between different websites of facebook I used iframes, but this isn't working anymore. I have this problem since 2 weeks.
$('#globalContainer').append('<iframe id="reusable_iframe" src="" width="90%"
height="400" name="reusable_iframe"></iframe>');
//....
$('#reusable_iframe').attr('src', link);
I'm follow the Same origin policy and it was working just fine since a 2 weeks!? an example:
var link = "http://www.facebook.com/editprofile.php?sk=basic";
Now I just get a blank iframe :(
the funny thing is, that if I add "http://www.youtube.com/embed/Qi_AAqi0RZM" or "http://trololololololololololo.com/" to the iframe it's working without a problem... :/
did facebook change the rules for own links in iframes? Is there a workaround? Is there an other way for me to scan different sites with firefox-extensions? i would prefer to stay with content-scripts....
Edit: This is how it looks at firebugs... also funny is that the facebook page http://www.facebook.com/undefined is working however!?
<iframe id="areusable_iframe" width="90%" height="400" name="areusable_iframe" src="http://www.facebook.com/">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
Facebook sends the following response header to the browser:
X-Frame-Options: DENY
This cause all major browsers (even IE8 and higher) to prevent showing it inside frames.
The old way was "frame buster" using JavaScript forcing the page to open as the top window, but it's very unfriendly so it was replaced by this header in most modern websites that don't want to be displayed in frames.
Not much you can do though, sorry.
The "undefined" page is just blank content which is their 404 custom error page as it does not contain the above header, it can be displayed inside frame.
To learn more about the X-Frame-Options header see this documentation.