Html Code as Iframe Source Rather Than a Url

Html code as IFRAME source rather than a URL

You can do this with a data URL. This includes the entire document in a single string of HTML. For example, the following HTML:

<html><body>foo</body></html>

can be encoded as this:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

and then set as the src attribute of the iframe. Example.

Edit: The other alternative is to do this with Javascript. This is almost certainly the technique I'd choose. You can't guarantee how long a data URL the browser will accept. The Javascript technique would look something like this:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

Example

Edit 2 (December 2017): use the Html5's srcdoc attribute, just like in Saurabh Chandra Patel's answer, who now should be the accepted answer! If you can detect IE/Edge efficiently, a tip is to use srcdoc-polyfill library only for them and the "pure" srcdoc attribute in all non-IE/Edge browsers (check caniuse.com to be sure).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

HTML frame SRC-attribute - use html-code instead of URL

maybe you could inject HTML into the iFrame/Frame like described in this article:Injecting HTML into an IFrame by Michael Mahemoff.

Something like this:

var content = "<html><body><b>Hello World!</b></body></html>";

var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);

var frameDoc = iframe.document;
    if(iframe.contentWindow)
        frameDoc = iframe.contentWindow.document; // IE
    // Write into iframe
    frameDoc.open();
    frameDoc.writeln(content);
    frameDoc.close();

HTH,

--hennson

Loading a string if HTML into an iframe using JavaScript

You can do it with

document.getElementById('iframe').src = "data:text/html;charset=utf-8," + escape(html);

See the following fiddle for an example

https://jsfiddle.net/erk1e3fg/

Using iframe for rendering user provided html code

Can I make the origin of the iframe null? Or will I have to host my content on a separate domain so that SOP blocks all the network calls to the parent page?

You can make the origin of the iframe null if you'll use, for instance, a data:-Url. This will prevent cross-origin requests in modern browsers, but Content Security Policy of parent document will be inherited into iframe in all browsers.

In this case some old browsers (Firefox/WinXP) will spread CSP from the iframe to parent document too.

Will I be able to set up CSP for the iframe separately? If yes, can anyone suggest what all attributes the CSP should have?

You are able to set separate CSP for iframe only if it's loaded via network scheme (http:/https:) - it will be created isolated browsing context. If non-network schemes (data:, blob:, etc) iframe will inherit CSP of parent document.

In case of isolated browsing context you can use any "attributes the CSP" what you need for your specific case.

Pay attention to csp=, sandbox= attributes, these can be useful.

Can I take the input html and inject it directly to my iframe from the parent page?

This is contravert your statement: "I want to restrict any communication between the iframe content and the parent domain.".

Therefore all communications are possible via server only.

If there are other alternatives which don't use iframe, which are those?

Isolated browsing contexts can be created via <object>/<embed>, but these are not useful in your case.

Load an HTTPS URL by iframe in html page

Sounds like you have a Content Security Policy defined for your app.
You need to add frame-src: https://www.google.com to the CSP header to allow iframes with that domain.
Since you have not defined a frame-src in the header, it is falling back to default-src, which doesn't specify the domain either, so it gets blocked.

Why can't I embed a specific URL in an iframe?

By default iframe show in smaller size but if you set the height width it will show your content You can try this:

<html>
<head>
<style>
iframe {
    position:absolute;
    top:0;
    left:0;
    width:80%;
    height:80%;
}
</style>
</head>
<body>
    <iframe src="https://time.my-masjid.com/timingscreen/7695401e-d724-4adb-a188-ed33c2ce886e"></iframe>
</body>
</html>

Html Code as Iframe Source Rather Than a Url