Frappe Builder - mixed content can't use https (reverse proxy)

Frappe Framework
1

Greetings,

I’m just getting started with Frappe Builder. Web pages don’t display properly and can generate browser security warnings.

How can we fix metadata in pages that show HTTP when they should use relative links or https?

Here’s a sample:

<!DOCTYPE html>
<html lang="en">
<head>
	<base href="http://mysite.com/pages/contact">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Test Page - Contact</title>
	<link rel="icon" href="/assets/builder/images/frappe_black.png"  media="(prefers-color-scheme: light)"/>
	<link rel="icon" href="/assets/builder/images/frappe_white.png"  media="(prefers-color-scheme: dark)"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="title" content="Contact"><meta name="description" content="Contact"><meta name="image" content="http://mysite.com/files/page-703e846e853e8cbe7862d70d5d2b97ee36ab184fee619d776b1a3c64c646b.jpeg"><meta name="language" content="en-US"><meta property="og:type"  content="article"><meta property="og:title"  content="Contact"><meta property="og:description"  content="Contact"><meta property="og:image"  content="http://mysite.com/files/page-703e846e853e8cbe7862d70d5d2b97ee36ab184fee619d776b1a3c64c646b.jpeg"><meta name="twitter:title" content="Contact"><meta name="twitter:description" content="Contact"><meta name="twitter:image" content="http://mysite.com/files/page-703e846e853e8cbe7862d70d5d2b97ee36ab184fee619d776b1a3c64c646b.jpeg"><meta name="twitter:card" content="summary_large_image">
	<link rel="stylesheet" href="/assets/builder/reset.css?v=1" media="screen">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<style>body{height:100vh}</style>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source\ Sans\ Pro, sans-serif:wght@400&display=swap" media="screen">

I’m wondering if this is due to my environment and if there’s any config changes that will fix it.

My Frappe server is behind a second NGINX reverse proxy. The reverse proxy handles the SSL payload and sends the connection on port 80 to frappe server.

With CMS systems like WordPress, I’ve enabled some workarounds in WordPress’s config.php file to handle https:// URLs while running on port 80.
Like:

/**
Handle SSL reverse proxy
*/
if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
$_SERVER['HTTPS']='on';
if (isset($_SERVER['HTTP_X_FORWARDED_HOST'])) {
$_SERVER['HTTP_HOST'] = $_SERVER['HTTP_X_FORWARDED_HOST'];
}

Is anyone else using a reverse proxy and Frappe Builder.

2

Hi, today I came across the same problem, to fix, you can run the following command:

bench --site [site-name] set-config host_name https://site-name-example.com

This updates the site_config.json file located at frappe-bench/sites/[site-name]/site_config.json, adding the host_name key with the correct HTTPS URL.

After making this change, ensure the updates take effect by running:

bench --site [site-name] clear-cache

Or restart bench

For more information about site_config.json and its usage, check the official documentation here:
https://frappeframework.com/docs/user/en/basics/site_config

Hope this helps!

3

Thank you @Yeifer.

Yes, adding the https hostname to site_config.json is certainly needed.

In my environment, I also have to edit /etc/hosts file on Frappe server
and point domain names to the IP address of the upstream proxy server.
With both of these settings in place, It looks like I can successfully use
HTTPS with an upstream reverse proxy server for Frappe Builder.

Let the games begin!

Cheers!

1 Like