Parece bastante sencillo, hay algunas opciones en las que estoy pensando, pero W3 dice que use el estilo en línea. Es extraño que un recurso tan confiable como W3 le diga a la gente que haga algo que no está estandarizado y es un problema de seguridad. Me preguntaba si un profesional podría decirme la postura oficial sobre este tema. https://www.w3schools.com/w3css/w3css_progressbar.asp ver que han usado el estilo en línea para el ancho. Es lo que tengo implementado actualmente pero quiero cambiar.
WC3 lo explica muy simple, es muy fácil de implementar. Simplemente aumente el ancho del estilo en línea dentro de un bucle de javascript y tendrá una barra de progreso básica. Pero, la cuestión es que el estilo en línea es un punto de acceso para los ataques XSS y, como estoy usando CSP, eliminé todo el estilo y el script en línea, excepto mis barras de progreso. Estoy un poco atascado en cuanto a cuál es el mejor método para hacer esto.
Curiosamente, el estilo en línea que se agrega desde un script seguro está permitido y no molesta a CSP, sin embargo, en cualquier documentación que haya encontrado sobre este tema, 99 de cada 100 veces dirá claramente que el estilo en línea es un riesgo de seguridad, de Por supuesto, también depende de otros factores, pero para estar en línea con las mejores prácticas y la seguridad, he optado por eliminar todo, incluso lo que se hace en vivo.
Entonces, ¿cómo podría aumentar el ancho dentro de un bucle sin usar el estilo en línea?
Esta Política de seguridad de contenido de enlaces frente al estilo en línea variable (CSP frente a CSS) sugiere que está bien usar el estilo en línea en el Dom en vivo, como se sugiere en otros artículos. No puede usar el.setAttribute pero puede usar el.style. También dice que cuando se adopte más ampliamente el nivel 3 de CSP, esto no estará bien. Lo cual no estoy seguro de si es correcto o no, estoy bastante seguro de que la última versión de Chrome tiene CSP3 y lo estoy probando y el estilo que estoy usando todavía se acepta. Realmente no veo ninguna respuesta definitiva sobre esto. @Thomas, ¿qué sacas de ese enlace? Este es el comentario que sigo encontrando repartido por Internet de diferentes maneras. "Ese sigue siendo un estilo en línea, independientemente de cómo lo represente. El hecho de que ahora se salga con la suya no significa que lo hará cuando se adopte el nivel 3 de CSP". ¿Es esto una pista falsa o estoy entendiendo bien que solo porque la CSP no está teniendo un arrozal ahora, lo tendrá en el futuro? O más concretamente, es solo un riesgo de seguridad adicional, ¿verdad? Sigo revoloteando entre dejarlo y hacer algo al respecto, dependiendo del artículo que acabo de leer. lol Alguien debe saber la respuesta oficial?
Como está escrito en los comentarios No hay manera de hacer esto. No es posible. Deja de perder el tiempo intentándolo y pasa a la siguiente tarea.
si todavía está interesado, lea, la solución a continuación no es una solución solo para que lo sepa. salta a los comentarios.
En pocas palabras, edité la regla de la hoja de estilo en lugar de agregar un estilo en línea.
// this gets the style sheets loaded in the dom as an array var sheets = document.styleSheets; //this gets the rules in the form of an array from the first sheet var rules = sheets[0].cssRules || sheets[0].rules; // this will be used to mark every iteration of the progress loop. var i = 0; // this fires up the function below progressTimer(); function progressTimer(){ // this sets a timout every 10th of a second setTimeout(function(){ // this is used to mark a percentage of progress. In this case because the loop runs every 10th of a second, this will represent 1% var newwidth = ++i; //this is setting the new width of the progress bar inside the style sheet // NOTE!!! this is instead of setting element.style.prop = val (which is still allowed from a trusted source but probably will break in the future maybe depending on who knows what.) and definately don't do this element.setAttribute(style, ".somerule{prop:val;}"); as that flag an error from CSP rules[1].style.width = newwidth+'%'; //this checks if we have reached 100% yet if(newwidth < 100){ // if we have then loop again in a 10th of a second progressTimer(); }else{ // we are at 100% // reset the progress width marker i = 0; // reset the progress width in the style sheet rules[1].style.width = '0%' //run it again just for fun progressTimer(); } },100); } .barouter{ border:solid grey thick; width:100%; } .barinner{ height:20px; background:yellow; width:0px; -transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; } <div class="barouter"> <div class="barinner"></div> </div>