Firefox cambia contenido de variable mostrada en <textarea> | Función "mail"

GNULinux · #1 (**permalink**) 25/11/2010, 07:17

Buenas.

Necesito que me ayuden con dos problemas:

1- Resulta que tengo una variable que contiene el siguiente código HTML:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div>
<table align="center" border="0" style="background-color:#FFF; border-collapse:collapse; margin-bottom:20px;">
<tbody>
<tr>
<td height="170" style="background-image:url('http://promza.dyndns.org/sistema_plantilla/cabeceras/cabecera.jpg'); background-repeat: no-repeat;" valign="top" width="901"></td>
</tr>
<tr>
<td height="986" style="background-image:url('http://promza.dyndns.org/sistema_plantilla/cuerpos/cuerpo.jpg'); background-repeat: no-repeat;" valign="top" width="901">
REDACTAR DESDE AQUI</td>
</tr>
<tr>
<td height="113" style="background-image:url('http://promza.dyndns.org/sistema_plantilla/pies/pie.jpg'); background-repeat: no-repeat;" valign="top" width="901"></td>
</tr>
</tbody>
</table>
</div>

</body>

</html>

Como verán, en los background-image figuran comillas simples para encerrar la URL, lo que es correcto.

Si la variable que contiene el código anterior la imprimo en un <textarea> desde Chrome y Opera, dicho código se muestra tal cual se encuentra en la variable, los background-image aparecen con comillas simples. En cambio, si lo hago a través de Firefox, el código que se muestra en el <textarea> no es el mismo que el que contiene la variable, los background-image aparecen con comillas dobles y, por tanto, el código no funciona.

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div>
<table align="center" border="0" style="background-color: rgb(255, 255, 255); border-collapse: collapse; margin-bottom: 20px;">

<tbody>

<tr>
<td height="170" style="background-image: url("http://promza.dyndns.org/sistema_plantilla/cabeceras/cabecera.jpg"); background-repeat: no-repeat;" valign="top" width="901"></td>
</tr>
<tr>
<td height="986" style="background-image: url("http://promza.dyndns.org/sistema_plantilla/cuerpos/cuerpo.jpg"); background-repeat: no-repeat;" valign="top" width="901">
REDACTAR DESDE AQUI</td>
</tr>
<tr>
<td height="113" style="background-image: url("http://promza.dyndns.org/sistema_plantilla/pies/pie.jpg"); background-repeat: no-repeat;" valign="top" width="901"></td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Aclaro, por las dudas, que el contenido de la variable necesito mostrarlo en un <textarea> para que el usuario pueda copiar el código y usarlo con cualquier otra aplicación, ya que dicho código pertenece a un sistema de gestión de plantillas que estoy haciendo.

2- Necesito saber como puedo hacer uso de la función mail(), para que los E-Mail que envío no lleguen como SPAM. A veces llegan a la bandeja de SPAM y otras veces llegan a la bandeja de entrada, pero con la etiqueta de SPAM en el asunto.

Actualmente, la uso de la siguiente forma:

Cita:

$destinatario = $_POST['direcciones'];

$asunto = $_POST['asunto'];

$resp = $_POST['resp'];

//para el envío en formato HTML

$headers = "MIME-Version: 1.0\r\n";

$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";

//dirección del remitente

$headers .= "From: ".$resp." <>\r\n";

//envío de mail

mail($destinatario,$asunto,stripslashes($cuerpo),$ headers);

Desde ya, muchas gracias por su tiempo.

jcarrascal · #2 (**permalink**) 25/11/2010, 09:25

1 - Debes escapar el código que imprimas dentro del textarea:

Código:

echo '<textarea>', htmlentities($codigoHTML), '</textarea>';

Algunos browsers son más permisivos que otros con lo que va dentro de un textarea pero no te debes fiar. Simplemente escapas el HTML y ya te debería funcionar.

