Firefox Security error code: 1000

[ylodis]

Hola,

Mozilla Firefox es estupendo, pero tratamiento de JavaScript es como mínimo mejorable.

En un ficheros js tengo la siguiente instrucción :

Código:

regla=document.styleSheets[0].cssRules;

Que en Firefox 3.6 da siempre el siguiente error :

Security error" code: "1000

Este problema no se da ni en IE, ni en Chrome, ni en Opera ni en Safari y se produce al intentar acceder a las propiedes de las hojas de estilo en el DOM (de cambiarlas que es lo que quiero, ya no hablemos).
Tras seguir el tema en inglés y leer el soporte de Mozilla, estos reconocen el bug y dicen que intentaran corregirlo para la proxima version, pero no he encontrado forma de hacerlo de otra manera con la actual.

¿ Sabe alguien como acceder y cambiar las propiedades de las hojas de estilo desde JS sin que Firefox se rompa ?

[zerokilled]

¡es bien curioso porque ese código nunca me ha dado error! buscando por internet acerca de ese error, he encontrado que no esta muy bien documentado pese a multiples personas que experimentan el mismo error. según pude leer en el soporte de mozilla sucede cuando intentas acceder a un recurso externo al dominio propio. o sea, en tu caso aparentemente estas cargando una hoja de estilo desde un dominio ajeno y luego con el DOM intentas modificiarlo. lo comprobe y ciertamente me genera dicho error. parece que firefox extiende la Política del mismo origen de javascript hacia otros recursos como las hojas de estilos. en mi opinion, no veo como eso puede considerarse un error de seguridad.

[Tecna]

Buenas,

normalmente no es muy útil trabajar directamente sobre las hojas de estilos porque éstas suelen tener numerosas reglas y algunas pueden hacer referencia a la misma propiedad del mismo elemento con la misma o más profundidad en la declaración del selector, teniendo que determinar el valor computado con la prevalencia que dicta el orden en cascada de las propiedades, es decir que si queremos cambiar un elemento en concreto aunque lo pongamos al final de la hoja de estilos puede que el estilo no se aplique si hay anteriormente alguna regla con más peso especifico que modifique la misma propiedad de ese mismo selector, como por ejemplo querer modificar los enlaces usando el selector "a" si previamente se ha definido ese mismo estilo con "li a", que tendría más peso al definirse con 2 selectores y sería el que prevalecería. Además al incluir y borrar nuevas reglas puede que el orden de éstas dentro del array cssRules cambie y también su longitud con lo que aunque definamos las nuevas reglas siempre al final, habría que conocer previamente la propiedad length de cssRules. Por otro lado IE, no se en las últimas versiones, pero tenía sus propios métodos y cambiaba el nombre del array que guarda las reglas leídas de la hoja de estilos por lo que siempre nos dará más quebraderos de cabeza mantener la compatibilidad que si trabajamos directamente con la propiedad style del elemento que queramos cambiar.

La única ventaja que veo a trabajar con las hojas de estilo directamente es que así se puede tener acceso a los valores iniciales de las propiedades de cada elemento aunque éstas se hayan definido en hojas de estilos externas (que es lo más recomendable) o mediante el atributo style, que no ocurre con la propiedad style del objeto CSS2Properties en la que no están accesibles a no ser que se definan con la etiqueta <style> o con secuencias de comandos dentro del propio javascript. Con cssRules podemos tener un control completo sobre el orden de cascada y sobre todas las reglas que afectan a un determinado elemento, algo parecido a lo que hace firebug. Pero para modificar estilos concretos de elementos o grupos de elementos concretos es mucho mas eficaz la propiedad style de CSS2Properties. Y para obtener el valor computado que es el que realmente se aplica, si hay varias reglas por ejemplo, el metodo getComputed()

Los ficheros de las hojas de estilo en realidad no se modifican, lo que se modifica es el array cssRules donde se guardan las reglas del fichero css, debido a las restricciones de seguridad que tiene javascript en la parte del cliente que no permite leer ni mucho menos escribir o borrar archivos o directorios. Como bien dijo @Zerokilled, es cierto que sólo da ese error cuando es un recurso externo, pero no sólo pasa en firefox, o por lo menos a mi. Y creo que está bien que así sea porque si que se podría incluir código javascript dentro de una regla css y posteriormente ejecutarlo aunque seguirá teniendo las restricciones propias de javascript. He hecho un ejemplo.

Código Javascript:

// ejemplo para incluir codigo javascript dentro de una regla css creada con insertRule
// By Tecna
 
