HTTPS: URL-Leiste einfärben auf Basis Verbindungssicherheit

FireBug

Hallo community,

An die CSS-Experten:

Könnt Ihr hier mal drüber schauen - es ist ein Codeschnipsel aus einem anderen Forum/Post. - und funktioniert.

Aber ist es auch halbwegs "sauber" programmiert ?? Kann man es so lassen, oder geht es kürzer/suberer/besser?

Eigentlich versuche ich den CSS-Code immer so kurz wie möglich zu halten - möglichst ohne Fehlerrisiko.

(Inhaltlich: Die grüne Hintergrundfarbe (normales https) würde ich wegglassen, weil fast jede URL heutzutage damit "grün" wird = kein Mehrwert)

CSS

#identity-box::before
{
        position: absolute;
        display: block;
        content: "";
        width: 100%;
        height: var(--urlbar-height);
        left: 0;
        top: 0;
        pointer-events: none;
}
:root[customizing] #identity-box::before,
#urlbar[focused] #identity-box::before { display: none }
#searchbar[focused] #identity-box::before { display: none }


/* https */
/* BEISPIEL: https://www.google.com/ */
#identity-box[pageproxystate="valid"].verifiedDomain::before {
	background-color: rgba(147,235,117,0.5) !important;				/* GREEN */
	box-shadow: inset 0px -2px 0px 1px rgba(155,196,141,0.6), inset 0px 1px 0px 0px rgba(155,196,141,0.6) !important;
	}
/*--------------------------------------------------------------------------------------------------------------------*/
/* http: and potentially some other insecure connections like ftp: */
/* http://http.badssl.com/ */
#identity-box[pageproxystate="valid"].certErrorPage::before,
#identity-box[pageproxystate="valid"].notSecure::before {
	background-color: rgba(252,78,104,0.53) !important;				/* RED */
	box-shadow: inset 0px -2px 0px 1px rgba(252,78,104,0.78), inset 0px 1px 0px 0px rgba(252,78,104,0.78) !important;
	}
/*--------------------------------------------------------------------------------------------------------------------*/
#identity-box.certErrorPage::before,
#identity-box.notSecure::before {
/* http://http.badssl.com/ */
	background-color: rgba(255,255,255,0.53) !important;		/* WHITE */
	box-shadow: inset 0px -2px 0px 1px rgba(255,255,255,0.1), inset 0px 1px 0px 0px rgba(255,255,255,0.1) !important;
	}
/*--------------------------------------------------------------------------------------------------------------------*/
/* Mixed content including neterror */
#identity-box[pageproxystate="valid"].unknownIdentity::before {
/*	background-color: rgba(255,235,117,0.53) !important;		/* YELLOW */
/*	box-shadow: inset 0px -2px 0px 1px rgba(255,235,117,0.68), inset 0px 1px 0px 0px rgba(255,235,117,0.78) !important; */
	background-color: rgba(252,78,104,0.53) !important;				/* RED */
	box-shadow: inset 0px -2px 0px 1px rgba(252,78,104,0.78), inset 0px 1px 0px 0px rgba(252,78,104,0.78) !important;
	}
/*--------------------------------------------------------------------------------------------------------------------*/
/* Extension pages */
/* BEISPIEL: addon pages like uBlock Origin Dashboard */
#identity-box[pageproxystate="valid"].extensionPage::before {
	background-color: rgba(255,255,255,0.53) !important;		/* WHITE */
	box-shadow: inset 0px -2px 0px 1px rgba(255,255,255,0.1), inset 0px 1px 0px 0px rgba(255,255,255,0.1) !important;
	}
/*--------------------------------------------------------------------------------------------------------------------*/
/* Internal about: and chrome:// urls (includes reader-view) rgba(35,150,250,0.32) */
/* BEISPIEL: about:config */
#identity-box[pageproxystate="valid"].chromeUI::before {
	background-color: rgba(255,255,255,0.53) !important;		/* WHITE */
	box-shadow: inset 0px -2px 0px 1px rgba(255,255,255,0.1), inset 0px 1px 0px 0px rgba(255,255,255,0.1) !important;
	}
/*--------------------------------------------------------------------------------------------------------------------*/
#identity-box.localResource::before {
	background-color: rgba(255,255,255,0.53) !important;		/* WHITE */
	box-shadow: inset 0px -2px 0px 1px rgba(255,255,255,0.1), inset 0px 1px 0px 0px rgba(255,255,255,0.1) !important;
}