2 - Esto es más difícil. Puede ser que te hayan agregado a una lista negra por enviar muchos correos, pero no te lo podría asegurar.

GNULinux · #3 (**permalink**) 25/11/2010, 09:48

Cita:

Iniciado por jcarrascal

1 - Debes escapar el código que imprimas dentro del textarea:

Código:

echo '<textarea>', htmlentities($codigoHTML), '</textarea>';

Algunos browsers son más permisivos que otros con lo que va dentro de un textarea pero no te debes fiar. Simplemente escapas el HTML y ya te debería funcionar.

2 - Esto es más difícil. Puede ser que te hayan agregado a una lista negra por enviar muchos correos, pero no te lo podría asegurar.

Probé lo que me decís, pero los background-image me quedan así:

Código:

style="background-image: url(&quot;http://www..xxx.org/imagen.jpg&quot;)

Ahora, en vez de comillas dobles, aparecen "

PD: Por las dudas, te aclaro que el código lo meto en la variable escapando las comillas dobles con la barra invertida. Después, lógicamente, cuando se lo muestro al usuario, le quito las comillas con stripslashes(). Es recién ahí es donde Firefox, a diferencia de los otros navegadores, muestran mal el código.

Gracias por tu respuesta.

GNULinux · #4 (**permalink**) 25/11/2010, 18:50

Nadie sabe que puede estar sucediendo, ya he probado todo.

pateketrueke · #5 (**permalink**) 25/11/2010, 19:16

Cita:

Iniciado por GNULinux

Nadie sabe que puede estar sucediendo, ya he probado todo.

creo que estas todo bien alucinado...

Firefox hace lo que dices siempre, por defecto... digamos que reconstruye el código fuente cuando lo inspeccionas... solo al dar click derecho, ver código fuente, etc...

