Multiple browsers, including Chrome for desktop, Chrome for Android, Firefox, and Microsoft Edge, have updated, and will likely continue to update, their security settings to make websites safer. Some of the settings that have been rolled out in recent years, including changing the default HTTP Referrer-Policy to the more secure strict-origin-when-cross-origin setting, are negatively impacting certain legacy web design and development patterns, in particular the practice of including third-party content or services on your website using an iframe.
Without diving too deep into the technical challenges, the key issue with these changes is that they cause functionality that is dependent upon cookies and trust to become disabled. For certain static content like iframing an article, this is not that big of a deal and the worst thing you have to worry about is your google analytics cookie tracking being disabled. However, for move complex applications like an advocacy take action page or a donation form with complex business functionality, including layers of dependencies on other third-parties like Paypal’s API, disabling core functionality like cookies can cause devastating effects and can even cost you money.
The good news is that most application providers and web developers have been moving away from using iframes as a mainstream web design pattern for years already for other reasons, not the least of which is a poor user experience. So considering it a best practice not to use iframes is not only something that will save you from headaches but it will also align your design decisions with industry best practices to give your donors and constituents a better online experience.
Addressing the IFrame Incompatibilities with Donation Forms and Fundraising Apps Presented by Browser Changes
Let’s dive into solutions if you are currently using an iframe or considering it and realizing that it is not recommended for your online forms, auctions, advocacy pages, or other CharityEngine fundraising functionality.
Solution 1: Don’t use an iframe
These days, especially for an embedded signing ceremony, iframes are rarely needed: they provide an inferior trust user experience and there are so many alternatives. In fact, CharityEngine has been at the leading edge of providing robust APIs to allow you to natively embed your donation forms on your website for years. Check out our embeddable donation form widget and our web API as an alternative method if you feel that having your donors stay on your website is important.
Solution 2: Redirect the Browser
Solution 3: Use a Vanity Domain
This option is deliberately listed as number 3 because there are a few risks with this options that we will note below. However, CharityEngine has enterprise capabilities that allow you to set up your own domain name with fully validated SSL certificates to fully customize your donor experience on your donation forms and other engagement apps. This functionality does cost a little extra because there is some setup and maintenance involved, but it is a good choice to consider if you are investing a lot in your fundraising because it can increase trust with online visitors to your donation form, event registration form, auction, advocacy and other applications. This trust can result in higher conversion rates and more fundraising revenue. Using vanity domains is a great choice regardless of whether you are trying to work around browser security issues with iframes. However, it can also eliminate some of the iframe security incompatibilities because if you use a vanity domain name to include your donation form or app within your website and your website’s domain name matches the vanity domain, most browser have a high level of trust and allow baseline functionality like cookies.
WARNING: as previously noted, we still do not recommend iframing as an approach even though this should work because we cannot control or guarantee what the Browser providers will do in the future and they could implement changes anytime that could break certain CharityEngine functionality and cause your donation forms, online auctions, advocacy action pages or other constituent facing functionality to break.
CharityEngine remains on the forefront of online fundraising and engagement applications and give you simple solutions for custom branding or complete control to customize your donor and constituent experience when using our online fundraising apps like donation forms, online auctions, event registration forms and advocacy action pages. We strongly advise against using iframes to include this functionality on your website because recent browser security changes have disabled baseline functionality like cookies that cause our apps and many other providers’ apps to break when included in an iframe. Web design and user experience best practices have been moving away from iframes for years and this change by the major browser providers only further reinforces that this is a legacy design construct that will likely not be used at all in the future.