moziloCMS Supportforum

moziloCMS => Tipps und Tricks => Thema gestartet von: mozzi am 14. Januar 2010, 13:03:09

Titel: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zugang
Beitrag von: mozzi am 14. Januar 2010, 13:03:09
Hallo,

hier nun auch von mir ein kleiner Beitrag für dieses nette CMS.

Es geht um die Möglichkeit, das Layout durch einen Admin beeinflussen zu lassen, der keine FTP-Rechte hat und sich nur mäßig mit Web-Sachen auskennt, aber einigermaßen logisch denken kann.

Anlaß war meine Überlegung, einem Bekannten für seine genialen Hobby-Ergebnisse eine eigene kleine Seite per Subdomain auf meinem Webspace anzubieten.
Aus früherer Erfahrung wollte ich dabei sicherstellen, daß ich die Wahlmöglichkeit behalte, statt langer Erklärungen kleine Layout-Wünsche von ihm schnell selbst umzusetzen oder ihm das später dann anhand der erstellten Vorlagen selbst zu überlassen.
Einen FTP-Zugang wollte ich ihm nicht überlassen, da auf dem Webspace auch meine geschäftliche Webseite und andere Daten von mir liegen.

Also nun endlich zur Lösung, die relativ einfach, aber dabei in meiner Umsetzung sehr flexibel ist:



Ziel:
Beeinflussung des Layouts durch Überschreiben von CSS-Einstellungen durch den Admin ermöglichen

Lösungsansatz:
Original-CSS-Datei beibehalten, zusätzliche CSS-Überschreibungen ermöglichen mit Hilfe von Dateien, auf die der Admin Zugriff hat.

Lösungsweg:
Zusätzliche CSS-Dateiaufrufe im Template,
- einmal für eine direkt vom Admin hochzuladende CSS-Datei mit vordefiniertem Pfad, und
- einmal für eine direkt vom Admin zu editierende versteckte Inhaltsdatei mit vordefiniertem Pfad, die von einem Mini-Skript ausgelesen und mit einem CSS-Header versehen wird.
Die aufgerufenen CSS-Dateien werden vom Browser generell in der Reihenfolge des Aufrufs ausgewertet, d.h. die originale CSS-Datei kann dabei durchaus komplett bestehenbleiben, soweit sie vor den anderen beiden aufgerufen wird.

Das war's eigentlich schon.



Umsetzung (Beispiel):


1. PHP-Skript "xget_css.php" im CMS-Hauptverzeichnis erstellen:

<?php

  
// *****************************************
  // Diese Datei fügt einer per GET
  // angegebenen Datei einen CSS-Header hinzu.
  // *****************************************

  
header('Content-type: text/css');
  
readfile($_GET['file']);

?>


Dieses Skript ist nötig, um den korrekten CSS-Header zu erzwingen. Wenn direkt die versteckte Inhaltsdatei "kategorien/99_Website-Style/90_userstyle-css.hid" (s. weiter unten) eingebunden würde, würde z.B. Firefox diese wegen des falschen aufgrund der Dateiendung vom Server erzeugten Headers ignorieren.


2. Im Template zusätzliche CSS-Aufrufe hinzufügen (der @import-Befehl wurde aus anderen Gründen ersetzt):

 <!-- <style type="text/css"> @import "layouts/{LAYOUT_DIR}/css/style.css"; </style> -->
  <link rel="stylesheet" type="text/css" href="layouts/{LAYOUT_DIR}/css/style.css" /><!-- Original-CSS-Datei -->
  <link rel="stylesheet" type="text/css" href="kategorien/99_Website-Style/dateien/userstyle.css" /><!-- Zusaetzliche Upload-CSS-Datei -->
  <link rel="stylesheet" type="text/css" href="xget_css.php?file=kategorien/99_Website-Style/90_userstyle-css.hid" /><!-- Uebergabe eines direkt editierbaren Dateiinhaltes als CSS-Datei -->

3. Layoutstil-Kategorie anlegen

Per Admin-Zugang die Kategorie "Website-Style" unter der Zählnummer 99 anlegen


4. Zusätzliche CSS-Inhalte und Bilder bereitstellen:
- Per Admin-Zugang die erste zusätzliche CSS-Datei mit den gewünschten CSS-Änderungen und -Ergänzungen mit dem Dateinamen "userstyle.css" in der Kategorie "Website-Style" hochladen
- Per Admin-Zugang die zweite zusätzliche Pseudo-CSS-Datei als versteckte Inhaltsdatei "userstyle-css" mit der Zählnummer 90 in der Kategorie "Website-Style" anlegen
- Per Admin-Zugang ggf. Bilder für Hintergrund, Logo etc. hochladen, entsprechend den eigenen CSS-Inhalten