yo lo se, me ha pasado lo mismo... (:

pero eso no tiene nada que ver con lo que planteas, vamos, ¿porque Firefox habría que cambiar las comillas que imprimiste con PHP?

eso es una tontería, no es posible... si tu imprimes algo, así debe quedar!!

ahora... para que se muestre bien tu HTML en los <textarea/> siempre debes usar htmlspecialchars()

siempre debes hacerlo de esa forma...

GNULinux · #6 (**permalink**) 25/11/2010, 19:23

Cita:

Iniciado por pateketrueke

creo que estas todo bien alucinado...

Firefox hace lo que dices siempre, por defecto... digamos que reconstruye el código fuente cuando lo inspeccionas... solo al dar click derecho, ver código fuente, etc...

yo lo se, me ha pasado lo mismo... (:

pero eso no tiene nada que ver con lo que planteas, vamos, ¿porque Firefox habría que cambiar las comillas que imprimiste con PHP?

eso es una tontería, no es posible... si tu imprimes algo, así debe quedar!!

ahora... para que se muestre bien tu HTML en los <textarea/> siempre debes usar htmlspecialchars()

siempre debes hacerlo de esa forma...

Comenté que me parece que firefox me cambia las comillas simples por dobles, porque con Chrome y Opera no sucede. En estos dos últimos, el código se imprime perfectamente bien y funciona correctamente.

Respecto a htmlspecialchars(), si utilizo dicha función los background-image se imprimen así:

Cita:

background-image: url("http://www.xxx.com/pie.jpg");

Aparecen " en vez de las comillas simples que deberían aparecer.

pateketrueke · #7 (**permalink**) 25/11/2010, 19:30

Cita:

Iniciado por GNULinux

Comenté que me parece que firefox me cambia las comillas simples por dobles, porque con Chrome y Opera no sucede. En estos dos últimos, el código se imprime perfectamente bien y funciona correctamente.

cierto, eso me queda claro... yo mismo he experimentado la misma sensación!!

Cita:

Iniciado por GNULinux

Respecto a htmlspecialchars(), si utilizo dicha función los background-image se imprimen así [...] Aparecen " en vez de las comillas simples que deberían aparecer.

eso si no tiene sentido, si el background-image tiene comillas dobles es obvio que resulte " en caso de tener comillas simples no las cambia...

has la prueba manualmente y lo verás...

así que dicha hipótesis solo nos deja claro algo, que el código HTML que tienes esta mal... la fuente esta mal, ¿podrías mostrar tu código verdadero?

porque vamos... haciendo este simple ejemplo todo va bien con Firefox:

Código PHP:

  $texto = <<<HTML

<td height="170" style="background-image:url('http://promza.dyndns.org/sistema_plantilla/cabeceras/cabecera.jpg'); background-repeat: no-repeat;" valign="top" width="901"></td>

HTML;

 
echo '<textarea>', htmlspecialchars($texto), '</textarea>';

en resumen, PHP se ejecuta en el servidor, no en el navegador...

GNULinux · #8 (**permalink**) 25/11/2010, 19:40

La cuestión es así:

Desde la página opciones.php armo un <textarea> con un determinado contenido HTML (un <div> con un <table>):

Código:

    <textarea class="ckeditor" name="cuerpo_text" style="width:<?php echo $anchura_ca; ?>px;height:500px;"> 



        <div>
            <table border="0" align="center" style="background-color:#FFF; border-collapse:collapse; margin-bottom:20px;">
                <tr>
                    <td valign="top" width="<?php echo $anchura_ca; ?>" height="<?php echo $altura_ca; ?>" style="background-image:url('<?php echo $vinculo_server_ca; ?>'); background-repeat: no-repeat;"></td>
                </tr>
                <tr>
                    <td valign="top" width="<?php echo $anchura_cu; ?>" height="<?php echo $altura_cu; ?>" style="background-image:url('<?php echo $vinculo_server_cu; ?>'); background-repeat: no-repeat;">ESCRIBA SU CUERPO</td>
                </tr>
                <tr>
                    <td valign="top" width="<?php echo $anchura_pi; ?>" height="<?php echo $altura_pi; ?>" style="background-image:url('<?php echo $vinculo_server_pi; ?>'); background-repeat: no-repeat;"></td>        
                </tr>
            </table>
        </div>



                    
        </textarea>

Despues, a través de un formulario, envío ese </textarea> a otra página llamada llamada mail_o_html.php, en donde guardo su contenido en una variable. Posteriormente, en un <textarea> , en esta última página, imprimo las etiquetas básicas de cualquier página HTML (<html>, <head>, <title>, <body>) y dentro de <body> hago un echo de la variable (la cual tenía un <div> con un <table>):

Código:

$cuerpo = $_POST['cuerpo_text'];//guardo el contenido el <textarea> que me viene de la otra página.


echo "<div align=\"center\">
    <textarea name=\"muestra_html\" style=\"width:95%; height:450px;\">
                        
    <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
        <html>
            <head>
                <title>Documento sin t&iacute;tulo</title>
                <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
            </head>
                    
                <body>
                                
                            
                ".stripslashes($cuerpo)."
                                    
                                    
            </body>
        </html>
                        
    </textarea></div>";
                        
                    
}

El problema que estoy teniendo es que cuando el proceso anterior lo hago desde Chrome u Opera, la impresión del código en el <textarea> es correcta, pero cuando lo hago desde el Firefox las URL de los background-image aparecen entre comillas dobles, en vez de simples y, por tanto, el código no funciona.

Como verá el "Código fuente" es correcto, yo indico comillas simples, pero Firefox me devuelve comillas dobles.

De todas formas, si uso htmlspecialchars(), si bien los backgroung-image aparecen con " el código funciona.

pateketrueke · #9 (**permalink**) 25/11/2010, 20:47

pues es curioso tu caso, y no me quise quedar con la duda...

Código PHP:

  <?php

 
$anchura_ca = 800;

$anchura_cu = 100;

$anchura_pi = 100;

 
$altura_ca = 100;

$altura_cu = 100;

$altura_pi = 100;

 
$vinculo_server_ca = 'URL';

$vinculo_server_cu = 'URL';

$vinculo_server_pi = 'URL';

 
if ( ! empty($_POST))

{

 
  $cuerpo = $_POST['cuerpo_text'];

 
  echo "<div align=\"center\">

      <textarea name=\"muestra_html\" style=\"width:95%; height:450px;\">

 
      <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">

          <html>

              <head>

                  <title>Documento sin t&iacute;tulo</title>

                  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">

              </head>

 
                  <body>

 
 
                  ".stripslashes($cuerpo)."

 
 
              </body>

          </html>

 
      </textarea></div>";

 
  exit;

}

 
?>

<form action="" method="post">

    <textarea cols="100" rows="40" class="ckeditor" name="cuerpo_text" style="width:<?php echo $anchura_ca; ?>px;height:500px;">

 
 
 
        <div>

            <table border="0" align="center" style="background-color:#FFF; border-collapse:collapse; margin-bottom:20px;">

                <tr>

                    <td valign="top" width="<?php echo $anchura_ca; ?>" height="<?php echo $altura_ca; ?>" style="background-image:url('<?php echo $vinculo_server_ca; ?>'); background-repeat: no-repeat;"></td>

                </tr>

                <tr>

                    <td valign="top" width="<?php echo $anchura_cu; ?>" height="<?php echo $altura_cu; ?>" style="background-image:url('<?php echo $vinculo_server_cu; ?>'); background-repeat: no-repeat;">ESCRIBA SU CUERPO</td>

                </tr>

                <tr>

                    <td valign="top" width="<?php echo $anchura_pi; ?>" height="<?php echo $altura_pi; ?>" style="background-image:url('<?php echo $vinculo_server_pi; ?>'); background-repeat: no-repeat;"></td>

                </tr>

            </table>

        </div>

 
 
 
 
        </textarea>

        <input type="submit"/>

</form>

acabo de hacer esta prueba con un solo archivo y en Firefox todo va perfecto!!

ya te decía que lo que dices no tiene sentido, lo he comprobado ya...

¿por que será que solo a ti te sale mal?

GNULinux · #10 (**permalink**) 25/11/2010, 21:12

Cita:

Iniciado por pateketrueke

pues es curioso tu caso, y no me quise quedar con la duda...

Código PHP:

  <?php

$anchura_ca = 800;
$anchura_cu = 100;
$anchura_pi = 100;

$altura_ca = 100;
$altura_cu = 100;
$altura_pi = 100;

$vinculo_server_ca = 'URL';
$vinculo_server_cu = 'URL';
$vinculo_server_pi = 'URL';

if ( ! empty($_POST))
{

  $cuerpo = $_POST['cuerpo_text'];

  echo "<div align=\"center\">
      <textarea name=\"muestra_html\" style=\"width:95%; height:450px;\">

      <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
          <html>
              <head>
                  <title>Documento sin t&iacute;tulo</title>
                  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
              </head>

                  <body>


                  ".stripslashes($cuerpo)."


              </body>
          </html>

      </textarea></div>";

  exit;
}

?>
<form action="" method="post">
    <textarea cols="100" rows="40" class="ckeditor" name="cuerpo_text" style="width:<?php echo $anchura_ca; ?>px;height:500px;">



        <div>
            <table border="0" align="center" style="background-color:#FFF; border-collapse:collapse; margin-bottom:20px;">
                <tr>
                    <td valign="top" width="<?php echo $anchura_ca; ?>" height="<?php echo $altura_ca; ?>" style="background-image:url('<?php echo $vinculo_server_ca; ?>'); background-repeat: no-repeat;"></td>
                </tr>
                <tr>
                    <td valign="top" width="<?php echo $anchura_cu; ?>" height="<?php echo $altura_cu; ?>" style="background-image:url('<?php echo $vinculo_server_cu; ?>'); background-repeat: no-repeat;">ESCRIBA SU CUERPO</td>
                </tr>
                <tr>
                    <td valign="top" width="<?php echo $anchura_pi; ?>" height="<?php echo $altura_pi; ?>" style="background-image:url('<?php echo $vinculo_server_pi; ?>'); background-repeat: no-repeat;"></td>
                </tr>
            </table>
        </div>




        </textarea>
        <input type="submit"/>
</form>

acabo de hacer esta prueba con un solo archivo y en Firefox todo va perfecto!!

ya te decía que lo que dices no tiene sentido, lo he comprobado ya...

¿por que será que solo a ti te sale mal?

Si, funciona perfectamente el código.

De todas formas, me falto aclarar algo que quizás tenga algo que ver. El primer <textarea>, cuyo contenido se envía a través de un formulario, representa un ckeditor. Si alguna vez usaste el ckeditor u algún otro, sabrás que para que se visualice una instancia del mismo en una determinada página, basta con declarar un <textarea> con id="ckeditor"" y referenciar el archivo .js que utiliza tal editor de texto.

Como entederás el contenido del <textarea> que se envía es el resultado de lo que se haga con el ckeditor que aparece en la página.

Quizás por ahí viene el problema, pero lo raro es que si el ckeditor fuera el que modificará las comillas, se debería ver reflejado en todos los navegadores y no solo en firefox.

No se, no entiendo que pasa ...

pateketrueke · #11 (**permalink**) 25/11/2010, 21:26

vamos a hacer lo siguiente...

ejecuta tu script de nuevo, y la variable que recibes del <textarea/> imprime la así...

Código PHP:

  header('Content-Type: text/plain; charset=UTF-8');
die(htmlspecialchars($cuerpo));

el resultado tal cual te sale muestra lo aquí, a ver que sucede... (:

la idea es que necesitamos saber como es que recibes exactamente el HTML...

GNULinux · #12 (**permalink**) 25/11/2010, 22:15

Cita:

Iniciado por pateketrueke

vamos a hacer lo siguiente...

ejecuta tu script de nuevo, y la variable que recibes del <textarea/> imprime la así...

Código PHP:

  header('Content-Type: text/plain; charset=UTF-8');

die(htmlspecialchars($cuerpo));

el resultado tal cual te sale muestra lo aquí, a ver que sucede... (:

la idea es que necesitamos saber como es que recibes exactamente el HTML...

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>F-Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="css/css.css"/>

<script src="script/login.js"></script>

</head>

	<body>
	
		 <div id="cabecera">

			<div id="cont_titulo">
			
				<div id="titulo">
				
					<img src="diseno/titulo.png" />
					
				</div>
				
			</div>	
			
			<div id="cont_tuestilo">
			
				<div id="tuestilo">	
					<img src="diseno/tuestilo.png" />
				</div>
				
			</div>

		 	<div id="cont_logo">
		 	
				<div id="logo">
					<img src="diseno/logo.png" />
				</div>
		 	
			</div>		
			
			<div id="cont_menu">
	
				<div id="links_menu_center">
					<a href="index.php">Home</a> <a href="#">Configuraci�n</a><a href="#">Contacto</a>
				</div>
				
				<div id="links_menu_right">
					<span id="muestra_user"><strong>Bienvenido: </strong>admin</span> </div>
				
		   </div>
					
		</div>

		<div id="contenido">
			
			<center>

					

				&lt;div&gt;
	&lt;table align=&quot;center&quot; border=&quot;0&quot; style=&quot;background-color: rgb(255, 255, 255); border-collapse: collapse; margin-bottom: 20px;&quot;&gt;
		&lt;tbody&gt;
			&lt;tr&gt;
				&lt;td height=&quot;170&quot; style=&quot;background-image: url(&amp;quot;http://promza.dyndns.org/sistema_plantilla/cabeceras/cabecera.jpg&amp;quot;); background-repeat: no-repeat;&quot; valign=&quot;top&quot; width=&quot;901&quot;&gt;
					&amp;nbsp;&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td height=&quot;986&quot; style=&quot;background-image: url(&amp;quot;http://promza.dyndns.org/sistema_plantilla/cuerpos/cuerpo.jpg&amp;quot;); background-repeat: no-repeat;&quot; valign=&quot;top&quot; width=&quot;901&quot;&gt;
					ESCRIBA SU CUERPO&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td height=&quot;113&quot; style=&quot;background-image: url(&amp;quot;http://promza.dyndns.org/sistema_plantilla/pies/pie.jpg&amp;quot;); background-repeat: no-repeat;&quot; valign=&quot;top&quot; width=&quot;901&quot;&gt;
					&amp;nbsp;&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
&lt;/div&gt;

masterpuppet · #13 (**permalink**) 26/11/2010, 02:36

Me parece que es un bug del ckeditor ticket, si en tu sistema los usuarios pueden embeber codigo html deberias usar alguna libreria de filtrado, te recomiendo HTMLPurifier.

Salu2.

GNULinux · #14 (**permalink**) 26/11/2010, 07:38

Cita:

Iniciado por masterpuppet

Me parece que es un bug del ckeditor [URL="http://cksource.com/forums/viewtopic.php?f=11&t=20647"]ticket[/URL], si en tu sistema los usuarios pueden embeber codigo html deberias usar alguna libreria de filtrado, te recomiendo [URL="http://htmlpurifier.org/"]HTMLPurifier[/URL].

Salu2.

Estuve leyendo lo que pasaste y documentación que aparecía en el mismo link, pero no doy con la solución. Seguiré investigando, pero necesito solucionarlo momentáneamente, por lo que se me ocurrió reemplazar los " por ' (comillas simples) con preg_replace(), el tema es que no logro entender como indicar los patrones. Si alguien me dá una mano con eso, se lo agradezco.

masterpuppet · #15 (**permalink**) 26/11/2010, 08:48

Mmmm, el problema es ckeditor, en todo caso hackea el js, aplicaste el patch y sigue igual?.

GNULinux · #16 (**permalink**) 26/11/2010, 09:59

Cita:

Iniciado por masterpuppet

Mmmm, el problema es ckeditor, en todo caso hackea el js, aplicaste el [URL="http://dev.ckeditor.com/attachment/ticket/6645/6645.patch"]patch[/URL] y sigue igual?.

Acabo de hacer las modificaciones, pero sigue el problema. Lo que no entiendo es porque en otros navegadores funciona todo correctamente. Si es problema del ckeditor, ¿no tendría que mostrarse mal el código también en los otros navegadores?

GNULinux · #17 (**permalink**) 26/11/2010, 11:08

Si alguien me explica como remplazar:

url(" por url('

y

") por ')

se lo agradecería. Con str_replace no logro hacerlo y preg_replace() no lo comprendo.

masterpuppet · #18 (**permalink**) 26/11/2010, 12:09

A ver si asi te sirve:

Código PHP:

Ver original$search  = array('("', '")');
$replace = array('(\'', '\')'); 
 
str_replace($search, $replace, $subject);

Salu2

GNULinux · #19 (**permalink**) 26/11/2010, 18:07

Cita:

Iniciado por masterpuppet

A ver si asi te sirve:

Código PHP:

Ver original$search  = array('("', '")');
$replace = array('(\'', '\')'); 
 
str_replace($search, $replace, $subject);

Salu2

No me funcionó, así que hice lo siguiente:

Código PHP:

  $cuerpo = str_replace("&quot;", "'", $cuerpo);

Esto último solucionó el inconveniente que tengo; cambia perfectamente los " por comillas simples.

Estuve investigando más y hay algunos programadores con exactamente el mismo problema. Algunos le echan la culpa a firefox y otros a ckeditor.

Gracias a todos los que respondieron, por su tiempo y buena onda. Espero poder ayudarlos a ustedes alguna vez.