Base64 pdf data Uri is not working in IE9 & IE10 - html

In IE9 and IE10 also, Base64 data Uri is not working in the object tag to load the pdf. It is showing a message below "Access Denied".
<object id="objPdf" data="data:application/pdf;charset=utf-8;base64,{myValue}" type="application/pdf"></object>
Any idea on this?

IE doesn't support the data protocol. Per the documentation, the only supported elements/attributes are the following:
object (images only)
img
input type=image
link
CSS declarations that accept a URL, such as background, backgroundImage, and so on.
Besides, there's also a "IE 10 treats blob URL as cross-origin and denies access" bug filled against IE, still open and active.
I just ran into the same issue when trying to serve CSV data (data:text/csv;charset=utf-8,...)

This is an old post but if someone comes across this on a Google search the solution is that you need to have a URL or API endpoint that will return your pdf data, then you put the address to that in your object's data attribute.
<object data="/api/pdf"
If your pdf is generated by information on the page then you can send that info to the API endpoint in the querystring.

Related

iframe with data URI is empty on Google webapp (Apps Script)

I would like to make a web app using Google Apps Script where users get pages of a pdf shown one by one.
Using a pdf library I can get the base64 data of each page of the pdf. But using none of these ways for displaying it works:
<object type="application/pdf" data="data:application/pdf;base64,...">
<embed src="data:application/pdf;base64,...">
<iframe src="data:application/pdf;base64,...">
Displaying an image using <img src="data:image/png;base64,..."> does work.
All mentioned methods do display the single pdf page when putting it in an html-document.
I thought it had to do with the https requirement mentioned on https://developers.google.com/apps-script/guides/html/restrictions, but looking at How can I refer to a Data URI in https? I learned the data URI should be https (since the Google web app is served over https).
Any suggestion, like forcing the data URI to be 'interpreted' as an https-URI OR converting the pdf page to an image (not prefered, since I figure it would produce unnecessary overhead), is welcome.
Since the single page pdfs aren't needed to be saved like that, saving each page on Google Drive and using its file-URL would also produce overhead (and is thus not prefered either).
If your pdf is located on your Google Drive, you can embed it with the preview link:
<iframe src="https://drive.google.com/file/d/XXX/preview"></iframe>
Whereby XXX is to be replaced with the file id.
Make sure to share the pdf as Anyone on the Internet with this link can view.

Chrome not recognising attachment filename

We have a web application which offers a file named L_2804071.key for download. The download works fine in Internet Explorer and FireFox but in Chrome it "loses" the filename and chrome does not seem to recognize the filename in the content-disposition header.
Here is the full header (identical in both browsers):
content-disposition: attachment; =?utf-16le?B?ZmlsZW5hbWU9TF8yODA0MDcxLmtleQ==?=
I don't know if this helps but if you decode =?utf-16le?B?ZmlsZW5hbWU9TF8yODA0MDcxLmtleQ==?= you get Wfilename=L_2804071.key which looks weird. Not sure where the "W" comes from but IE seems to work with it and downloads a file named L_2804071.key.
Fix the web application to return a Content-Disposition header field that follows the spec, your example is invalid (for starters, there's no "filename" parameter). Note that your example appears to use RFC2047-style encoding, which in general isn't used in Content-Disposition.
See http://greenbytes.de/tech/webdav/rfc6266.html for details.

chrome packaged app image access

I am having trouble accessing images in the chrome packaged app. These images are stored locally. Code works fine in the browser.
following image tag
<img ng-src="pics/{{employee.pic}}">
I am using angularjs.
Thanks,
Niranjan
See:
https://developer.chrome.com/apps/app_external#external
What you have to do is fetch the binary contents of the image with XMLHttpRequest as a blob, then convert that blob to an object URL, and that's the URL you set as the src attribute of the img. It's easier than it sounds, and the cited web page gives you the code.

Preventing secure/insecure errors by using protocol relative URLs for image source

Is anyone aware of whether it is problematic to use protocol relative URLs for an image source to prevent mixed content security warnings.
For example linking an image like:
<img src="//domain.com/img.jpg" />
instead of:
<img src="http://domain.com/img.jpg" />
or
<img src="https//domain.com/img.jpg" />
In my testing i've not seen anything to suggest this is wrong but i'm not sure if it has edge cases where it will create problems.
EDIT i've seen it throw errors when using PHP's getimagesize function.
Found an interesting gotcha for the use of protocol relative URLs:
You have to be careful to only use
this syntax in pages destined for
browsers. If you put it in an email,
there will be no base page URL to use
in resolving the relative URL. In
Outlook at least, this URL will be
interpreted as a Windows network file,
not what you intended.
from here
Essentially though there are no valid reasons why this shouldn't work as long as the request is made by a browser and not an external email client.
more info from here:
A relative URL without a scheme (http:
or https:) is valid, per RTF 3986:
Section 4.2. If a client chokes on it,
then it's the client's fault because
they're not complying with the URI
syntax specified in the RFC.
Your example is valid and should work.
I've used that relative URL method
myself on heavily trafficked sites and
have had zero complaints. Also, we
test our sites in Firefox, Safari,
IE6, IE7 and Opera. These browsers all
understand that URL format
IE 7 and IE 8 will download stylesheets twice if you're using a protocol-relative URL. That won't affect you if you only use it "for an image source", but just in case.
The following should be considered when using Protocol-Relative URLs:
1) All modern browsers support this feature.
2) We have to be sure that the requested resource is accessible over both HTTP and HTTPS. If HTTP redirects to HTTPS it is fine, but here the load time will take a little longer than if the request was made directly to the HTTPS.
3) Internet Explorer 6 does not support this feature.
4) Internet Explorer 7 and 8 support the feature, but they will download a stylesheet twice if protocol-relative URLs are used for the css files.

Preventing playing an MP3 file using an HTML anchor

How do you make an MP3 link download instead of play "in-browser"?
I tried changing the target to blank, but that just opened the player in a new window.
You can't do this by modifying the link. You will have to have the HTTP server that serves the file send a Content-Type of "application/octet-stream". Presumably it is sending the type "audio/mpeg", which is hinting to the browser that it is MP3 content. Without the capacity to alter this header, you can't achieve this.
If your server supports PHP, create a PHP script called "getfile.php" (or similar) that takes a parameter of a file ID or file name. Set the content-type and content-disposition headers within the script to force a download prompt.
See: http://webdesign.about.com/od/php/ht/force_download.htm
Lots of solutions here. Here's the basic idea:
Use Javascript to make a (ajax) request to the server
When the request is received, run a script
This script redirects your browser temporarily to a new page
The new page has a few headers telling your browser to expect a file attachment, and what kind of attachment it is
The "save as" dialog pops up and your original page is still onscreen
I could be wrong, but I've seen people with the same problem before just with other file types, they used the code below:
<FilesMatch "\.(?i:mp3)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
Hope this works for you!
For quite some time (Chrome 14+, Firefox 20+, Edge 44+) it is possible to use the download attribute on same-origin links to force download behavior even when the server doesn't supply a Content-Disposition header on the link target.
Without access to the server generating the HTTP responses, the browser gets to decide what to do with different types of responses. usually the only files a browser will download are things like .zip files which it cannot display.