javascript location.href between location.assign

Question

When I study the source code of vue-router, I find that, it uses location.assign('xxx') to change location, not the way I always use location.href = 'xxx'. The source code is here, and I've pasted it below:

export function pushState (url?: string, replace?: boolean) {
  saveScrollPosition()
  // try...catch the pushState call to get around Safari
  // DOM Exception 18 where it limits to 100 pushState calls
  const history = window.history
  try {
    if (replace) {
      // preserve existing history state as it could be overriden by the user
      const stateCopy = extend({}, history.state)
      stateCopy.key = getStateKey()
      history.replaceState(stateCopy, '', url)
    } else {
      history.pushState({ key: setStateKey(genStateKey()) }, '', url)
    }
  } catch (e) {
    window.location[replace ? 'replace' : 'assign'](url)
  }
}

I want to find out why they prefer location.assign() to location.href, after googling around, it turns out that there is only one security difference between them.

The location.assign() has some security limits

So, I still don't understand why the vue-router team choose location.assign() over location.href.

Here are some related articles:

From the same article you linked, `If you want to allow the user to navigate to the previously loaded page using the back button then use the assign() method.` The security limits do not apply to the page, since the domain and page is the same. — Coding Otaku, Aug 01 '21 at 11:07
@CodingOtaku thx for your reply. So what's the difference between `location.assign()` and `location.href` except security limit — Jess, Aug 01 '21 at 13:47
Answers from [Difference between window.location.href, window.location.replace and window.location.assign](https://stackoverflow.com/q/7703689/3579960) (and the comments) has discussed this. I feel that they are much better than any explanation I can provide. — Coding Otaku, Aug 01 '21 at 13:57
In a nutshell, they are almost the same, the `.assign()` makes it a little more secure and easier to be called from tests that mock things. If I'm wrong, anyone can correct me. `.href` is faster since it is a direct assignment, `.assign()` is slower as it is acting like a setter method. I haven't seen any differences between them other than how it is called. — Coding Otaku, Aug 01 '21 at 14:18
@CodingOtaku according to the MND, which says "If the assignment can't happen because of a security violation, a DOMException of the SECURITY_ERROR type is thrown. This happens if the origin of the script calling the method is different from the origin of the page originally described by the Location object, mostly when the script is hosted on a different domain." . It seems `location.href` does not have the same security violation — Jess, Aug 07 '21 at 13:24
Correct, what it means is that `location.href` does not check for any security error. From the documents for [location properties](https://developer.mozilla.org/en-US/docs/Web/API/Location#properties) "It can be set from a different origin than the associated document." `location.assign()` does a security check before the change. Thus, I believe `assign()` is just a wrapper around the `href` property to make URL changes a bit more trustworthy. — Coding Otaku, Aug 08 '21 at 06:48

javascript location.href between location.assign

0 Answers0