5. Feddich.


Meiner Meinung nach ist gerade die 2. zusätzliche CSS-Einbindung eine gute Möglichkeit, schnell mal was auszuprobieren, ohne dabei ein Risiko bzgl. der regulären CSS-Inhalte einzugehen.
Wenn man dann noch 2 gleiche Tabs mit Inhaltseditor mit der jeweiligen CSS-Inhaltsdatei öffnet, bevor man auf dem ersten davon die Änderungen durchführt, kann man sogar auch auf mäßig besuchten produktiven Seiten schnell und unkompliziert mal etwas ändern und erst danach die reguläre CSS-Definition anpassen.


Wer es mal ausprobiert: Eine Rückmeldung würde mich freuen.

Grüße
Mozzi
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zugang
Beitrag von: azett am 11. Februar 2010, 13:09:42
Eine wirklich geniale Lösung! :)
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zugang
Beitrag von: mozzi am 25. Februar 2010, 11:04:01
Danke! ;-)

Übrigens hatte ich später bemerkt, daß natürlich die Galerie da noch nicht berücksichtigt ist. Ich vermute aber mal, ohne jetzt näher auf deren Struktur (Template etc.) geschaut zu haben, daß man die vorigen Hinweise sehr ähnlich auch auf die Galerie-Sachen anwenden kann und dann wirklich damit fertig ist.
Wichtig für einen langfristig guten Überblick ist m.E., daß man klare Regeln bzgl. Ablageort von Bildern, CSS-Daten etc. einhält und nicht Layout-Daten mit Inhaltsdaten vermischt. Dann kann man auch später noch leicht eigene Layout-Modifikationen auf andere Webseiten mit gleichem Grundlayout übernehmen.

Grüße
Mozzi
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: risaer am 07. Januar 2011, 05:39:15
!!!! Um Himmels willen!!!! So bloß nicht nachmachen!!!

Der Ideenansatz ist super. Das werde ich auch nutzen. Aber ist dir bewußt, dass du hiermit freien Zugriff auf deine Verzeichnisse, Quellcodes und Passwörter zu gibst?

http://example.com/bekannter/layouts/meins/xget_css.php?file=../../admin/conf/logindata.conf
gibt dir die Logindaten (wenn auch mit verschlüsseltem PW).

Mit
http://example.com/bekannter/layouts/meins/xget_css.php?file=../../../xxx
kannst du dann auch noch die übergeordnteten Dateien auslesen. Vielleicht hast du ja phpmyadmin oder Dateien, in denen deine unverschlüsselten Zugangsdaten für deine MySQL-DB stehen??

Bau lieber den Namen der css fest ein:
 header('Content-type: text/css');
  $file='../../../kategorien/99_dummy/99_css.hid';
  readfile($file);

oder fixiere zumindes den letzten Teil des Namens
 header('Content-type: text/css');
  $file=$file=$_GET['file'];.'._css.hid'; //Bedingung: Name ist css, Zustand versteckt.
  readfile($file);

Das lässt sich natürlich noch weiter ausbauen.
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: risaer am 07. Januar 2011, 15:41:32
Oh. gibt es keinen "Edit"-Button??

Hier habe ich das ganze noch etwas ausgebaut. Die entsprechende Datei kommt in das entsprechende Layoutverzeichnis, z.B. als xget_css.php.

Angepasst werden folgende 3 Zeilen:
$KATHEGORIE='99_Website-Style';
$PAGE_NAME='90_userstyle-css';   //ohne erweiterung!

//Modus wählen:
$MODUS='tmp'; //normal: .txt; versteckt: .hid entwurf: .tmp;
//Am besten "Entwurf", da die Einträge sonst auch in der Sitemap auftauchen


Dann kann die CSS-Datei direkt in template.html aufgerufen werden
 <link href="<##Pfad Anpassen##>/xget_css.php" rel="stylesheet" type="text/css" />
die zweite Mgl ist, innerhalb der "festen" .css per
@import "./xget_css.php";
zu beachten ist aber, dass der Befehl @import am Anfang der .css stehen muss. Somit ist es über das Backend  nicht möglich, styles aus der .css zu überschreiben. Dies kann natürlich sowohl Bug als auch Feature sein.

xget_css.php:
<?php

  
// *****************************************
  // Diese Datei fügt einer per GET
  // angegebenen Datei einen CSS-Header hinzu.
  // *****************************************

