[v3] embed background image in redirect template

Message ID 40ee64c6-91d2-802d-8f2d-61c345f0a2c3@link38.eu
State Superseded
Headers
Series [v3] embed background image in redirect template |

Commit Message

Peter Müller Aug. 27, 2018, 5:15 a.m. UTC
  Embed the IPFire background image into the redirect template
directly via CSS instead of loading it from somewhere else.
This is necessary because of Content Security Policy (CSP).

This patch inserts the base64 encoded image during build so
nothing needs to be updated twice in case background image
changes.

It supersedes first and second version of this patch and has
been successfully tested during a clean build.

Fixes #11650

Signed-off-by: Peter Müller <peter.mueller@link38.eu>
---
 html/html/redirect-templates/legacy/template.html | 7 ++++++-
 lfs/web-user-interface                            | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)
  

Comments

Michael Tremer Aug. 27, 2018, 4:37 p.m. UTC | #1
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512

Hi,

On Sun, 2018-08-26 at 21:15 +0200, Peter Müller wrote:
> Embed the IPFire background image into the redirect template
> directly via CSS instead of loading it from somewhere else.
> This is necessary because of Content Security Policy (CSP).
> 
> This patch inserts the base64 encoded image during build so
> nothing needs to be updated twice in case background image
> changes.
> 
> It supersedes first and second version of this patch and has
> been successfully tested during a clean build.
> 
> Fixes #11650
> 
> Signed-off-by: Peter Müller <peter.mueller@link38.eu>
> ---
>  html/html/redirect-templates/legacy/template.html | 7 ++++++-
>  lfs/web-user-interface                            | 5 +++++
>  2 files changed, 11 insertions(+), 1 deletion(-)
> 
> diff --git a/html/html/redirect-templates/legacy/template.html
> b/html/html/redirect-templates/legacy/template.html
> index b5fb61ebe..297561e3a 100644
> --- a/html/html/redirect-templates/legacy/template.html
> +++ b/html/html/redirect-templates/legacy/template.html
> @@ -3,11 +3,16 @@
>  	<head>
>  		<meta http-equiv="Content-Type" content="text/html; charset=utf-
> 8"> 
>  		<title>ACCESS MESSAGE</title>
> +		<style content="text/css">
> +			td.image {
> +				background-image:
> url(data:image/gif;base64,IMAGEDATAPLACEHOLDER);
> +			}
> +		</style>
>  	</head>
>  	<body>
>  		<table width="100%" height='100%' border="0">
>  			<tr>
> -				<td colspan='3' width='100%' height='130'
> align="center" background="<TMPL_VAR NAME="ADDRESS">/images/background.gif">
> +				<td colspan='3' width='100%' height='152px'
> align="center" class="image">&nbsp;</td>
>  			<tr>
>  				<td width='10%'>
>  				<td align='center' bgcolor='#CC000000'
> width='80%'>
> diff --git a/lfs/web-user-interface b/lfs/web-user-interface
> index 0c5688252..f3367713a 100644
> --- a/lfs/web-user-interface
> +++ b/lfs/web-user-interface
> @@ -55,6 +55,11 @@ $(TARGET) : $(patsubst %,$(DIR_DL)/%,$(objects))
>  	mkdir -p /var/updatecache/{download,metadata}
>  	cp -aR $(DIR_SRC)/html/* /srv/web/ipfire
>  
> +	# Add base64 encoded background image to Squid content access page
> +	basedata="$$( base64 ${DIR_SRC}/html/html/images/background.gif | tr -d
> '\n' )"; \
> +		sed -i "s|IMAGEDATAPLACEHOLDER|$${basedata}|g" \
> +		/srv/web/ipfire/html/redirect-templates/legacy/template.html
> +

${DIR_SRC} should be $(DIR_SRC) in order to be expanded from the Makefile and
not from the shell environment.

I am not even sure if DIR_SRC is guaranteed to be set.

>  	# Change CONFIG_ROOT in cgi-scripts
>  	for i in /srv/web/ipfire/cgi-bin/{*,logs.cgi/*,vpn.cgi/*}; do \
>  	    if [ -f $$i ]; then \
-----BEGIN PGP SIGNATURE-----

iQIzBAEBCgAdFiEE5/rW5l3GGe2ypktxgHnw/2+QCQcFAluDnBgACgkQgHnw/2+Q
CQc3iw/6A0zu4FLjp8XmNBgjZYxz3jfR6Js2wUQHkIRmuPqt6+RACNOsyHdeC58P
NPlIQpxwcPqXLzRlFRThGCBIXyER3ezs+4xWIFPQ/60yFYZwLGevKGYLtynCYPFv
Lmg+hc/zEnDsj0e+faocMr3yh1QtbVC8tNB/Q61kVRvMT3a4qIc0zAc01zLg15Hn
+av8SbW90p6cyzdd1AAYlql98vkh0K/S94TW5pBzN/NEADjvZXLQn+Ch89ibZfR3
VDDOsO0ETCPCvOO6us2YzuTvdCGvN1CCfaFgLZZ++lr4LMUW33T829Ssp6vEupLT
eJnUEE+J0NhTTACqeNUxbJ2Tv2K6H/5LsiYWwlZUiznXBaYiPBWbXeNucn2M+w7Y
nnfu/p3XISkQdXQHozsCVjkNtrFJF6YDex4HIx5RDdgNPz6K+0IfaEcxqqMFIVvg
dYajrnl18iP/Zlc5mzIzAaFIvVygK3LJmDUEGyeHXcYX00LmtzoWqiCd8WQnsFCW
8LXraT7Fekg5pDibrMWVCXOYSxce+++eDVzet7HKwM97SJeTkBw2F0cQ3dDnpE5C
cbrf93xHdoMdDoxu1RYoVQ9ZZLOCf8owOwvagesQXL6R/y4Ihm9Cqg0qDwFv+aFc
c7tBHuKmkE16WI4WI5uAWVISh/gAj/hjRLBF6+qHivqn20mvCbI=
=2yOA
-----END PGP SIGNATURE-----
  
Peter Müller Aug. 28, 2018, 1:46 a.m. UTC | #2
Hello,

> Hi,
> 
> On Sun, 2018-08-26 at 21:15 +0200, Peter Müller wrote:
>> Embed the IPFire background image into the redirect template
>> directly via CSS instead of loading it from somewhere else.
>> This is necessary because of Content Security Policy (CSP).
> 
>> This patch inserts the base64 encoded image during build so
>> nothing needs to be updated twice in case background image
>> changes.
> 
>> It supersedes first and second version of this patch and has
>> been successfully tested during a clean build.
> 
>> Fixes #11650
> 
>> Signed-off-by: Peter Müller <peter.mueller@link38.eu>
>> ---
>>  html/html/redirect-templates/legacy/template.html | 7 ++++++-
>>  lfs/web-user-interface                            | 5 +++++
>>  2 files changed, 11 insertions(+), 1 deletion(-)
> 
>> diff --git a/html/html/redirect-templates/legacy/template.html
>> b/html/html/redirect-templates/legacy/template.html
>> index b5fb61ebe..297561e3a 100644
>> --- a/html/html/redirect-templates/legacy/template.html
>> +++ b/html/html/redirect-templates/legacy/template.html
>> @@ -3,11 +3,16 @@
>>  	<head>
>>  		<meta http-equiv="Content-Type" content="text/html; charset=utf-
>> 8"> 
>>  		<title>ACCESS MESSAGE</title>
>> +		<style content="text/css">
>> +			td.image {
>> +				background-image:
>> url(data:image/gif;base64,IMAGEDATAPLACEHOLDER);
>> +			}
>> +		</style>
>>  	</head>
>>  	<body>
>>  		<table width="100%" height='100%' border="0">
>>  			<tr>
>> -				<td colspan='3' width='100%' height='130'
>> align="center" background="<TMPL_VAR NAME="ADDRESS">/images/background.gif">
>> +				<td colspan='3' width='100%' height='152px'
>> align="center" class="image">&nbsp;</td>
>>  			<tr>
>>  				<td width='10%'>
>>  				<td align='center' bgcolor='#CC000000'
>> width='80%'>
>> diff --git a/lfs/web-user-interface b/lfs/web-user-interface
>> index 0c5688252..f3367713a 100644
>> --- a/lfs/web-user-interface
>> +++ b/lfs/web-user-interface
>> @@ -55,6 +55,11 @@ $(TARGET) : $(patsubst %,$(DIR_DL)/%,$(objects))
>>  	mkdir -p /var/updatecache/{download,metadata}
>>  	cp -aR $(DIR_SRC)/html/* /srv/web/ipfire
> 
>> +	# Add base64 encoded background image to Squid content access page
>> +	basedata="$$( base64 ${DIR_SRC}/html/html/images/background.gif | tr -d
>> '\n' )"; \
>> +		sed -i "s|IMAGEDATAPLACEHOLDER|$${basedata}|g" \
>> +		/srv/web/ipfire/html/redirect-templates/legacy/template.html
>> +
> 
> ${DIR_SRC} should be $(DIR_SRC) in order to be expanded from the Makefile and
> not from the shell environment.
Sorry about this - fixed in v4, although it worked.
> 
> I am not even sure if DIR_SRC is guaranteed to be set.
I must say, using shell commands in LFS files is somewhat tricky...

Best regards,
Peter Müller
> 
>>  	# Change CONFIG_ROOT in cgi-scripts
>>  	for i in /srv/web/ipfire/cgi-bin/{*,logs.cgi/*,vpn.cgi/*}; do \
>>  	    if [ -f $$i ]; then \
>
  

Patch

diff --git a/html/html/redirect-templates/legacy/template.html b/html/html/redirect-templates/legacy/template.html
index b5fb61ebe..297561e3a 100644
--- a/html/html/redirect-templates/legacy/template.html
+++ b/html/html/redirect-templates/legacy/template.html
@@ -3,11 +3,16 @@ 
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 		<title>ACCESS MESSAGE</title>
+		<style content="text/css">
+			td.image {
+				background-image: url(data:image/gif;base64,IMAGEDATAPLACEHOLDER);
+			}
+		</style>
 	</head>
 	<body>
 		<table width="100%" height='100%' border="0">
 			<tr>
-				<td colspan='3' width='100%' height='130' align="center" background="<TMPL_VAR NAME="ADDRESS">/images/background.gif">
+				<td colspan='3' width='100%' height='152px' align="center" class="image">&nbsp;</td>
 			<tr>
 				<td width='10%'>
 				<td align='center' bgcolor='#CC000000' width='80%'>
diff --git a/lfs/web-user-interface b/lfs/web-user-interface
index 0c5688252..f3367713a 100644
--- a/lfs/web-user-interface
+++ b/lfs/web-user-interface
@@ -55,6 +55,11 @@  $(TARGET) : $(patsubst %,$(DIR_DL)/%,$(objects))
 	mkdir -p /var/updatecache/{download,metadata}
 	cp -aR $(DIR_SRC)/html/* /srv/web/ipfire
 
+	# Add base64 encoded background image to Squid content access page
+	basedata="$$( base64 ${DIR_SRC}/html/html/images/background.gif | tr -d '\n' )"; \
+		sed -i "s|IMAGEDATAPLACEHOLDER|$${basedata}|g" \
+		/srv/web/ipfire/html/redirect-templates/legacy/template.html
+
 	# Change CONFIG_ROOT in cgi-scripts
 	for i in /srv/web/ipfire/cgi-bin/{*,logs.cgi/*,vpn.cgi/*}; do \
 	    if [ -f $$i ]; then \