« Back to Portlets

Iframe Portlet

The Iframe portlet makes it possible to embed another HTML page inside the current page. Furthermore the user can navigate through the embedded page without loosing the context of the portal page.

The Iframe portlet uses the HTML iframe tag that is part of HTML 4 and is supported in all major browsers. The iframe portlet will adjust to the size of the HTML page if that page is hosted in the same server. The browser will add scrollbars if the embedded page does not fit within the size of the iframe.

Basic functionalities #

Embedding remote web sites #

To show the basic functionality add an iframe portlet to any page of the portal that you can administer. Then click the configure button.

You'll see a form with a handful of options, for now just look at the Source URL field and write in it:

 http://www.google.com

Go back to the full page and you'll be able to see the google search box inside your portlet. You can even do a search and have the search displayed within your portlet.

Embedding portal pages #

Controlling the attributes of the iframe window #

You can control the size, look and other attributes of the iframe using the HTML attributes field. This field is formed by a text area that can contain one attribute value per line of the form:

 attribute-name=attribute-value

The supported attributes are:

  • border
  • bordercolor
  • frameborder
  • heightMaximized
  • heightNormal
  • hspace
  • scrolling
  • vspace
  • width

Note: The size of the iframe portlet will automatically adjust to the size of the HTML page displayed if this page is in the same server. However, if you set the attributes width or height it won't automatically resize.

Add parameters dynamically #

Any parameter can be passed to the iframe page from the URL of the page in which you have placed the iframe portlet. These parameters will follow the pattern: {portlet namespace}iframe_{parameter name}={parameter value}. It is also mandatory to include the p_p_id parameter to make this work.

For example, this would be a valid url with a parameter called "example1", with the value "value1":

http://localhost:8080/web/guest/home?p_p_id=48_INSTANCE_1Kv8&_48_INSTANCE_1Kv8_iframe_example1=value1

Change the URL dynamically #

The Page the iframe is displaying can be also changed from the URL using the anchor element. For example, if we have an iframe in the home page, this URL would use the iframe to display Google:

http://localhost:8585/web/guest/home#http://www.google.com

Note: This url will be displayed in all the iframes we have in a page. Note: The url after the # will only be displayed after the page reloads. Links with this syntax will need to somehow force the page to reload.

Authentication #

If the embedded web page requires authentication the iframe portlet can be configured to provide authentication information. This section describes the different options offered to the user.

Basic vs form based authentication #

There are several way to provide the authentication information to the embedded page. The iframe portlet supports two of them:

  • Basic authentication: This method is described in the HTTP specification. The user name and passwords are usually provided as HTTP headers but it's also possible to embed them in the URL with the syntax http://username:password@www.myurl.com This method is simple but it's not supported in many websites.
  • Form authentication: Is the name given to websites that authenticate the user by making him fill in a form with his user name and password. It's the one used in most web sites. There are two variants of this: GET and POST. The first one sets the username and password in the URL and the second one in the body of the request. Usually they make little difference and both will probably work with any website.

Security note: Be aware that none of these methods are secure unless they are sent through an HTTPS connection. If you want to make sure that the user and password information cannot be seen by third parties only use authentication with sites that support HTTPS and use only URLs in the iframe that start with https:// Also if you use Basic authentication you'll have to use HTTPS to communicate with the Liferay portal because the user name and passwords will be included in the HTML of the page served to the user.

Automatic vs configured user name and password #

Liferay provides two ways to retrieve the user name and passwords that will be used to authenticate against the embedded web page:

  • Automatic: The user name and password of the current user that is viewing the page with the iframe portlet will be used. It's only supported by the 'basic authentication' method described in the previous section.
  • Configured: The administrator will configure a user name and password and they will be used for all users.

To use the automatic way just leave the 'user name' and 'passwords' fields blank. Otherwise fill them with the values that will be used for authentication

Note that the value of those fields is different depending on the type of authentication used:

  • Basic: just write the username and passwords as they are
  • Form: prefix the user name and password with the names of the fields for them in the form. For example:

User name: userName=myusername Password: userPass=mypassword

Hidden variables #

When using form based authentication, the iframe portlet allows the administrator to configure a set of additional parameters that will be sent with the form. This parameters must be set in the 'Hidden Variables field and its format must be:

 xxxx=blah;abc=formSubmit1

See an example below (By Ryan):