function init()
{
    var reglas = document.styleSheets[0].cssRules;
    var css = document.getElementById('css');
    var js = document.getElementById('js');
    css.onclick = function () {nuevoCSS(reglas, css, js);};
    js.onclick = function () {nuevoJS(reglas);};    
}
 
 
window.onload = init;
 
function nuevoCSS(reglas, css, js)
{
    document.styleSheets[0].insertRule ('#css {content: \"alert(\'alert insertado como propiedad content en fichero css\')\"; background: #f0f;}', 1);
    alert('nueva regla para el selector #css con codigo js incluido: ' + reglas[1].cssText);
    js.style.visibility = 'visible';
}
 
function nuevoJS(reglas)
{
    var scriptI = document.createElement('script');
    scriptI.innerHTML = reglas[1].cssText.split('"')[1];
    document.body.appendChild(scriptI);
}
 

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Incluir propiedad en hoja de estilos con javascript incluido</title>
    <link rel="stylesheet" href="fichero.css" type="text/css">
    <script type="text/javascript" src="fichero.js"></script>
</head>
<body>
    <a href="#" id="css">incluir css con js</a>
    <a href="#" id="js">ejecutar js del css</a>
    <script>document.getElementById('js').style.visibility = 'hidden';</script>
</body>
</html>
 

Código CSS:

a {
    display: block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    background: #ff0;
    float: left;
    margin: 20px;
    text-align: center;
}
 

[ylodis]

¡ Chapeau !.
Te felicito por tu ejemplo y por los conocimientos que demuestras. Te agradecería que explicaras un poco el ejemplo, especialmente el funcionamiento de la función nuevoJS y el cuadradito amarillo que aparece al pulsar el primero.

Por mi parte he tenido muchos problemas para acceder a las propiedades CSS (o al array correspondiente) y aunque he conseguido que me funcione para Firefox, ahora la guerra la tengo con Chrome, que me dice que las cssRules valen null y consecuentemente no me deja cambiarlas.

En último termino quiero ajustar el tamaño de una clase CSS una vez cargada la página para que se ajuste al navegador del visitante, pero no dejo de tener tropiezos.
Ahora me encuentro con que Chrome dice que cssRules es Null en la instrucción

Código:

regla=document.styleSheets[NHoja].cssRules

para Nhoja=0

Aclaro que esto del DHMTL no lo controlo mucho y ando bastante perdido, seguro que estoy cometiendo algún error garrafal, pero no consigo verlo. He abierto otro post donde digo la URL de la prueba en funcionamiento

http://www.forosdelweb.com/f13/cambi...chrome-826916/

Ayuda porfa

[zerokilled]

esta respuesta viene del tema http://www.forosdelweb.com/showthread.php?t=826916. ylodis, aunque el navegador es distinto, el problema sigue siendo el mismo. por lo que preferiblemente deberias mantener un solo tema.

como ya te indicaba, eso ocurre porque estas tratando de leer los estilos de un documento externo al dominio donde se carga. no tenia idea que lo mismo sucediera en chrome y sabra dios en que otro navegador mas. reitero que me parece raro porque -si bien recuerdo- en versiones anteriores de firefox nunca tuve problema. curiosamente en iexplorer8 sigue funcionando. pero claro, en iexplorer se utilizan otras propiedades un tanto distintas.

en todo caso, me he fijado en una discrepancia muy importante mientras realizaba la prueba en iexplorer8. iexplorer reporta que tienes 3 hojas de estilos en este orden:
http://www.portaltarot.com/css/estilos.css
http://www.portaltarot.com/css/estConsTel.css
http://s7.addthis.com/static/r07/widget41.css

mientras que chrome reporta 4 hojas:
http://s7.addthis.com/static/r07/widget41.css
http://www.portaltarot.com/css/estilos.css
http://www.portaltarot.com/css/estConsTel.css
HTMLStyle (elemento <style> dentro del documento)

lo que quiero que te fijes es en el orden que aparecen las hojas de estilos y lo analices frente al codigo javascript. el punto es que en una de las funciones determinas cual es la hoja que vas a modificar segun el navegador -o al menos eso es lo que me parece que hace la funcion-. en fin, al menos en chrome, el resultado es document.styleSheets[0] el cual corresponde a la hoja externa. segun puedo ver, esa hoja externa viene de publicidad integrada en el sitio.

[ylodis]

Gracias por el interés Zerokilled.

Abrí otro post porque cambiando indices de arrays en

