Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Layoutbeeinflussung (CSS etc.) durch Admin ohne FTP-Zugang

Begonnen von mozzi, 14. Januar 2010, 13:03:09

« vorheriges - nächstes »

mozzi

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
Signatur? Ich nehm die Vorlage: "Die Bilder in ihrer Signatur dürfen nicht größ als 640x320 Pixel sein" ... ;-)

azett

#1
Eine wirklich geniale Lösung! :)

mozzi

#2
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
Signatur? Ich nehm die Vorlage: "Die Bilder in ihrer Signatur dürfen nicht größ als 640x320 Pixel sein" ... ;-)

risaer

#3
!!!! 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.

risaer

#4
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 */";
}
}
?>

azett

#5
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! :)

rolinux

#6
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
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

"Die Deutsche Rechtschreibung ist Freeware, du darfst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du sollst sie nicht verändern oder in veränderter Form veröffentlichen."
(Verfasser unbekannt)

risaer

#7
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.

rolinux

#8
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
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

"Die Deutsche Rechtschreibung ist Freeware, du darfst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du sollst sie nicht verändern oder in veränderter Form veröffentlichen."
(Verfasser unbekannt)

mozzi

#9
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
Signatur? Ich nehm die Vorlage: "Die Bilder in ihrer Signatur dürfen nicht größ als 640x320 Pixel sein" ... ;-)

mozzi

#10
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!
Signatur? Ich nehm die Vorlage: "Die Bilder in ihrer Signatur dürfen nicht größ als 640x320 Pixel sein" ... ;-)

mozzi

#11
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
Signatur? Ich nehm die Vorlage: "Die Bilder in ihrer Signatur dürfen nicht größ als 640x320 Pixel sein" ... ;-)

mozzi

#12
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
Signatur? Ich nehm die Vorlage: "Die Bilder in ihrer Signatur dürfen nicht größ als 640x320 Pixel sein" ... ;-)

mozzi

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.
Signatur? Ich nehm die Vorlage: "Die Bilder in ihrer Signatur dürfen nicht größ als 640x320 Pixel sein" ... ;-)