Alles anzeigen

Mitleser

Ich habe etwas Ähnliches. Vielleicht kannst Du davon ja etwas ableiten?

CSS

/*■■■■■■■■■■■■■■■■■Schloss■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*Secure lock icon in urlbar*/

/* Green */
#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon {
    fill: green !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon {
    fill: green !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].verifiedIdentity #identity-icon {
    fill: green !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-popup[connection^="secure"] .identity-popup-security-connection {
    fill: green !important;
}

/* Red */
#identity-box[pageproxystate="valid"].notSecure #identity-icon {
    fill: red !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon {
    fill: red !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].insecureLoginForms #identity-icon {
    fill: red !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
.identity-popup-security-connection {
    fill: red !important;
}

/* Orange */
#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon {
    fill: orange !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection {
    fill: orange !important;
}

/* Yellow */
#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon {
    fill: yellow !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon {
    fill: yellow !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
/*■■■■■■■■■■■■■■■■■Schriftfarbe■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Mixed content including neterror */
#identity-box[pageproxystate="valid"].unknownIdentity ~ .urlbar-input-box { 
    color: red !important;
}
/* http: and potentially some other insecure connections like ftp: */
#identity-box[pageproxystate="valid"].notSecure ~ .urlbar-input-box {
    color: red !important;
}
/* Extension pages */
#identity-box[pageproxystate="valid"].extensionPage ~ .urlbar-input-box { 
	color: purple !important;
}
/* Internal about: and chrome:// urls (includes reader-view) */
#identity-box[pageproxystate="valid"].localResource ~ .urlbar-input-box,
#identity-box[pageproxystate="valid"].chromeUI ~ .urlbar-input-box { 
	color: green !important;
}

Alles anzeigen

FireBug

Oh, danke das hilft.

Ich habe gestern festgetellt, daß momentan 08/2024 (auf allen Homepages) eigentlich nur folgende 2 Reglen greifen:

CSS

/* Green */
#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon {
    fill: #12bc00 !important;									/* GREEN - Farbe LIME wäre zu grell */
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}

#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon {		/* UserOverridden = Nachdem User die Warnung weggeklickt hat */
/*    fill: #ffe900 !important; */
    fill: RED !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}

Alles anzeigen

Gute Testhomepages:

/* SSL-TEST-Homepage: https://badssl.com */
/* SSL-TEST-Homepage: https://www.ssllabs.com/ssltest */

Mitleser

Falsch!

habe nur kurz mal dies getestet und funktionierende Beispiel-URL's einkommentiert!

EDIT: Kommentar in Zeile 6 angepasst

CSS

/*■■■■■■■■■■■■■■■■■Schriftfarbe■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Mixed content including neterror *//* funzt bei   about:neterror/netTimeout/ */
#identity-box[pageproxystate="valid"].unknownIdentity ~ .urlbar-input-box { 
    color: red !important;
}
/* http: and potentially some other insecure connections: */
/* funzt bei   http://fritz.box/*/
#identity-box[pageproxystate="valid"].notSecure ~ .urlbar-input-box {
    color: red !important;
}
/* Extension pages *//* funzt bei allen  Erweiterungen*/
#identity-box[pageproxystate="valid"].extensionPage ~ .urlbar-input-box { 
	color: purple !important;
}
/* Internal about: and chrome:// urls (includes reader-view) */
/* funzt bei   reader-view*/
/* funzt bei   about:about*/
#identity-box[pageproxystate="valid"].localResource ~ .urlbar-input-box,
#identity-box[pageproxystate="valid"].chromeUI ~ .urlbar-input-box { 
	color: green !important;
}

Alles anzeigen

Sören Hentzschel

Kleine Anmerkung: Den Kommentar in Zeile 6 kannst du anpassen, das ftp://-Protokoll unterstützt Firefox schon seit Jahren nicht mehr.

Mitleser

Erledigt!

Mitleser

So, habe das nochmal ausgiebig getestet und für GUT befunden:

CSS

/*■■■■■■■■■■■■■■■■■Schloss■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*Secure lock icon in urlbar*/