Código:

    regla=document.styleSheets[NHoja].cssRules
    regla[0].style.height=alturaDisp;

conseguí que dejara de dar error 1000 y que aparentemente funcionara con Firefox, pero está claro que el problema sigue ahí.
Hasta donde veo los diferentes navegadores cargan las hojas de estilo en diferente orden y a su manera, especialmente cuando llamas a un recurso externo a tu dominio (en mi caso addthis, sistema para que la gente recomiende la página en redes sociales). Por cierto ¿ Cómo ves el orden de las hojas en cada navegador ? Cuando dices que IE o Chrome reporta las hojas de estilo que tengo, ¿ dónde lo miras ?

De cualquier forma, si fuera un problema del orden en que carga las hojas se arreglaría ajustando índices de arrays, pero he probado a cambiar índices y en Chrome para valores 0,1,2, cuando ejecuto la instrucción

Código:

regla=document.styleSheets[NHoja].cssRules

regla vale null y por tanto cualquier propiedad de hojas de estilo se me vuelven inaccesibles y ahora mi duda es ¿ Cómo hago para que funcione en todos los navegadores ? (ahora estoy con Chrome).

[Tecna]

Buenas,

por todos los problemas que ya se han comentado es por lo que decía que no es útil trabajar con hojas de estilo, es mejor acceder al elemento con cualquiera de los métodos que proporciona el DOM y cambiar el estilo con la propiedad style directamente al elemento no en la hoja de estilos. Además hay otra cosa que no se ha comentado, si cambias la propiedad cambiando la hoja de estilos el valor que guardaría la propiedad style sería el inicial si le hubiera o nada si no estaba previamente declarado en una hoja de estilos externa o con la etiqueta <style> que funciona como si también fuera una hoja de estilos externa por eso en Chrome salen 4 que es lo correcto, es decir que cambiando la hoja de estilos no se actualiza el valor de la propiedad style y eso nos puede causar problemas y errores en los cálculos de posiciones por ejemplo, difíciles de detectar si no sabemos que esto funciona así. Por hoja externa me refiero a ficheros .css independientes pero dentro del mismo dominio para que no haya problemas con la política del mismo origen porque si que se puede inyectar código desde una hoja de estilos y si está en otro dominio supone un agujero de seguridad. En todas las pruebas que he hecho incluyendo varias versiones de firefox salía ese error.

El ejemplo no tiene mucho que explicar, son dos funciones controladas por el evento onclick una crea una nueva regla css con código javascript incluido y la otra lo ejecuta, es sólo un ejemplo. Por lo que muestras en el último código supongo que sabes como obtener la altura disponible pero no muestras el valor de esa variable, sólo recordarte que debe ser una cadena.

[ylodis]

Gracias por la ayuda Tecna.

La verdad es que de JavaSript sé poquito y por ello me cuesta seguirte, entiendo que en lugar de cambiar las reglas CSS existentes, añades vía DOM (que estudie anteayer) otras nuevas que pudieran incluso ocupar el espacio ocupado por otras anteriores (confirma esto y si puedes cita algún link o manual donde hable del tipo de modificaciones CSS que sugieres).

En cualquier caso en mi caso y tras haber calculado la altura disponible, ¿ Cómo puedo cambiar la altura de una div originalmente definida a 100% por un determinado alto en Pixeles ?

[Panino5001]

Ahora que queda claro que cssRules tiene problemas, un par de tips:
Obtener los estilos computados:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&#237;tulo</title>
<style>
#pp{background-color:red; width:100px; height:100px;}
</style>
<script>
function t(id){return document.getElementById(id);} 
function css(id,prop){ 
    if(window.getComputedStyle){ 
        return document.defaultView.getComputedStyle(t(id),null).getPropertyValue(prop);
    }else{ 
        var re = /(-([a-z]){1})/g; 
        if (prop == 'float') prop = 'styleFloat'; 
        if (re.test(prop)) { 
            prop = prop.replace(re, function () { 
                return arguments[2].toUpperCase(); 
            }); 
        } 
        return t(id).currentStyle[prop] ? t(id).currentStyle[prop] : null; 
    } 
}  
onload=function(){
    var color=css('pp','background-color');
    alert(color);
}


</script>
</head>

<body>
<div id="pp"></div>
</body>
</html> 
  

Agregar una nueva hoja de estilos:

Código PHP:

  <script> 
