output in una chat ajax

[crisland]

prendiamo una chat opensource ajax, con integrazione php e mysql, come questa di cui vi do il link. da li, si può sia vedere il funzionamento sia scaricare lo zip

http://chat.plasticshore.com/

in pratica, nello scripts.js ci sono tutti gli script, appunto.

il codice ajax si appoggia su due php: uno di questi, preleva i messaggi dal database, e lo script si preoccupa di mandarli nel box della chat, secondo formattazione da css.

nonostante io nel data base abbia magari del testo con tag html, tipo per esempio <font color=red> ec ecc, quando il js manda la stringa nel documento, il testo non si formatta.

come posso ovviare al problema?

[emanueledg]

Ciò significa che Alexander Kohlhofer ha inserito una funzione per eliminare i tag HTML (in gergo tag stripping).

Se riesci ad individuarla nello script puoi provare a bypassarla, ma comunque tieni conto che strippare il codice inviato dagli utenti in una chat sul tuo server è una questione di sicurezza.

Al limite potresti considerare la possibilità di ammettere solo determinati tag.
Lato server, per esempio in PHP, la funzione strip_tags() ha come argomento, oltre alla stringa da "strippare", anche gli "allowable tags" ovvero i tag che invece devono essere lasciati intatti (vedi qui).

Chiaramente JavaScript non ha una tal funzione nativa, se vuoi eseguire lo stripping lato client, ma sicuramente esisteranno delle library che la simulano a dovere, se cerchi troverai sicuramente qualcosa:

http://www.google.it/search?q=strip+...t+allowed+tags

[crisland]

la cosa non è un problema. uso un parser PHP che si preoccupa di prendere il contenuto del record nel database (salvato con htmlspecialchars), e a forza di str_replace vado a sostituire i tag che voglio io. quindi quando il js preleva dal PHP il testo, è già pronto.

passando un po' di tempo nella sezione javascript, penso che la mia soluzione sia innerHTML (so davvero poco di js, anche se sto cercando di capirci qualcosa).

ma ora mi sono davvero arenato. all'interno di questo codice, come posso fare per far si che il "litext", se per esempio contiene "prova", il js script me lo butti fuori come html? ho provato a mettere .innerHTML in diverse posizioni, con scarso successo -.-

function insertNewContent(liName,liText) {
	insertO = document.getElementById("outputList");  //OutputList è il ID dell index.html dove inserire il testo
	oLi = document.createElement('li');
	oSpan = document.createElement('span');
	oSpan.setAttribute('className','name'); //for IE's sake
	oSpan.setAttribute('class','name');
	oName = document.createTextNode(liName+': ');
	oText = document.createTextNode(liText);
	oSpan.appendChild(oName);
	oLi.appendChild(oSpan);
	oLi.appendChild(oText);
	insertO.insertBefore(oLi, insertO.firstChild);

grazie dell'aiuto :master:

[crisland]

anzi facciamo un esempio semplice.

il js richiama un php, che prende dati da una tabella mysql. Una chat, dove ogni record è composto da ID, name, e testo. alla cui fine ottengo "tanti"

echo $id." ---".$name." ---".$text." ---";

in fila, separati appunto da " ---". $text contiene del testo con tag, tipo "grassetto e <u>sottolineato</u>" ecc ecc che io vorrei che nella visualizzazione venissero interpretati, (cioè vedere "grassetto e sottolineato" )


il js cosa fa:

  if (httpReceiveChat.readyState == 4) {
    results = httpReceiveChat.responseText.split('---'); //the fields are seperated by ---
    if (results.length > 2) {
         for(i=0;i < (results.length-1);i=i+3) { //goes through the result one message at a time
	     	inserisci_frase(results[i+1],results[i+2]); //inserts the new content into the page
	}
	    lastID = results[results.length-4];
    }
    setTimeout('receiveChatText();',4000); //executes the next data query in 4 seconds
  }

separa i pezzi indicati con il " ---", poi prende l' 1 e il 2 ($name e $text come si vede dal pezzo php sopra) e li invia alla funzione inserisci frase.

function inserisci_frase(liName,liText) {  
frase = document.createTextNode(liText);
document.getElementById("outputList").appendChild(frase);
}

outputList è l'ID del div nella pagina html che governa il tutto, e che è, sostanzialmente, la chat.
NELL'ESEMPIO HO IGNORATO VOLUTAMENTE $name, perché stavo cercando di capire come avere la formattazione di quello che è contenuto in $text.

mi sembra di aver capito che document.createTextNode trasforma tutto in testo. quindi qui già mi frego. e purtroppo document.getElementById("outputList").appendChild( liText); non funziona, devo fare il nodo per forza.

cosa posso fare? come posso modificare nel modo corretto il codice?
grazie dell'aiuto

[emanueledg]

Ok, ho capito, il tag stripping lo fai già nel modo migliore (cioè lato server), non avevo capito che lato client hai la stringa già controllata contenente i soli tag desiderati.

Per inserirla facendo in modo che il browser parsi i tag ti serve esattamente la proprietà di lettura e scrittura innerHTML come dicevi tu.

innerHTML non è realmente una proprietà W3C compliant, inventata dalla Microsoft qualche anno fa è stata poi implementata da tutti i browser e può ormai essere considerata uno standard.
A te serve di aggiornare il contenuto del DIV tramite innerHTML senza cancellare il suo contenuto precedente, quindi basterebbe concatenare il nuovo messaggio al contenuto già presente:

var newMsg = "stringa formattata...";
document.getElementById('div_chat').innerHTML += newMsg;

[andr3a]

Originariamente inviato da crisland
purtroppo document.getElementById("outputList").appendChild( liText); non funziona, devo fare il nodo per forza.

document.getElementById("outputList").appendChild( document.createTextNode(liText));