Episerver Forms Triggers "Only Secure Content Is Displayed" Popup

  • Updated

The article describes an issue with a popup that appears on some browsers when using Episerver Forms with an address element.

The address element uses Google API to suggest addresses when a user is typing and it automatically fills address components and displays a map when an address is entered. The "Only Secure Content Is Displayed" Popup may display if the site is configured to server pages over HTTPS because the address field may reference HTTP in it's validation request.

onlysecurepopup.png

The "address" form element is included in the "Episerver.Forms.Samples" pack. This is open source, however this is hosted under Episerver’s own GitHub profile, packaged on Episerver’s Nuget package feed, and Episerver are tracking changes to it in the release notes.

This is not an official Episerver package so there is no additional documentation but there is additional information on how to resolve this issue below.

To get the address element working properly, you have to specify the Google API uri:
https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_GOOGLE_MAP_API_KEY&language=YOUR_PREFER_LANGUAGE

Google map API now requires an API_KEY to work, so the API: http://maps.google.com/maps/api/js?v=3.1&sensor=false is no longer working
(see https://developers.google.com/maps/documentation/javascript/get-api-key).
Some notes:

Address can contains many components (city, street, state, post code..). There are times an address is suggested from Google API but fails when validating by the API.

  • You can delete some address components and try submit again.
  • As a developer, you can implement a custom address validate by implementing interface IAddressValidateService:
public interface IAddressValidateService
{
	bool Validate(string address, string street, string city, string state, string postalCode, string country, bool ignoreDetail);
}

For additional samples please see here.