/* Green */
#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon {
    fill: green !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon {
    fill: green !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].verifiedIdentity #identity-icon {
    fill: green !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-popup[connection^="secure"] .identity-popup-security-connection {
    background-color: green !important;
}

/* Red */
#identity-box[pageproxystate="valid"].notSecure #identity-icon {
    fill: red !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon {
    fill: red !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].insecureLoginForms #identity-icon {
    fill: red !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
.identity-popup-security-connection {
   background-color: red !important;
}

/* Orange */
#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon {
    fill: orange !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection {
   background-color: orange !important;
}

/* Yellow */
#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon {
    fill: yellow !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon {
    fill: yellow !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
/*■■■■■■■■■■■■■■■■■Schriftfarbe■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Mixed content including neterror */
#identity-box[pageproxystate="valid"].unknownIdentity ~ .urlbar-input-box { 
    color: red !important;
}
/* http: and potentially some other insecure connections */
#identity-box[pageproxystate="valid"].notSecure ~ .urlbar-input-box {
    color: red !important;
}
/* Extension pages */
#identity-box[pageproxystate="valid"].extensionPage ~ .urlbar-input-box { 
	color: purple !important;
}
/* Internal about: and chrome:// urls (includes reader-view) */
#identity-box[pageproxystate="valid"].localResource ~ .urlbar-input-box,
#identity-box[pageproxystate="valid"].chromeUI ~ .urlbar-input-box { 
	color: green !important;
}

Alles anzeigen

Speravir

Interessant. Schaue ich mir noch mal genauer an (natürlich auch Mitleser s bearbeitete Version). Trotzdem nur mal so:

Adressleiste per CSS entsprechend Sicherheitsstatus einfärben - camp-firefox.de

Ehemalige Nutzer von Charamel bzw. Silvermel oder auch davor Colorize Secure URL werden es kennen und vielleicht vermissen: Man kann die gesamte Adressleiste…

www.camp-firefox.de

Zitat von FireBug

es ist ein Codeschnipsel aus einem anderen Forum/Post

Ein Link wäre hier sinnvoll.

Zitat von FireBug

daß momentan 08/2024 (auf allen Homepages) eigentlich nur folgende 2 Reglen greifen

Bei „meinem“ Stil funktionieren anscheinend vier – drei für externe Links, eine Farbe für interne (about, moz-extension).

grisu2099

Geht auch etwas kompakter:

CSS

/*■■■■■■■■■■■■■■■■■Schloss■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*Secure lock icon in urlbar*/

/* Green */
#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon,
#identity-box[pageproxystate="valid"].verifiedIdentity #identity-icon {
    fill: green !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-popup[connection^="secure"] .identity-popup-security-connection {
    background-color: green !important;
}

/* Red */
#identity-box[pageproxystate="valid"].notSecure #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon,
#identity-box[pageproxystate="valid"].insecureLoginForms #identity-icon {
    fill: red !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
.identity-popup-security-connection {
   background-color: red !important;
}

/* Orange */
#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon {
    fill: orange !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection {
   background-color: orange !important;
}

/* Yellow */
#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon {
    fill: yellow !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon {
    fill: yellow !important;
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}
/*■■■■■■■■■■■■■■■■■Schriftfarbe■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Mixed content including neterror */
#identity-box[pageproxystate="valid"].unknownIdentity ~ .urlbar-input-box,
/* http: and potentially some other insecure connections */
#identity-box[pageproxystate="valid"].notSecure ~ .urlbar-input-box { 
    color: red !important;
}
/* Extension pages */
#identity-box[pageproxystate="valid"].extensionPage ~ .urlbar-input-box { 
	color: purple !important;
}
/* Internal about: and chrome:// urls (includes reader-view) */
#identity-box[pageproxystate="valid"].localResource ~ .urlbar-input-box,
#identity-box[pageproxystate="valid"].chromeUI ~ .urlbar-input-box { 
	color: green !important;
}

Alles anzeigen

Speravir

Es geht sogar noch kompakter:

CSS

/*¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦Schloss¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦*/
/*Secure lock icon in urlbar*/
#identity-box[pageproxystate="valid"] #identity-icon {
    fill-opacity: 1 !important;
    transition: 100ms linear !important;
}

/* Green */
#identity-box[pageproxystate="valid"]:is( .verifiedDomain, .mixedActiveBlocked, .verifiedIdentity ) #identity-icon {
    fill: green !important
}
#identity-popup[connection^="secure"] .identity-popup-security-connection {
    background-color: green !important
}

