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 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?

• javascript
• php
• google-chrome
• pdf.js

• have you tried with <object type="application/pdf" data="yourSource"></object> ? – Diego N. Commented Apr 4, 2017 at 9:19
• What if you don't add the src in the HTML and instead add it after you've attached the element to the DOM via JavaScript? – apokryfos Commented Apr 4, 2017 at 9:24
• @Diego yes I tried object, same result. – Vahe Galstyan Commented Apr 4, 2017 at 9:26
• @apokryfos in mozila it worked fine, I think it can not be that issue. – Vahe Galstyan Commented Apr 4, 2017 at 9:29
• Is your data source properly formatted according to the spec? – apokryfos Commented Apr 4, 2017 at 9:31

5 Answers 5

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 monly, 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.

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

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!

Remove attributes if present with

<iframe allow="clipboard-write"
sandbox="allow-top-navigation allow-top-navigation-by-user-activation allow-downloads allow-scripts allow-same-origin allow-popups allow-modals allow-popups-to-escape-sandbox allow-forms" allowfullscreen="true" src="http://assets.google./document.pdf">

<iframe src="http://assets.google./document.pdf" allowfullscreen="true">