How to manually find out the authentication type supported by the web page to be embedded #

Sometimes we don't know what type of authentication is supported by the application that will go inside the iframe. If we don't want to, or cannot afford to try out different configurations through the portal we can find out following this process.

Preparation #

To follow the following example create an account here, if you don't have one already:

http://www.rsscalendar.com/rss/login.asp

For this example, I'm going to use username "liferay" and the password "test".

Basic Authentication #

First we'll try form based auth.

1) Open a browser and write the following URL with valid user and passwords:

  http://myuser:mypassword@www.rsscalendar.com/rss/login.asp

2) Now that you know this works, use the same information in the IFrame portlet. Source URL: http://www.rsscalendar.com/rss/login.asp Authentication Type: Basic Form Method: User Name: liferay Password: test

Form based Authentication #

1) Create a file called form-auth.html on your desktop.

2) Input the following code into form-auth.html:

 <form action="http://www.rsscalendar.com/rss/login.asp" method="post">
  User name: 
  <input name="UserName" type="text" value="">
  Password: 
  <input name="UserPassword" type="text" value="">
  <input type="submit">
 </form>

I got "UserName" and "UserPassword" from viewing source on http://www.rsscalendar.com/rss/login.asp. I also found out that the form was using method "post" and input type "submit" by viewing source.

3) Open up logintest.html, type in your new usename and password you just created. Hit Submit. You should now be logged in to rsscalendar.

4) Now that you know this works, use the same information in the IFrame portlet. Source URL: http://www.rsscalendar.com/rss/login.asp Authentication Type: Form Form Method: Post User Name: UserName=liferay Password: UserPassword=test

Notice that I put UserName=liferay instead of just 'liferay'. The reason for this is so the Iframe portlet knows what input names to use when it creates the form to submit.

How does it work? #

When form based authentication is not used, the iframe portlet works in a very simple way. It just takes the configured URL and adds the authentication parameters if they were set.

When form based authentication is used, what the IFrame authentication does is make a first (hidden) request to a portal page that recreates a form and then submits it to the configured URL. To learn the details of this form take a look at the following file from Liferay's sources:

 portal-web/docroot//html/portlet/iframe/proxy.jsp

Troubleshooting #

The web site takes the whole browser window instead of just the iframe #

Some web sites have a security measure to avoid being inserted in frames or iframes. The use JavaScript to detect that they are in that situation and reload the page to use the whole browser window.

If that's your case you should not use that web site in an iframe unless you've got authorization from them. Once you get it, ask them for a URL that does work inside an iframe

Authentication does not work #

Try authenticating manually using the process described in a previous section. Use the same user and password that the iframe portlet is using.

To find out which user and password the iframe portlet is using check:

  • Basic authentication: look at the HTML source code of the page with the portlet and check the SRC attribute of the IFRAME tag.
  • Form authentication: Switch the configuration to basic auth and follow the above procedure. Then set the configuration back to Form authentication.

Basic Authentication in iexplorer does not work #

Corné|Corné 12:27, 13 May 2008 (PDT) Since IE 7 this is default behaviour; http://support.microsoft.com/kb/834489 Setting the header with Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== would be a better solution something like;

 <% 
 String userName = StringPool.BLANK;
 String passWord = StringPool.BLANK;
 for (int i = 0; i < hiddenVariablesArray.length; i++) {
 	String hiddenValue = StringPool.BLANK;
 	int pos = hiddenVariablesArray[i].indexOf(StringPool.EQUAL);
  
 	 if (pos != -1) {
 		hiddenValue = hiddenVariablesArray[i].substring(pos + 1, hiddenVariablesArray[i].length());
 		if(i==0)
 			userName = hiddenValue;
  		if(i==1)
 			passWord = hiddenValue;
 	}
 }
 
 response.setHeader("Authorization", "Basic "+com.liferay.portal.kernel.util.Base64.encode( new String(userName+":"+passWord).getBytes()));
 response.sendRedirect(src); 
 response.flushBuffer();
 %>

Maybe is your navigator who does not permit basic authentication, to find out if it does, look at Windows registry for

HKEY_LOCALMACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_HTTP_USERNAME_PASSWORD_DISABLE\iexplore.exe HKEY_LOCALMACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_HTTP_USERNAME_PASSWORD_DISABLE\explore.exe

HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_HTTP_USERNAME_PASSWORD_DISABLE\iexplore.exe HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_HTTP_USERNAME_PASSWORD_DISABLE\explore.exe

they should exist and have a REG_DWORD value of 0x00000000(0), if not, create or change their values to permit links in the form of http://user:password@www.domain.com

You can also try first with the Firefox browser that has this feature enabled by default.

An IFrame will hide the main navigation in Internet Explorer #

This is a limitation of the Internet Explorer. The solution is to add another IFrame behind every element of the drop down menu of the navigation. A detailed description of the bug and the solution steps is located on JIRA.

1 Attachment
157580 Views
Average (4 Votes)
The average rating is 4.0 stars out of 5.
Comments
Threaded Replies Author Date
i tried iframe portlet to include some php... sky tb December 22, 2008 2:49 AM
This works like a champ! Note that if you... Kevin Haas March 16, 2009 4:23 PM
Hi I have tried your solution , But when I add... Ahmed JEMAI September 30, 2009 8:16 AM
[quote] Change the URL dynamically The Page the... Daniel D. Barciela April 16, 2009 4:23 AM
I tried also to change the url dynamically... Luca Casavola April 20, 2009 2:38 AM
Through experiments, I found that the anchor... Tim McGuire March 5, 2010 12:39 PM
Note: sending credentials over GET is somewhat... Jason E Shao June 25, 2009 7:21 PM
You may want to include a picture as I did... Ryan Terwedo August 11, 2009 11:15 PM
I realized I can edit this wiki and have... Ryan Terwedo August 11, 2009 11:24 PM
This is a very good Wiki article. Thank you,... Jonas Yuan August 12, 2009 10:07 AM
In liferay 5.2.3 the iframe resizes itself to... Gunnar Velle September 3, 2009 4:03 AM
How to open web content maximized in web... Rajeev K May 20, 2010 2:44 AM
Is it true that in Liferay 6 the default... Jeroen Braan July 30, 2010 11:58 AM
Yes, as a matter of fact we couldn't... Pablo Fortunatti October 21, 2010 3:01 PM
Is it possible to add more tokens for example... RJ Aquino March 11, 2011 7:16 AM
This would fix my issues Active Directory ID... Scott Steven April 4, 2011 12:47 AM
Has anyone figured out yet how to add more... Marc Piparo August 11, 2011 3:50 AM
Is it possible to embed iframes inside an... A J November 27, 2011 10:24 PM
I am trying for the life of me to get the... Chris Chiappone December 29, 2010 10:29 AM
Is there a way to handle the logout of a user... Chad Allen January 19, 2011 10:59 AM
¿I can include a portlets within an iframe and... Pablo Antonio Zamora Ortiz February 16, 2012 1:18 AM
Is it possible to modify look and feel of... Umer Hayat June 26, 2012 10:47 PM
In liferay 6.1 I added the iFrame that is under... sanat behera November 6, 2012 4:37 AM
I think 6.1.1 iframe has a firefox bug. Try... Achmed Tyrannus Albab August 23, 2013 12:07 AM
Hi, I am trying to add an iFrame to a portlet,... Ilove Liferay December 25, 2013 7:57 PM
Changing the URL dynamically using the... c s April 4, 2014 2:27 PM
How to do Form based authentication in iframe... Prasanth Kumar Raghupatruni June 6, 2014 12:55 PM

i tried iframe portlet to include some php applications. after search the forum and wiki. i got the final result:

1. iframe use user-id number for authentication by default. in most case we want screen name for user login name. modify liferay-portlet.xml, find iframe section, and add "<user-principal-strategy>screenName</user-principal-strategy>" to it.

2. use 1 column template to get the max width, and use "heightNormal " and "heightMaximized " html attribute to get the desired portlet height.

3. iframe auto authentication only works in basic type, not in form type, which is not useful. i modify proxy.jsp, so auto authentication can work with form type. set up the desired form type like below:

User Name: FormUserName=
Password: FromUserPassword=

the empty field will be completed by patch below:
(i know little about java, so please correct it if it is not good):

@@ -65,6 +65,10 @@
if (pos != -1) {
userNameKey = userName.substring(0, pos);
userNameValue = userName.substring(pos + 1, userName.length());
+ if (userNameValue.length() == 0){
+ userNameValue = renderRequest.getRemoteUser();
+ }
+
}
%>

