What does empty href for html <base> tag means?

Question

Suppose my page URL is: http://example.com/path/to/dir/index.html

And I proxy this page via: http://proxyserver.com/path/to/dir/index.html. Similarly I want all relative URLs in page to be resolved by proxyserver.com instead of example.com. What should be the proper <base> href value?

I want relative URLs on page like

• newfile.html to resolve to http://proxyserver.com/path/to/dir/newfile.html
• /newfile.html to resolve to http://proxyserver.com/newfile.html
• #hash to resolve to http://proxyserver.com/path/to/dir/file.html#hash

Setting <base href="" /> in page does the job correctly but does it have some implication? Does it have different interpretation across browsers? What does empty href value actually mean? Will it work for all frameworks like angular?

I have heard that <base> tag is mandatory for angular apps to initialize and hence removing <base> tag might not work.

NOTE: The website may already contain some <base> tag which I would always like to override.

I also tried <base href="/" /> but it will resolve relative URLs

• newfile.html to http://proxyserver.com/newfile.html and
• #hash to http://proxyserver.com/#hash which is wrong.

Any help is highly appreciated.

Answer 1

A base URL, or base location, is the unique root URL with which relative URLs can be converted into absolute URLs for a website. Multiple bases are impossible.

More complex, inconsistent policies can be enforced with redirection rules. This duty belongs to the web server. To list few, NginX, Apache and IIS all have the ability to set redirection rules. There you can do whatever you like with regular expressions.

Since this question is tagged Angular, then, since client-wise a page is accessed only after the web server resolves an http request, you would have to create a blank page redirecting to the correct page for every wrong case. Which is of course worse than letting the web server handle redirections.

Answer 2

<base href="" /> defines the base for all relative paths. And it obey´s the Highlander principle ("THERE CAN ONLY BE ONE") :-)

Just to check if i understand your aim right. You wrote:

• newfile.html to resolve to http://proxyserver.com/path/to/dir/newfile.html
• /newfile.html to resolve to http://proxyserver.com/newfile.html

So you do NOT want to have ONE Basepath, but you want that the browser checks multiple paths if there is the document you need?

This is not easily possible (from the Browser perspective). The reason is, that the browser does not know the content of those paths. He has to create requests to those server(s) "Hey nice server, do you have a "newfile.html" in your directory? No? Okay thank you."

Like @Attersson said, if you want to achieve that, you have to create filters and routings in your webserver. That would be no job for the client.

Now about Angular. In Angular 6, you would write <base href="/"> in your index.html. AND THEN configure in the Angular.json the base path you really want:

...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             ...
            "baseHref": "/myLovedPath/",
...

as a result, Angular will build the application and change <base href="/"> to <base href="/myLovedPath/">

warm regards

Answer 3

The tag specifies the base URL/target for all relative URLs in a document. There can be at maximum one element in a document, and it must be inside the element.

if you domine like http://proxyserver.com the base url will be / , but if the domine like this http://proxyserver.com/appname/ so the base url will be like /appname/ and you normaly will set the base url during the deploy with angular cli like this

ng build --prod --bh=/appname/

In this case you have to use **HashLocationStrategy** for routes

app.module.ts

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule  
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy } 
  ]
})
export class AppRoutingModule { }

{ provide: LocationStrategy, useClass: HashLocationStrategy }