/* Yellow */
#identity-box[pageproxystate="valid"]:is( .mixedDisplayContentLoadedActiveBlocked, .certUserOverridden ) #identity-icon {
    fill: yellow !important
}

/* Orange */
#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon {
    fill: orange !important
}
#identity-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection {
    background-color: orange !important;
}

/* Red */
#identity-box[pageproxystate="valid"]:is( .notSecure, .mixedActiveContent, .insecureLoginForms ) #identity-icon {
    fill: red !important
}
.identity-popup-security-connection {
    background-color: red !important
}

/*¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦Schriftfarbe¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦*/
/* Mixed content including neterror | http: and potentially some other insecure connections */
#identity-box[pageproxystate="valid"]:is( .unknownIdentity, .notSecure ) ~ .urlbar-input-box {
    color: red !important
}

/* Extension pages */
#identity-box[pageproxystate="valid"].extensionPage ~ .urlbar-input-box {
    color: purple !important
}

/* Internal about: and chrome:// urls (includes reader-view) */
#identity-box[pageproxystate="valid"]:is( .localResource, .chromeUI ) ~ .urlbar-input-box { 
    color: green !important
}

Alles anzeigen

Die Farben für die Regeln mit .identity-popup-security-connection sollte man aber blasser gestalten, denke ich (und im Dark Mode vermutlich entsprechend dunkler).

Und der letzte Teil für die Schriftfarbe könnte alternativ auch für die Hintergrundfärbung der Adressleiste genutzt werden, es sollten dann ebenso blassere Farben sein. Anders als im von mir genutzten Stil (habe ich oben verlinkt), wird die #identity-box aber nicht eingefärbt.

Es fehlt oben übrigens noch etwas (zu .chromeUI siehe folgende Postings von mir und dem Mitleser – das ist hier zu dem aktuellen Zeitpunkt, wenn ich es schreibe, eigentlich überflüssig):

CSS

#identity-box[pageproxystate="valid"]:is( .chromeUI, .extensionPage, .localResource ) #identity-icon {
    fill: blue !important
}

Mitleser

Zitat von Speravir

Es fehlt oben übrigens noch etwas

Naja, 'fehlen' tut es ja nicht. Ich nehme das mal als 'Zusatzmöglichkeit'.
Kann man sicherlich so machen, aber das jeweilige #identity-icon ist dann ein anderes Icon und nicht das oben erwähnte 'Schloss'. Es hebt sich also schon durch die jeweilige Form (Puzzleteil usw.) ab.

Speravir

Zitat von Mitleser

aber das jeweilige #identity-icon ist dann ein anderes Icon und nicht das oben erwähnte 'Schloss'. Es hebt sich also schon durch die jeweilige Form (Puzzleteil usw.) ab.

Ja, stimmt natürlich.

Speravir

Mitleser Wenn wir mal früher in chrome://browser/skin/identity-block/identity-block.css hineingeschaut hätten, dann hätten wir die noch genutzten Klassen erkennen können und ich selbst vor allem, dass .chromeUI zumindest aktuell keine Einfärbung des Symbols benötigt, weil das Firefox-Logo als PNG-Datei genutzt wird.

Mitleser

Ja, sehe ich genauso, also könnte man das löschen.
.chromeUI

Code

#identity-box[pageproxystate="valid"]:is( .chromeUI, .extensionPage, .localResource ) #identity-icon {
    fill: blue !important
}

Weiterführender Link:

identity-block.css - mozsearch

Low_Bob

Hallo,

ich bin neu hier! Hallo erstmal =)

ich habe so überhaupt keine ahnung wie das funktionieren soll. Ein ordner mit "Chrome" und die dateien "userContent.css" und userChrome.css habe ich erstellt... leider wenn ich den code eingeben funktioniert es nicht? was mache ich falsch? brauche ich eine andere datei ? Der anleitung bin ich gefolgt: https://www.userchrome.org/how-create-userchrome-css.html

MfG Low_Bob

Update: Nach einem Rechner-Neustart hat es funktioniert!! Hat sich also erledigt DANKE

Sören Hentzschel

Hallo und Willkommen im Forum.

Ein Neustart von Firefox wäre ausreichend gewesen.