OneSpan Sign Developer: Third Party Cookie and Reverse Proxy

When embedding Designer Session or a Signing Ceremony in an iFrame, these embedded sessions require third-party cookies enabled on your browser. And if not, you could see errors in the browser console telling you that “X-Frame-Options” are set to “sameorigin”.

In most cases, this issue should be alleviated by enabling third-party cookies in the browser settings. However, there could be some exceptional scenarios that forbid you to do so. For example, it is possible that your company policy does not allow third-party cookies, and the user cannot change this setting on their browser without approval from IT.

This blog will demonstrate a potential solution involving the addition of a revere proxy server. We will briefly explore this solution and provide a quick demo that allows you to test the results at your local development device.

Forward Proxy vs Reverse Proxy (Reference: Quora)

You Will Need:

• A Windows 10 laptop to act as a demo server
• Apache 2 installed on the server. You may simply use the Apache HTTP Server from XAMPP. Read this blog to learn how to install XAMPP.

The following sections are all based on Apache Configuration. For other web servers, such as IIS and Nginx, similar settings will also work.

STEP1: Add Apache Modules

In httpd.conf file, load the three modules below.

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule ssl_module modules/mod_ssl.so

STEP2: Configure Reverse Proxy

	SSLEngine on
	SSLCertificateFile "conf/ssl.crt/server.crt"
	SSLCertificateKeyFile "conf/ssl.key/server.key"

	SSLProxyEngine On
	SSLProxyVerify none 
	SSLProxyCheckPeerCN off
	SSLProxyCheckPeerName off
	SSLProxyCheckPeerExpire off
	ProxyPreserveHost On

	ProxyPass /oss http://localhost:8080/
    ProxyPassReverse /oss http://localhost:8080/

	ProxyPass / https://sandbox.esignlive.com/
    ProxyPassReverse / https://sandbox.esignlive.com/

Because we are working with SSL connections, we need to set the path of certification and server key. A self-signed certification is enough for this demo.

Through this configuration, we have OneSpan Sign service running behind the reverse proxy at root route and exposed our own application (localhost:8080) at route of “/oss”.

STEP3: Prepare Your Own Application

From the settings above, you can see that we will deploy our application at localhost 8080 port and expose this application at “https://localhost/oss”. Simply set XAMPP listening to local 8080 port and directly put a static HTML page named “iframe.html” containing an iFrame under the htdocs folder.

Find the HTML page in this Code Share and replace the iFrame link with your own.

Most importantly, change the domain of link according to your reverse proxy configuration. In our case, it should be “localhost”.

Of course, you can expose your application at different ports and build the application in the way most convenient for you.

STEP4: Test result

After having third-party cookie disabled in your browser, we start Apache Server and navigate to our static HTML page at https://localhost/oss/iframe.html.

This will solve the issue and the page should load properly now. Try it out for yourself, and feel free to make a post on our community for additional support.

If you have any questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the Developer Community Forums. Your feedback matters to us!