function loadCss(css) { 
    if(document.getElementById('estilos')) 
        document.getElementsByTagName('head')[0].removeChild(document.getElementById('estilos'));
      var x = document.createElement("link"); 
    x.rel="stylesheet"; 
    x.href=css; 
    x.id="estilos"; 
      document.getElementsByTagName('head')[0].appendChild(x);     
} 
window.onload=function(){loadCss('estilos_1.css');}     
</script> 
  

Agregar cualquier regla en cualquier momento:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&#237;tulo</title>
<script>
function addCss(cssCode,i) { 
    control=document.getElementById(i) 
    if(control) 
        document.getElementsByTagName("head")[0].removeChild(control) 
    var styleElement = document.createElement("style"); 
    styleElement.type = "text/css"; 
    if (styleElement.styleSheet) { 
        styleElement.styleSheet.cssText = cssCode; 
    } else { 
        styleElement.appendChild(document.createTextNode(cssCode)) 
    } 
    styleElement.id =i; 
    document.getElementsByTagName("head")[0].appendChild(styleElement); 
} 
onload=function(){
    addCss('#pp{background-color:red; width:100px; height:100px;}',new Date().getTime());
}
</script>
</head>

<body>
<div id="pp"></div>

</body>
</html> 
  

[ylodis]

Hola,

Gracias a todos por la ayuda, he conseguido que funcione lo que parecía imposible.
Ahora va en todos los navegadores (IE, FF, Chrome, Safari, Opera).

Zerokilled, no puedo por menos que deshacerme en elogios hacia tu interes y dedicación, Tecna, haces honor a tu nombre y Panino5001 has sabido rematar perfectament la jugada.
Por si le sirve de ayuda a otros en el futuro, al final incluyo la función con el código necesario para cambiar la altura en todos los navegadores.

No obstante, en cuanto arreglas algo surge un nuevo problema y lo malo es que sólo me funciona la primera vez que entra en la página y no al redimensionarla con PF11. Como creo que el post puede ser interesante para otra gente y no quisiera liarlo mezclandolo con otro tema he abierto un nuevo post en : http://www.forosdelweb.com/f13/onres...9/#post3495967

Codigo de la función para cambiar altura en todos los navegadores :

Código:

//Ajustar alto y flechitas del Navegador
function comprobarAlto() { 
	if (window.innerHeight){ 
		procMoz();		
	}else{   
		procIE();
	}
	
	window.onresize=function() { location.reload(); };
}

function procMoz() { 
	espacio_scroll = window.innerHeight - 57;//Altura disponible - 57 pixeles de cabecera
	alturaDisp = espacio_scroll + "px";
	regla='.contenedor{height:' + espacio_scroll + 'px;}';	
	addCss(regla,new Date().getTime());
}
function procIE() {
	 //Navegadores basados en IExplorer, no tengo innerHeight 		
	 espacio_scroll = document.body.clientHeight - 37;//Altura disponible en IE
	 alturaDisp = espacio_scroll + "px";
	 regla=document.styleSheets[0].rules;
	 regla[3].style.height=alturaDisp;
}
function addCss(cssCode,i) { 
    control=document.getElementById(i) ;
    if(control) 
        {document.getElementsByTagName("head")[0].removeChild(control); } 
    var styleElement = document.createElement("style"); 
    styleElement.type = "text/css"; 
    if (styleElement.styleSheet) { 
        styleElement.styleSheet.cssText = cssCode; 
    } else { 
        styleElement.appendChild(document.createTextNode(cssCode));
    } 
    styleElement.id =i; 
    document.getElementsByTagName("head")[0].appendChild(styleElement); 
}

[Tecna]

Buenas,

aunque la forma de incluir las nuevas reglas mediante la creación de un nuevo elemento, ya sea link o style, evita tener que usar métodos, que aunque están definidos en el estandar, explorer no sigue, y nos obligaría a incluir en nuestro código una alternativa para ese navegador, eso no evita los problemas inherentes del lenguaje CSS relacionados con el orden en cascada de las hojas de estilos. Es por eso por lo que no es práctico trabajar directamente sobre hojas de estilos. Por ejemplo:

Siguiendo con el ejemplo de @Panino5001 y modificándolo un poco (espero que no te importe), si al div con id 'pp' al que vamos a aplicar la nueva regla css para modificar las propiedades width, height y background-color le hubiéramos definido previamente otros valores para esas propiedades: a height mediante el atributo style, a width mediante la etiqueta <style></style> y a background-color mediante la propiedad .style.backgroundColor, al aplicar la nueva regla con la que suponemos queremos cambiar los 3 valores, sólo se cambiará el de la propiedad width ya que los estilos en línea (atributo y propiedad style) tienen prioridad en el orden de cascada y lo que se incluye con la etiqueta style es como si se hiciera en una hoja de estilos externa y modifica el valor existente por incluirlo después, ya que prevalece el último valor declarado (si lo incluyeramos antes de la etiqueta que ya existe tampoco cambiaría).