$KATHEGORIE='99_Website-Style';
$PAGE_NAME='90_userstyle-css';   //ohne erweiterung!

//Modus wählen:
$MODUS='tmp'//normal: .txt; versteckt: .hid entwurf: .tmp;
//Am besten "Entwurf", da die Einträge sonst auch in der Sitemap auftauchen

//Nur bei Änderung der Verzeichnisstruktur anpassen.
$CAT_NAME='kategorien'; $LAYOUT_NAME='layouts'

$pos=strpos(dirname(__FILE__),$LAYOUT_NAME); //finde rootpfad
if ( $pos === FALSE ) die( 'wrong dir structure'); 
else{ 
$file_path=substrdirname(__FILE__),0,$pos)
.$CAT_NAME.'/'.$KATHEGORIE.'/'.$PAGE_NAME.'.'.$MODUS;
if (file_exists$file_path) ){  //ausliefern
header('Content-type: text/css');
readfile($file_path);
} else {
echo "/*CSS: Erwarte CSS: $KATHEGORIE$PAGE_NAME $MODUS */";
}
}
?>
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: azett am 23. Januar 2011, 01:37:12
Zitat von: "risaer"Der Ideenansatz ist super. Das werde ich auch nutzen. Aber ist dir bewußt, dass du hiermit freien Zugriff auf deine Verzeichnisse, Quellcodes und Passwörter zu gibst?
Danke fürs wache Auge, das hatte ich gar nicht auf dem Schirm  :shock:
Und gleich die Lösung hinterhergeschickt, fantastisch :) Danke! :)
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: rolinux am 24. Januar 2011, 15:58:07
Und dann kommt gleich einer und nutzt die Sache mit dem kleinen Finger und der ganzen Hand:
Wie könnte man das erweitern und mit einer zweiten Inhaltsseite auch für die Template.html nutzen?

Gruß
Rolf
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: risaer am 02. Februar 2011, 13:30:06
Ich glaube, das geht nicht so einfach. Das CSS wird ja direkt über php vom Server geholt. Das Template wird ja vom CMS geparst. Da musst du schon ins CMS direkt eingreifen.

Solltest du vollen Zugang auf den Server (SSH mit entsprechenden Rechten) haben, könntest du bestimmt auch einen Hard- oder Softlink setzen mit "ln". Aber das wirst du wohl nicht haben, denke ich.
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: rolinux am 02. Februar 2011, 16:48:15
Das dachte ich mir schon.
Kann man nicht durch einen speziellen Befehl in der Template.html ähnlich wie die CSS-Datei eine andere Template-Datei einlesen?

Gruß
Rolf
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: mozzi am 17. Mai 2011, 13:15:57
Hallo,

zum Glück habe ich gerade woanders einen Verweis hierher gesetzt, sonst wäre mir die Warnung weiter oben gar nicht mehr aufgefallen!

Mittlerweile habe ich mir eine Lösung überlegt, die bei der ausschließlichen Verwendung von ".hid"-Endungen für versteckte Inhaltsdateien innerhalb des CMS wohl sicher sein sollte:

Im Template wird die Dateiendung ".hid" bei der CSS-Deklaration weggelassen und stattdessen von dem auslesenden Skript in "xget_css.php" hinzugefügt. Somit können nur Dateien ausgelesen werden, die die Endung ".hid" haben.
Außerdem wird noch auf ein "/" am Anfang sowie auf "." im Pfad geprüft. Ein Punkt wird bei CMS-sinngemäßer Verwendung nicht im Pfad benötigt und wird daher hier nicht erlaubt. Damit ist insgesamt das Auslesen übergeordneter Verzeichnisse unterbunden.


Hier das geänderte PHP-Skript "xget_css.php":
<?php
// *******************************************
//  Diese Datei fügt einer per GET
//  angegebenen Datei einen CSS-Header hinzu.
// *******************************************

  
$xfile $_GET['file'];
  if ((
strpos($xfile'/') != 0) && (strpos($xfile'.') == false) && (file_exists($xfile '.hid'))) {
    
header('Content-type: text/css');
    
readfile($xfile '.hid');
  } else {
    echo 
$xfile '(.hid) nicht zulässig!';
  }

?>


Und hier die geänderte Zeile der CSS-Deklaration im Template "template.html" (sowie ggf. analog in "gallerytemplate.html", habe ich nicht näher betrachtet):
<link rel="stylesheet" type="text/css" href="xget_css.php?file=kategorien/99_Website-Style/90_userstyle-css" />
("90_userstyle-css.hid" wurde durch "90_userstyle-css" ersetzt.)


