How to make a progress bar increase in size by increasing the width but without any inline style so it doesn't upset CSP

Question

It seems fairly straight forward, there's a few options I'm thinking of but W3 says to use inline style. It's weird that a resource as trusted as W3 would tell people to do something that is not standardised and a security issue. I wondered if a pro could tell me the the official stance on this subject. https://www.w3schools.com/w3css/w3css_progressbar.asp see they have used inline style for the width. It's what I have currently implemented but want to change.

WC3 explains it really simple, its very easy to implement. Simply increase the width inline style inside a javascript loop and you have a basic progress bar. But, The thing is that inline style is a hotspot for XSS attacks and so because I'm using CSP I've eliminated all inline style and script, except my progress bars. I'm a little stuck as how the best method to do this is.

Interestingly, inline style which is added from a safe script is allowed and doesn't upset CSP, however, in any documentation i have found about this subject, 99 times out of 100 it will say clearly that inline style is a security risk, of course it also depends on other factors but to be inline with best practice and safety, I've opted to remove everything even that which is done on the live dom.

So how could I increase the width inside a loop without using inline style?

This Link Content Security Policy vs variable inline style (CSP vs CSS) suggests that its ok to use inline style on the live Dom, as suggested in other articles. You can't use el.setAttribute but you can use el.style. It also says that when CSP level 3 is more widely adopted this wont be ok. Which I'm not sure if its right or not, I'm pretty sure chrome latest has CSP3 and I'm testing in that and the style I'm using is still accepted. I don't really see any definite answer on this. @Thomas what do you take from that link? This is the comment that I keep finding dotted around the internet in different ways. "That's still an inline style, regardless of how you represent it. Just because you are getting away with it now doesn't mean that you will when CSP Level 3 is adopted". Is this a red herring or am I understanding right that just because CSP isn't having a paddy now, it will in the future. Or more to the point, it's just an added security risk right? I keep flitting between leaving it and doing something about it, depending on what article I've just read. lol Someone must know the official answer?

user_11603613 · Answer

As written in the comments There is no way to do this. It's not possible. Stop wasting your time trying and move on to the next task.

if your still interested then read down, the solution below is not a solution just so you know. skip to the comments.

To put it simply, i've edited the stylesheet rule rather than add inline style.

// 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; 
}

How to make a progress bar increase in size by increasing the width but without any inline style so it doesn't upset CSP

1 Answers