@@ -78,6 +82,9 @@
if (pos != -1) {
passwordKey = password.substring(0, pos);
passwordValue = password.substring(pos + 1, password.length());
+ if (passwordValue.length() == 0){
+ passwordValue = PortalUtil.getUserPassword(renderRequest);
+ }
}
%>
Posted on 12/22/08 2:49 AM.
This works like a champ! Note that if you wanted to user the screen name as the login, for the user name section, an alternative to the code would read like this:

if (userNameValue.length() == 0){
userNameValue = PortalUtil.getUser(renderRequest).getScreenName();
}

Then you don't have to change the user-principal-strategy if you don't want to.
Posted on 3/16/09 4:23 PM in reply to sky tb.

Change the URL dynamically
The Page the iframe is displaying can be also changed from the URL using the anchor element. For example, if we have an iframe in the home page, this URL would use the iframe to display Google: [http://localhost:8585/web/guest/home#http://www.google.com]

Note: This url will be displayed in all the iframes we have in a page.


Is this about the Sample>IFrame Portlet from Liferay 5.2.2? I can't change the url dynamically. When I add #http://www.google.pt to the url nothing happens
Posted on 4/16/09 4:23 AM.
I tried also to change the url dynamically with the anchor with no success. Please can you give a working example?
Posted on 4/20/09 2:38 AM in reply to Daniel D. Barciela.
Note: sending credentials over GET is somewhat problematical as they'll often end up in server logs, browser history (less of a problem over HTTPS as far as disk caching, but often not history logs), etc. POST is strongly preferred
Posted on 6/25/09 7:21 PM.
You may want to include a picture as I did explaining. I have one I attached here:

http://www.liferay.com/web/guest/community/forums/-/message_boards/message/­3775613

=)

Happy Authenticating!!

Ryan
Posted on 8/11/09 11:15 PM.
I realized I can edit this wiki and have attached it in the article above.
Posted on 8/11/09 11:24 PM in reply to Ryan Terwedo.
This is a very good Wiki article. Thank you, Corné.
Posted on 8/12/09 10:07 AM.
In liferay 5.2.3 the iframe resizes itself to fit within the window. Even if I set both height and width. I would like it to stay the size I specified.

Have anyone got any tips?
Posted on 9/3/09 4:03 AM.
Hi I have tried your solution , But when I add this to Liferay 5.2.3 "<user-principal-strategy>screenName</user-principal-strategy>"
I got a problem on Liferay portlet permission , it is so strange , I also got this error in the Log
13:52:09,646 WARN [PortletRequestProcessor:471] The struts path calendar does not belong to portlet 8. Check the definition in liferay-portlet.xml
13:52:09,650 WARN [PortletRequestProcessor:507]
13:52:09,754 WARN [PortletRequestProcessor:471] The struts path announcements does not belong to portlet 84. Check the definition in liferay-portlet.xml
13:52:09,763 WARN [PortletRequestProcessor:507]
13:52:09,859 WARN [PortletRequestProcessor:471] The struts path site_map does not belong to portlet 85_INSTANCE_hWA5. Check the definition in liferay-portlet.xml
13:52:09,862 WARN [PortletRequestProcessor:507]
13:52:10,119 INFO [PluginPackageUtil:1347] Checking for available updates
13:52:11,603 INFO [PluginPackageUtil:1391] Finished checking for available updates in 1478 ms
13:52:14,526 WARN [PortletRequestProcessor:471] The struts path iframe does not belong to portlet 48_INSTANCE_O8b4. Check the definition in liferay-portlet.xml
Posted on 9/30/09 8:16 AM in reply to sky tb.
Through experiments, I found that the anchor syntax works after the page is reloaded. Add #http://www.google.com to the url and then refresh the page.
Doing this from a link on the same page as the iframe portlet won't work unless something in the URL itself changes. I first tried a links with
/web/guest/dataset-queries#http://www.google.com
and
/web/guest/dataset-querie­s?#http://www.yahoo.com

and these did not work because it didn't force a page refresh. however,
/web/guest/dataset-queries?b=12345#http://www.google.com
and
/web/guest/da­taset-queries?b=999988#http://www.yahoo.com

worked because the bogus parameters represent a URL change.

I have not yet tried cache settings and actionURLs.
Posted on 3/5/10 12:39 PM in reply to Luca Casavola.
How to open web content maximized in web content display?

