iframe downloads the html source instead of displaying it

Question

I am trying to embed an html file in a page.

I use the following code:

<iframe src="{{resource.previewUrl}}" allowfullscreen webkitallowfullscreen mozallowfullscreen height="700" width="100%" frameborder="0" marginheight="0" marginwidth="0" ></iframe>

The source I get through angular is the address to the index.html file which is in Azure blob storage:

_sc.resource.previewUrl = $sce.trustAsResourceUrl("http://portalxxxxxxx.blob.core.windows.net/path/to/index.html");

When I open the page, it downloads the index.html file to my computer instead of displaying it. How can I force it to display?

Answer 1

The problem is because of the content-type property of the blob. If content-type property of a blob is not set explicitly, Azure Blob storage assigns application/octet-stream.

In your case because you're not setting this property, even for your HTML files, the content type is set as default value i.e. application/octet-stream. Because the browser (especially Chrome) does not understand how to deal with this content type, it downloads it instead of rendering it.

Changing the content type of the blob to text/html should fix the problem.