将URL哈希参数值直接分配给Javascript变量是否不安全？

Question

I'm looking at an article and on writing wizards in React, and having each step being associated with a URL. The author uses the "hash" part of the URL to specify the step, and assigns to this.state.currentStep . They comment that this is unsafe.

class BasicWizard extends React.Component {
  constructor() {
    this.state = {
      steps: []
      currentStep: location.hash //obvs this is an unsafe way to do this -- this example is for conceptual purposes only
    };
  }

My question:

why is this unsafe? My guess is it's a XSS hazard, but wouldn't this input be converted to a string by React anyway? The way I see it, this would only be unsafe if I were using _dangerouslySetInnerHTML somewhere.

If it is unsafe: how to make safe?

Answer 1

Location.hash is not unsafe because it returns just a string. See here: https://www.w3schools.com/jsref/prop_loc_hash.asp

So what makes it dangerous? It becomes dangerous when you use it dangerously. Dangerous ways of using it:

• Merge it unescaped with your html (_dangerouslySetInnerHTML)
• Calling eval() on it
• Use this input unescaped in a sql query
• ...

But doing sth. like

if(location.hash === 'login') {
}

or assigning it to a variabe is not unsafe. What you do with that variable although can be unsafe (see above list).