How to Add a Company Logo on the GlobalProtect Portal Login Page

Printer Friendly Page

Overview

This document explains how to modify the predefined GlobalProtect Portal Login Page to add a company logo.

 

Steps

  1. Navigate to Device > Response pages. Click GlobalProtect Portal Login Page.
  2. Export the Predefined page.

i1.PNG.png

   3. Modify the HTML code by adding the company logo as shown below. The code in italic type shows the URL where the image is located.

 

<HTML>

<HEAD>

<TITLE>Palo Alto Networks - GlobalProtect Portal</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="/styles/falcon_content.css?v=@@version">

<img src="http://cdn.slidesharecdn.com/profile-photo-Palo_Alto_Networks-96x96.jpg?1382722588"/>

<style>

td {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  font-weight: bold;

  color: black; /*#FFFFFF; */

}

.msg {

    background-color: #ffff99;

    border-width: 2px;

    border-color: #ff0000;

    border-style: solid;

    padding-left: 20px;

    padding-right: 20px;

    max-height: 150px;

    height: expression( this.scrollHeight > 150 ? "150px" : "auto" ); /* sets max-height for IE */

    overflow: auto;

}

.alert {font-weight: bold;color: red;}

</style>

</HEAD>

<BODY bgcolor="#F2F6FA">

  <table style="background-color: white; width:100%; height:45px; border-bottom: 2px solid #888888;">

  <tr style="background-image:url(/images/logo_pan_158.gif); background-repeat: no-repeat">

  <td align="left"> </td>

  </tr>

  </table>

  <div align="center">

  <h1>Palo Alto Networks - GlobalProtect Portal</h1>

  </div>

  <div id="formdiv">

<pan_form/>

</div>

</BODY>

</HTML>

 

   4. Import the modified response page by navigating to Device > Response Pages > Global Protect Portal Login Page.
Untitled.png

5. Go to Network > GlobalProtect > Portals.   On the General Tab choose the Custom Login Page or import the modified page directly from here.

 

2017-11-22_14-46-46.png

 

 

 

 

6. The GlobalProtect Portal Login page with the custom logo is displayed as shown below.

 

i5.PNG.png


Note: Ensure that the image source URL in the HTML code is hosted from a server that is accessible to the remote GlobalProtect users. See also: Customizing Response Pages

 

owner: gchandrasekaran

Comments

Why wouldnt the graphic be uploaded to the device and not depend on another site?

 

Another addition needed to the login page would be a disclaimer like:

 

This system is a restricted information system for the use of authorized personnel only.
All authorized and unauthorized use of this system may be monitored or recorded, and is subject to audit.
Your use of this system indicates your consent to such monitoring and recording.

Unauthorized use of this system or the network is strictly prohibited and may be subject to criminal and/or civil penalties.

 

 

In order to do this, you would need to allow Meta headers to allow for images to be pulled from other domains.  Default content security policies in modern browsers prevents these images from loading.  Even if you try to encode them in Base64, it still does not work without ability to modify the javascript

I am trying to add disclaimer and also option to accept or reject the end user agreement. If rejected by the user, glonal protect login terminates and if accepted, it proceeds to the welcome page.

 

Is this possible at all?

hi @jkansal

 

Are you meaning to use clientless VPN?

In regular GlobalProtect, the actual VPN is established through a client software that does not have a welcome page

Hi,

PAN200 and PANOS 8.0.6.

I have imported a new global-protect-portal-custom-login-page with a url https://.../company-logo.jpg in var "logo" on the script

var logo = ''; // URL to the company logo

but on the portal doesn't appear. It appears PaloAlto Networks logo.

Can anyone help me ?

Thanks

 

Hi,

I upgraded to PANOS release 8.0.12, but the problem is the same...

I believe it is actually the browser that is not allowing it, rather than the Palo Alto due to https://en.wikipedia.org/wiki/Content_Security_Policy.  If you use your browser developer tools (F12 in Chrome,) you can confirm this.  However, if the PAN allowed the image to be hosted on the firewall (like they do for login to firewall itself icons,) I believe it would work.  That would be a new feature though, not something 'broken' per se.

Hi,

this is the output of the browser console. The image logo is not loaded caused by

page setting.

 

 

 

Browser_Console_e_GlobalProtect_Portal.png

Yes, that is your browser refusing to load the image due to Content Security Policy.