A cross-origin url cannot be redirected to if "externalLinkTarget" is set to "_self" and "routerMode" is set to "history"

[ustc-zzzz]

Bug Report

Steps to reproduce

Set the options firstly:

window['$docsify'] = {
  routerMode: 'history',
  externalLinkTarget: '_self'
}

Then write a link whose url is from another domain:

Example: [example.com](https://example.com/)

What is current behaviour

If our domain were docsify.now.sh, it would do nothing and pop an error on the debug console:

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https://example.com/' cannot be created in a document with origin 'https://docsify.now.sh' and URL 'https://docsify.now.sh/'.
    at https://unpkg.com/docsify@4.10.2/lib/docsify.min.js:1:61459

The corresponding source code is here.

What is the expected behaviour

Redirect to https://example.com/ normally.

Other relevant information

• Bug does still occur when all/other plugins are disabled?

• Your OS: Linux ZZZ-PC-4 5.4.0-4-amd64 #1 SMP Debian 5.4.19-1 (2020-02-13) x86_64 GNU/Linux

• Node.js version: v12.14.0

• npm/yarn version: 6.13.4

• Browser version: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36

• Docsify version: 4.10.2

• Docsify plugins: None

[ustc-zzzz]

Also available on Firefox Browser (Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0):

SecurityError: The operation is insecure. docsify.min.js:formatted:1
    onchange docsify.min.js:2341

[Koooooo-7]

excuse me.
I can't reproduce ur bug.
can u give me a simple demo plz.

FYR:

Docsify version : 4.10.2
OS: windows10
Browser: Chrome. 
Settings as u posted above

[ustc-zzzz]

@Koooooo-7 Sorry. I forgot to report that routerMode should be set to history.
I have made a demo which is available on https://ustc-zzzz.github.io/docsify-issue-1046-demo/.

[Koooooo-7]

thx a lot.
I checked it and there is a same-origin policy issue about the history.pushState() .
this documentation mentions something about the url param.

The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception.

@anikethsaha
tbh, I m not sure if there is a bug or security thing.
I plan to have a simple link checking before the history.pushState(),html5.js.
if the urls were cross-origin, I just use window.open(url,'_self') instead.
what's ur oppion?

[anikethsaha]

Thanks @Koooooo-7 for triaging this ! 💯

I am not so into security things that's why I can't give 100% opinion.
But as per the docs you mentioned, it seems pretty reasonable behavior of having same origin !

if the urls were cross-origin, I just use window.open(url,'_self') instead.

What do you think about having a separate option for this ?

[Koooooo-7]

@anikethsaha
normally, there would have the non cross origin URLs and the cross origin, so I think it is better that there have a sign (but I don't wanna make the URL congratulations messy) to mark the cross origin url, thus we don't need the URL checking.
I don't have some good idea about the seperate option right now.
could u show me some details about the seperate options.

[anikethsaha]

by option, I meant separate option for window.open(url,'_self') like if the option is true then we would check the url and use window.open(url,'_self') if required for opening.
else it would be the same operation like the present one !

[anikethsaha]

History mode by default shows the origin issue, so bypassing (doing the workaround to show the page) by default won't be a good idea .
its kind of the web standard behavior. But still, we can have some way to tackle this !

What do you think ?

[Koooooo-7]

@anikethsaha

by option, I meant separate option for window.open(url,'_self') like if the option is true then we would check the url and use window.open(url,'_self') if required for opening.

yep, where do u wanna set the option? As an independent configuration or the configuration with the URL?

else it would be the same operation like the present one !

yep, we do keep the present one.

As a independent option, it seems like this:

if ( optionFlag&& isCrossOriginUrl (url)){
    windows. open(url, '_self')
}
windows. history. pushState(... )

and, how about setting a sign/flag with the URL? only if we find the flag, we use windows. open instead of checking all the URLs.
such as

Example: [example.com](https://example.com/   ':crossurl=true')

[anikethsaha]

Example: [example.com](https://example.com/ ':crossurl=true')

this is much better. Lets do this one

[BeamerIsHere]

@Koooooo-7 @anikethsaha
I've got the same issue with external links.

I have a _coverpage file and added some external links to it and also enabled history routing mode. Getting the same error.
Since I have the links in the _coverpage file( not in MD), I'm confused by the solutions above.

I'll add my coverpage and index.html file here.

Thanks in advance!

Getting this error

"Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https://tfs.insidenci.com/Energy-=contents' cannot be created in a document with origin 'http://127.0.0.1:5500' and URL 'http://127.0.0.1:5500/docs-home'."

Index page

<style>
    .sidebar::-webkit-scrollbar {
        width: 10px;
    }/* ... */
    .center {
        margin-left: auto;
        margin-right: auto;
    }
    img.cover {
        width: 100;
        height: 100;
    }
</style>

<script>
  
  window.$docsify = {
    //...
    loadSidebar: true,
    routerMode: 'history',
    externalLinkTarget: '_self',
   
    alias: {
      '/.*/_sidebar.md': '/_sidebar.md',
    },
    subMaxLevel: 3,
    relativePath: false,
    //homepage: 'docs-home.md',
    name: '',
    coverpage: true,
    onlyCover: true,
    // create custom headings for Flexible Alerts
    'flexible-alerts': {
      note: {
        label: "Note"
      },
      tip: {
        label: "Tip"
      },
      warning: {
        label: "Caution"
      },
      danger: {
        label: "Attention"
      },
      style: 'callout'
    },  
   
    plugins: [
  function(hook, vm) {
  hook.beforeEach(function(html) {
    var url =
      'https://somelink.com/'.concat(vm.route.file,"&version=GBmaster&_a=contents") ;
    var editHtml = '[Edit this page](' + url + ')\n';
    return (
      html +
      '\n----\n' +
      editHtml 
    );
  });
}
]

  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- plugins -->

<!-- collapse the sidebar automatically -->
<script src="//unpkg.com/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
<!-- enable search bar -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!-- enable "copy code" button on code chunks -->
<script src="https://unpkg.com/docsify-copy-code@2"></script> -->
<!-- enable flexible alerts plugin https://github.com/fzankl/docsify-plugin-flexible-alerts -->
<script src="https://unpkg.com/docsify-plugin-flexible-alerts"></script>
<!-- Enable mermaid diagrams -->
<script src="//unpkg.com/mermaid/dist/mermaid.js"></script>
<script src="//unpkg.com/docsify-mermaid@latest/dist/docsify-mermaid.js"> 
<script>mermaid.initialize({ startOnLoad: true });</script>

---

Coverpage

Data Tools Landing Page

Welcome to the Data Tools Landing Page for Advanced Solutions. Here you will find access to and documentation for (almost) all the data management, analytics, modeling and visualization tools supported by Advanced Solutions. Please reach out on Teams if you have any questions or concerns.

   

Analytics		RStudio Server Login Docs
Warehousing		Snowflake Login Docs
Visualization		Spotfire Dev|Test|UAT|Prod Docs		RStudio Connect Login Docs
Collaboration		Azure DevOps Login Docs		MS Teams Login Docs

       

Go to TechDocs

[Koooooo-7]

@BeamerIsHere thx for ur report!
Could you please open a new issue to let us check it in process ? somehow, I can't open ur sites to check the configurations, so I guess u need provide ur repo also in case of the site is unavailable. or u can make it in Sandbox.