I am doing something like --
Portal portal = PortalUtil.getPortal();
viewURL = portal.getLayoutURL(themeDisplay) + "/-/journal_content/56/" + articleResource.getGroupId() + "/" + articleResource.getArticleId();

This works fine but not in an Iframe. How to make it working in an IFrame?
Posted on 5/20/10 2:44 AM.
Is it true that in Liferay 6 the default behaviour is not to share the user password between the portal and portlets and that this is also a problem for the iframe portlet?

These settings seem to be new in portal.properties:
session.shared.attributes.excludes=USER_PASSWORD
session.store.­password=false
Posted on 7/30/10 11:58 AM.
Yes, as a matter of fact we couldn't access/login to our iframe application until we changed session.store.password to true.
We are using @screen_name@ and @password@ in version 6.
Posted on 10/21/10 3:01 PM in reply to Jeroen Braan.
I am trying for the life of me to get the dynamic parameters to work in my portal. I have a portlet with a link that looks like this:

<a href="http://localhost:8080/web/guest/home?p_p_id=48<portlet:namespace />_projectId=<%= proj.getProjectKey() %>"><%= proj.getName() %></a>

And I also have an iFrame portlet that should just print the projectId parameter that is passed in. I cannot seem to get this to work. What am I doing wrong?

thanks.
Posted on 12/29/10 10:29 AM.
Is there a way to handle the logout of a user from the portal, such that the user's session running in the IFrame application can also be logged out. I have a logout URL for the app that is in the IFrame but I don't really have a good way to call it. Any thoughts on this?
Posted on 1/19/11 10:59 AM.
Is it possible to add more tokens for example from a custom field?
Posted on 3/11/11 7:16 AM in reply to Pablo Fortunatti.
This would fix my issues Active Directory ID numbers. I am currently looking through the iFrame files to see how it gathers these tokens.
Posted on 4/4/11 12:47 AM in reply to RJ Aquino.
Has anyone figured out yet how to add more tokens (i.e. from user custom fields)?
Posted on 8/11/11 3:50 AM in reply to Scott Steven.
Is it possible to embed iframes inside an iframe in liferay?
Posted on 11/27/11 10:24 PM in reply to Marc Piparo.
¿I can include a portlets within an iframe and not a page?
Posted on 2/16/12 1:18 AM.
Is it possible to modify look and feel of content of third party application displayed using Iframe portlet, using javascript or anything else?
Posted on 6/26/12 10:47 PM.
In liferay 6.1 I added the iFrame that is under the sample category to the page. In configuration added www.google.com

But google page is not loading. Am I missing anything? Please help
Posted on 11/6/12 4:37 AM.
I think 6.1.1 iframe has a firefox bug.

Try sourcing the iframe to a file as follows: /sample.jsp?name=sam&lastname=wise
or fill in accordingly. It loads fine the first time around.
Try refreshing, the iframe content no longer loads.
Liferay tends to repeat and add the last parameter to the url...which in some cases the jsp will fail to display.

If it is a bug, i am not sure how to report it.
Wish someone could update me if this is not a bug or it has been fixed.

Peace YAW.
Posted on 8/23/13 12:07 AM.
Hi,

I am trying to add an iFrame to a portlet, but I need to pass the user roles that the Liferay user has to the page that I am embedding with the iFrame. Is there a way to do this?

Thank you!
Posted on 12/25/13 7:57 PM.
Changing the URL dynamically using the following example is not working for me either. I am using Liferay 6.2. Any thoughts on how to get that accomplished?

http://localhost:8585/web/guest/home#http://www.google.com

I have even added unique characters at the end of the URL to have it reload, but it is not working. Any thoughts?

Thanks in advance.
Posted on 4/4/14 2:27 PM.
How to do Form based authentication in iframe in view.jsp. I have a form which is submitted while page loading but how can i link this to iframe tag..?

<body onLoad="setTimeout('document.fm.submit()', 100);">
<form action="<%= HtmlUtil.escapeAttribute("") %>" method="post" name="fm">
<input name="<%= HtmlUtil.escapeAttribute("") %>" type="hidden" value="<%= HtmlUtil.escapeAttribute(userName) %>" />
<input name="<%= HtmlUtil.escapeAttribute("") %>" type="hidden" value="<%= HtmlUtil.escapeAttribute(password) %>" />
</form>
</body>
Posted on 6/6/14 12:55 PM.