Si definimos los estilos como ficheros .css o con la etiqueta <style> no dispondríamos de su valor a través de la propiedad .style y para conocer estos valores tendríamos que recurrir a las estilos computados. Como se ve en la función css del ejemplo de Panino explorer también tiene sus propias propiedades y esto también complica nuestro código. Además el estilo computado es el valor calculado después de analizar todas las reglas que están afectadas por ese estilo para ese elemento y de pasar a absolutas todas las medidas y obliga a hacer más cálculos ya que cada vez que cambie una propiedad habría que volver a calcularlo.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
 
<script>
function addCss(cssCode,i) { 
    var control=document.getElementById(i) 
    if(control) 
        document.getElementsByTagName("head")[0].removeChild(control) 
    var styleElement = document.createElement("style"); 
    styleElement.type = "text/css"; 
    if (styleElement.styleSheet) { 
        styleElement.styleSheet.cssText = cssCode; 
    } else { 
        styleElement.appendChild(document.createTextNode(cssCode)) 
    } 
    styleElement.id =i; 
    document.getElementsByTagName("head")[0].appendChild(styleElement); 
} 
 
function t(id){return document.getElementById(id);} 
 
function css(id,prop){ 
    var valor;
    if(window.getComputedStyle){ 
        valor = window.getComputedStyle(t(id),null).getPropertyValue(prop);
    }
    else{ 
        var re = /(-([a-z]){1})/g; 
 
        if (re.test(prop)) { 
            prop = prop.replace(re, function () { 
                return arguments[2].toUpperCase(); 
            }); 
        } 
        valor = t(id).currentStyle[prop] ? t(id).currentStyle[prop] : null; 
    } 
    
    return valor;
}  
 
onload=function(){
 
     t('pp').style.backgroundColor = 'yellow'; <!-- definicion original prop. background-color -->
 
     <!-- calculamos los valores computados originales -->
     var heightCompu = css('pp','height'); <!-- definido con atribute style -->
     var widthCompu = css('pp', 'width'); <!-- definido con etiqueta <style></style> -->
     var backgCompu = css('pp', 'background-color'); <!-- definido con propiedad .style -->
     
     alert('height computado original: ' + heightCompu + ' height con style: ' + t('pp').style.height);
     <!-- el valor de la prop. style.width sale en blanco porque se definió como hoja de estilos externa -->
     alert('width computado original: ' + widthCompu + ' width con style (sale en blanco): ' + t('pp').style.width);
     alert('background computado original: ' + backgCompu + ' background con style: ' + t('pp').style.backgroundColor);
     
     <!-- añadimos una nueva regla a la hoja de estilos mediante una nueva etiqueta <style></style> -->
    addCss('#pp{background-color:red; width:20%; height:100px;}',new Date().getTime());
    
     <!-- solo cambia la prop. width por la prioridad de la cascada de las hojas de estilo --> 
    alert('nuevo height computado: (no cambia) ' + heightCompu + ' height con style: ' + t('pp').style.height);
    <!-- el valor de la prop. style.width sigue saliendo en blanco porque se ha cambiado en la hoja de estilos externa -->
     alert('width computado: (cambia pero no se ha actualizado) ' + widthCompu + ' width con style (sigue en blanco) : ' + t('pp').style.width);
     alert('background computado: (no cambia) ' + backgCompu + ' background con style: ' + t('pp').style.backgroundColor);
 
     <!-- para disponer del valor del width a través de .style.width habría que usar esa prop. para cambiar el valor -->
     t('pp').style.width = '40%';
     
     alert('width computado: (no se actualiza) ' + widthCompu + ' width con style (valor correcto): ' + t('pp').style.width);
     
    <!-- hay que volver a calcular los valores computados  -->
     widthCompu = css('pp', 'width');
     
     alert('width computado: (actualizado) ' + widthCompu + ' width con style (valor correcto): ' + t('pp').style.width);
     
}
</script>
<style>
#pp {width: 30%;}
</style>
</head>
 
<body>
<div id="pp" style="height:200px;"></div>
 
</body>
</html>