Ich hoffe mal, nun ist die Sache einigermaßen wasserdicht.
Vielen Dank schonmal für Eure Rückmeldungen!

Grüße
Mozzi
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: mozzi am 17. Mai 2011, 23:43:37
Nachtrag:
Entsprechend einer früheren Empfehlung sollte natürlich bei fehlender einzulesender CSS-Datei kein Schrott ausgegeben werden, sondern gültiges CSS, daher bitte im vorigen Beitrag

   echo $xfile . '(.hid) nicht zulässig!';

durch

   echo "/* $xfile (.hid) nicht zulässig! */";

ersetzen!
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: mozzi am 20. Mai 2011, 11:54:21
Sorry, hier jetzt nochmal die gründlicher geprüfte Version.
Natürlich sollte der CSS-Header auch dann ausgegeben werden, wenn z.B. eine Datei nicht auffindbar ist und daher eine leere CSS-Datei vorgetäuscht wird.

Hier also nochmal die Datei xget_css.php :
<?php
// ***********************************************
//  Diese Datei fügt einer per GET angegebenen,
//  geprüften Datei(.hid) einen CSS-Header hinzu.
// ***********************************************

  
$xfile $_GET['file'];
  
header('Content-type: text/css');
  if ((
strpos($xfile'/') != 0) && (strpos($xfile'.') == false) && (file_exists($xfile '.hid'))) {
    
readfile($xfile '.hid');
  } else {
    echo 
"/*/ $xfile (.hid) nicht zulässig! /*/";
  }

?>

Grüße
mozzi
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zuga
Beitrag von: mozzi am 25. Juni 2011, 00:50:41
Hallo,

da gabs noch ein Mißverständnis mit dern Erfordernissen bei strpos... also hier nochmal (und hoffentlich letztmalig) eine Korrektur der xget_css.php:

<?php
// ***********************************************
//  Diese Datei fügt einer per GET angegebenen,
//  geprüften Datei(.hid) einen CSS-Header hinzu.
// ***********************************************

  
$xfile $_GET['file'];
  
header('Content-type: text/css');
  if ((
strpos($xfile'/') !== 0) && (strpos($xfile'.') === false) && (file_exists($xfile '.hid'))) {
    
readfile($xfile '.hid');
  } else {
    echo 
"/*/ $xfile (.hid) nicht zulässig! /*/";
  }

?>
... denn ein Punkt soll ja auch an der Stelle Null nicht vorkommen dürfen, daher muß auf Typgleichheit mit false geprüft werden.

Natürlich ist das Anhängen von ".hid" auch so schon ein erheblicher Sicherheitsgewinn.

Sorry und Grüße
mozzi
Titel: Re: Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zugang
Beitrag von: mozzi am 05. August 2013, 12:18:46
So, hier nochmal eine kleine Fortsetzung.

Die xget_css.php habe ich noch genau so in Gebrauch, wie zuletzt angegeben; meiner Meinung nach ist die Sicherheit damit vollauf vertretbar.

Für eigene CSS-Versuche während Zeiten, in denen Besucher auf die Webseite kommen, kam mir noch ein Gedanke:
Wenn versuchsweise CSS-Modifikationen nur für den Seitenbetreiber sichtbar sein sollen, könnte man in der o.g. Datei noch die Option einer IP-abhängigen Funktion einbauen, die die ausgelesenen CSS-Inhalte nur dann ausgibt, wenn die IP-Adresse des Webseitenbetrachters mit einer bestimmten IP-Adresse übereinstimmt, die z.B. in einer gesonderten Datei hinterlegt sein kann. Das Hinterlegen kann dann z.B. per Online-Texteditor, per Aufruf eines zusätzlichen Skripts mit automatischer IP-Ermittlung, oder sonstwie erfolgen.

Diese modifizierte xget_css.php kann dann als weiterer (vierter) CSS-Aufruf im Template hinterlegt sein, z.B. kann die Aktivierung der IP-Abfrage per GET erfolgen, sodaß der bislang letzte (dritte) CSS-Aufruf gar nicht verändert werden muß, obwohl eine erweiterte xget_css.php überall verwendet wird.

So könnte man in Echtzeit mit dem CSS herumexperimentieren, ohne daß andere Webseitenbesucher die Veränderungen mitbekommen. Auch ein externer Webdesigner könnte so, z.B. mittels dem o.g. Online-Texteditor und ohne FTP-Zugangsdaten, am Design basteln, während die Webseite aktiv ist. Einfach IP-Erkennungs-Skript aufrufen und loslegen; das gleiche macht hinterher der Webseiteninhaber, um die Ergebnisse zu betrachten.