# Falls Sie eine Website erwarten, aber diesen
# Abschnitt lesen können, löschen Sie bitte das
# _index.htmx_opera_css_local_https_warnings
# vom Ende der Adresszeile. Danke!



Lang: de
Title: Opera warnt bei lokalen Dateien in https-Seiten durch user.css
Short Title: Opera: https: Warnung (lokale Dateien)
Publication date: 2013-11-22

+PART_1
+TEXT
+PART_2

>>PART_1

<H2>Opera-Sicherheitswarnung bei user.css-Bildern</H2>

<H3>Problem</H3>

<P>
Wenn man mit <B><CODE>user.css</CODE></B> eine lokale Bilddatei einbindet (mit
 <CODE>url(file://localhost/...)</CODE>, dann zeigt Opera eine Sicherheitswarnung an.
Allerdings findet man leider nur die folgende, nicht sehr hilfreiche Meldung in
den Sicherheitsinformationen:
</P>
>>PART_1 en

<H2>Opera warns about insecure connection in case of user.css images</H2>

<H3>Problem</H3>

<P>
When including a local picture file with <B><CODE>user.css</CODE></B> (using
 <CODE>url(file://localhost/...)</CODE>) Opera shows a security warning.
Unfortunately you only get following message in the security panel:
</P>
>>TEXT de 1.0
	<BLOCKQUOTE>
	<B>Die Website ist nicht sicher</B> <br />
	Die Verbindung zu example.com ist nicht sicher. Benutzen Sie sie nicht,
	um sensible Informationen zu übertragen.
	</BLOCKQUOTE>
	<BLOCKQUOTE>
	Der Server versuchte Sicherheitsmaßnahmen anzuwenden, was aber
	fehlschlug.
	</BLOCKQUOTE>
<P>
 <IMG ALIGN="middle" SRC="opera_css_local_https_unsicher.png" BORDER="0" ALT=""> <IMG ALIGN="right" SRC="opera_css_local_https_sicherheitsinfo.png" BORDER="0" ALT="">
</P>

>>TEXT en 1.0
	<BLOCKQUOTE>
	<B>Site not secure</B> <br />
	The connection to example.com is not secure. Do not use it to submit
	sensitive information. 
	</BLOCKQUOTE>
	<BLOCKQUOTE>
	The server attempted to apply security measures, but failed.
	</BLOCKQUOTE>
<P>
 <IMG ALIGN="middle" SRC="opera_css_local_https_insecure.png" BORDER="0" ALT=""> <IMG ALIGN="middle" SRC="opera_css_local_https_security_info.png" BORDER="0" ALT=""> 
</P>
<< TEXT
>>PART_2

<H3>Lösung</H3>

<P>
Man kann das Bild auch als "Data URI" einbinden, das sieht in der .css-Datei z. B. folgendermaßen
aus:
</P>

<PRE>
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAIAAABxgXNEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsWEwYq81fvegAAAYFJREFUOMvllD9rwkAYh+8S/0FCGyNxKBgVUiFSQcFRcC/9Bgp+EvMV+g3EwcG5Q4dCB6WLQknpECi1lCaEOpjcIQmYxHAdnBtrKnTob73j4b378byQEAKOFAocL4mIszAMDcOwbRsAwPN8oVCgaTrmXJPJBCHEsizDMAih6XQacy5CiCiKkiQBAFzXDYLAMAxCCITwYBbGmOO4MAxN07Qsy/O87XaLMc5mswezbNsulUoYoRdVRZYFMpkTnl8ul3FY76r6qCjntZrX7wth6KfTG1E0FUWW5YNZMJH4tCxuvX5jmFOWJa4bYFxMJuP0KNXrz7r+4TivjqOb5gbjs1areHERVST5PjfD4XWlMoTwHgCt3b4bDEhkYLRDt6ORP5tRNE01Gle93q8cuux2n3K5h1RqL2iPQ7sIguB53tHcpqgfXYv6r/F4jBCaz+e+7zebzXw+3+l0Yvqo67osy+VyOQgC3/dXq1W0j3t6XCwWmqYBAKrV6s7zmG/8y736H1hf3PjuO/3diSsAAAAASUVORK5CYII=');
</PRE>

<P>
Dies ist ein Ersatz für
 <CODE>background:url('file://localhost/home/bla/backgrounds/glass_of_wine.png');</CODE>.
Erzeugen kann man die Daten in einer Shell:
</P>

<PRE>
printf %s "background:url('data:image/png;base64,"; cat glass_of_wine.png | base64 | tr -d '\n'; printf "%s\n" "');"
</PRE>

<P>
(Für Anfänger: Erst mit ganz kleinen Bilddateien anfangen, 1000 Byte sind schon
viel und werden schnell unübersichtlich.)
</P>

<H3>Weiterer Hinweis</H3>

<P>
Dieser Trick gilt für das "alte" Opera unter Linux. Was die Windows-/OS-X-Versionen machen, und wie Opera Next (aka "Chropera" / "Chromera" / "Opium") mit <CODE>user.css</CODE> umgeht, weiß ich nicht.
</P>
>>PART_2 en

<H3>Solution</H3>

<P>
You have to implant the picture as "Data URI". Following css property is given
as an example:
</P>

<PRE>
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAIAAABxgXNEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsWEwYq81fvegAAAYFJREFUOMvllD9rwkAYh+8S/0FCGyNxKBgVUiFSQcFRcC/9Bgp+EvMV+g3EwcG5Q4dCB6WLQknpECi1lCaEOpjcIQmYxHAdnBtrKnTob73j4b378byQEAKOFAocL4mIszAMDcOwbRsAwPN8oVCgaTrmXJPJBCHEsizDMAih6XQacy5CiCiKkiQBAFzXDYLAMAxCCITwYBbGmOO4MAxN07Qsy/O87XaLMc5mswezbNsulUoYoRdVRZYFMpkTnl8ul3FY76r6qCjntZrX7wth6KfTG1E0FUWW5YNZMJH4tCxuvX5jmFOWJa4bYFxMJuP0KNXrz7r+4TivjqOb5gbjs1areHERVST5PjfD4XWlMoTwHgCt3b4bDEhkYLRDt6ORP5tRNE01Gle93q8cuux2n3K5h1RqL2iPQ7sIguB53tHcpqgfXYv6r/F4jBCaz+e+7zebzXw+3+l0Yvqo67osy+VyOQgC3/dXq1W0j3t6XCwWmqYBAKrV6s7zmG/8y736H1hf3PjuO/3diSsAAAAASUVORK5CYII=');
</PRE>

<P>
This is a replacement for
 <CODE>background:url('file://localhost/home/bla/backgrounds/glass_of_wine.png');</CODE>.
Creation via shell is pretty easy:
</P>

<PRE>
printf %s "background:url('data:image/png;base64,"; cat glass_of_wine.png | base64 | tr -d '\n'; printf "%s\n" "');"
</PRE>

<P>
(Beginners should start with very small pictures, 1000 byte are enough and can
be yet confusing.)
</P>

<H3>Additional Note</H3>

<P>
This trick is sufficient for the "old" Opera on Linux. I don't know about the
Windows/OS X versions and how Opera Next (aka "Chropera" / "Chromera" / "Opium") handles
 <CODE>user.css</CODE>.
</P>



<<PART_2