What are the recommendations for html <base> tag?
Asked Answered
N

18

487

I've never seen <base> HTML tag actually used anywhere before. Are there pitfalls to its use that means I should avoid it?

The fact that I have never noticed it in use on a modern production site (or any site) makes me leery of it, though it seems like it might have useful applications for simplifying links on my site.


Edit

After using the base tag for a few weeks, I did end up finding some major gotchas with using the base tag that make it much less desirable than it first appeared. Essentially, the changes to href='#topic' and href='' under the base tag are very incompatible with their default behavior, and this change from the default behavior could easily make third party libraries outside of your control very unreliable in unexpected ways, since they will logically depend on the default behavior. Often the changes are subtle and lead to not-immediately-obvious problems when dealing with a large codebase. I have since created an answer detailing the issues that I experienced below. So test the link results for yourself before you commit to a widespread deployment of <base>, is my new advice!

Novel answered 11/12, 2009 at 16:10 Comment(8)
It is often used in the cached versions of search engine results to keep the links working.Abutilon
Just to note: The base tag also interacts with simple anchors, so if you use base, what previously was only an anchor to a location on the page <a href='#anchor1'>Anchor1</a> will use the base tag as well, overriding the default behavior of referring to the current page as the base. So that's definitely something to watch out for (though it could be fixed by using another base tag in pages that use lots of anchors).Novel
If you're not happy with the accepted answer, why don't you unaccept and reassign it?Huba
Wasn't aware it was an option, but yeah, don't want to rep-whore (if it even gives me points), but I think in final analysis, the disadvantages outweigh the advantages, and want to highlight that.Novel
Another minor gotcha of the base tag is, that Facebook doesn't support it: developers.facebook.com/bugs/459837624068499Surveyor
You typically don't look at the source code of every major site you go to. I believe more people are using <base> than you would think.Wiencke
+1 for "...this change from the default behavior could easily make third party libraries outside of your control very unreliable in unexpected ways...". The base tag can end up being a huge headache and time-waster if it is messing with a 3rd party library!Kunkle
Seems like the ultimate necro here, but I'd never heard of the "base" tag until undergoing a Penetration Test, where relative links to CSS and JavaScript are discouraged because a hacker can inject a "base" tag to redirect things to their Evil Website. Even using your own "base" tag for convenience can be undermined by a hacker. Bottom Line: don't use the "base" tag, and use Full Paths for All Links.Cushing
N
170

Breakdown of the effects of the base tag:

The base tag appears to have some non-intuitive effects, and I recommend being aware of the outcomes and testing them for yourself before relying on <base>! Since I've discovered them after trying to use the base tag to handle local sites with differing urls and only found out the problematic effects after, to my dismay, I feel compelled to create this summary of these potential pitfalls for others.

I'll use a base tag of: <base href="http://www.example.com/other-subdirectory/"> as my example in the cases below, and will pretend that the page that the code is on is http://localsite.com/original-subdirectory

Major:

No links or named anchors or blank hrefs will point to the original subdirectory, unless that is made explicit: The base tag makes everything link differently, including same-page anchor links to the base tag's url instead, e.g:

  • <a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
    becomes
    <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

  • <a href='?update=1' title='Some title'>A link to this page</a>
    becomes
    <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.

Minor:

IE6 fix that requires conditional comments: Requires conditional comments for ie6 to avoid screwing up the dom hierarchy, i.e. <base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]--> as BalusC mentions in his answer above.

So overall, the major problem makes use tricky unless you have full editing control over every link, and as I originally feared, that makes it more trouble than it's worth. Now I have to go off and rewrite all my uses of it! :p

Related links of testing for issues when using "fragments"/hashes:

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results


Edit by Izzy: For all of you running into the same confusion as me concerning the comments:

I've just tested it out myself, with the following results:

  • trailing slash or not, makes no difference to the examples given here (#anchor and ?query would simply be appended to the specified <BASE>).
  • It however makes a difference for relative links: omitting the trailing slash, other.html and dir/other.html would start at the DOCUMENT_ROOT with the given example, /other-subdirectory being (correctly) treated as file and thus omitted.

So for relative links, BASE works fine with the moved page – while anchors and ?queries would need the file name be specified explicitly (with BASE having a trailing slash, or the last element not corresponding to the name of the file it's used in).

Think of it as <BASE> replacing the full URL to the file itself (and not the directory it resides in), and you'll get things right. Assuming the file used in this example was other-subdirectory/test.html (after it moved to the new location), the correct specification should have been:

<base href="http://www.example.com/other-subdirectory/test.html">

– et voila, everything works as expected: #anchor, ?query, other.html, very/other.html, /completely/other.html.

Novel answered 11/12, 2009 at 16:10 Comment(0)
H
270

Before deciding whether to use the <base> tag or not, you need to understand how it works, what it can be used for and what the implications are and finally outweigh the advantages/disadvantages.


The <base> tag mainly eases creating relative links in templating languages as you don't need to worry about the current context in every link.

You can do for example

<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />

instead of

<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />

Please note that the <base href> value ends with a slash, otherwise it will be interpreted relative to the last path.


As to browser compatibility, this causes only problems in IE. The <base> tag is in HTML specified as not having an end tag </base>, so it's legit to just use <base> without an end tag. However IE6 thinks otherwise and the entire content after the <base> tag is in such case placed as child of the <base> element in the HTML DOM tree. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selectors like html>body, until you discover in the HTML DOM inspector that there should be a base (and head) in between.

A common IE6 fix is using an IE conditional comment to include the end tag:

<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->

If you don't care about the W3 Validator, or when you're on HTML5 already, then you can just self-close it, every webbrowser supports it anyway:

<base href="http://example.com/en/" />

Closing the <base> tag also instantly fixes the insanity of IE6 on WinXP SP3 to request <script> resources with an relative URI in src in an infinite loop.

Another potential IE problem will manifest when you use a relative URI in the <base> tag, such as <base href="//example.com/somefolder/"> or <base href="/somefolder/">. This will fail in IE6/7/8. This is however not exactly browser's fault; using relative URIs in the <base> tag is namely at its own wrong. The HTML4 specification stated that it should be an absolute URI, thus starting with the http:// or https:// scheme. This has been dropped in HTML5 specification. So if you use HTML5 and target HTML5 compatible browsers only, then you should be all fine by using a relative URI in the <base> tag.


As to using named/hash fragment anchors like <a href="#anchor">, query string anchors like <a href="?foo=bar"> and path fragment anchors like <a href=";foo=bar">, with the <base> tag you're basically declaring all relative links relative to it, including those kind of anchors. None of the relative links are relative to the current request URI anymore (as would happen without the <base> tag). This may in first place be confusing for starters. To construct those anchors the right way, you basically need to include the URI,

<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>

where ${uri} basically translates to $_SERVER['REQUEST_URI'] in PHP, ${pageContext.request.requestURI} in JSP, and #{request.requestURI} in JSF. Noted should be that MVC frameworks like JSF have tags reducing all this boilerplate and removing the need for <base>. See also a.o. What URL to use to link / navigate to other JSF pages.

Heathen answered 11/12, 2009 at 18:24 Comment(1)
BalusC, About the same time when I wrote the answer here https://mcmap.net/q/18304/-what-are-the-recommendations-for-html-lt-base-gt-tag there were over 10+ useful comments under this thread posted by multiple authors over 8 years detailing information regarding <base>. Any idea which link the comments have been moved to?Dovelike
N
170

Breakdown of the effects of the base tag:

The base tag appears to have some non-intuitive effects, and I recommend being aware of the outcomes and testing them for yourself before relying on <base>! Since I've discovered them after trying to use the base tag to handle local sites with differing urls and only found out the problematic effects after, to my dismay, I feel compelled to create this summary of these potential pitfalls for others.

I'll use a base tag of: <base href="http://www.example.com/other-subdirectory/"> as my example in the cases below, and will pretend that the page that the code is on is http://localsite.com/original-subdirectory

Major:

No links or named anchors or blank hrefs will point to the original subdirectory, unless that is made explicit: The base tag makes everything link differently, including same-page anchor links to the base tag's url instead, e.g:

  • <a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
    becomes
    <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

  • <a href='?update=1' title='Some title'>A link to this page</a>
    becomes
    <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.

Minor:

IE6 fix that requires conditional comments: Requires conditional comments for ie6 to avoid screwing up the dom hierarchy, i.e. <base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]--> as BalusC mentions in his answer above.

So overall, the major problem makes use tricky unless you have full editing control over every link, and as I originally feared, that makes it more trouble than it's worth. Now I have to go off and rewrite all my uses of it! :p

Related links of testing for issues when using "fragments"/hashes:

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results


Edit by Izzy: For all of you running into the same confusion as me concerning the comments:

I've just tested it out myself, with the following results:

  • trailing slash or not, makes no difference to the examples given here (#anchor and ?query would simply be appended to the specified <BASE>).
  • It however makes a difference for relative links: omitting the trailing slash, other.html and dir/other.html would start at the DOCUMENT_ROOT with the given example, /other-subdirectory being (correctly) treated as file and thus omitted.

So for relative links, BASE works fine with the moved page – while anchors and ?queries would need the file name be specified explicitly (with BASE having a trailing slash, or the last element not corresponding to the name of the file it's used in).

Think of it as <BASE> replacing the full URL to the file itself (and not the directory it resides in), and you'll get things right. Assuming the file used in this example was other-subdirectory/test.html (after it moved to the new location), the correct specification should have been:

<base href="http://www.example.com/other-subdirectory/test.html">

– et voila, everything works as expected: #anchor, ?query, other.html, very/other.html, /completely/other.html.

Novel answered 11/12, 2009 at 16:10 Comment(0)
N
31

Well, wait a minute. I don't think the base tag deserves this bad reputation.

The nice thing about the base tag is that it enables you to do complex URL rewrites with less hassle.

Here's an example. You decide to move http://example.com/product/category/thisproduct to http://example.com/product/thisproduct. You change your .htaccess file to rewrite the first URL to the second URL.

With the base tag in place, you do your .htaccess rewrite and that's it. No problem. But without the base tag, all of your relative links will break.

URL rewrites are often necessary, because tweaking them can help your site's architecture and search engine visibility. True, you'll need workarounds for the "#" and '' problems that folks mentioned. But the base tag deserves a place in the toolkit.

Negrillo answered 11/12, 2009 at 16:10 Comment(6)
From my view, the problem is future-proofing it. If you use the base tag on a page, all other libraries that interact with the page will be affected by the base tag, including third party libraries that might rely on the default behavior of the naked anchor tag or hashs.Novel
@Kzqai, +1 Good point, but there are many websites that don't use flawed libraries. The problem is not with base href, it's with the library and it needs to be fixed there.Dovelike
@Pacerier, I'd say the problem indeed is with base href. Or rather, the problem is that browsers do not seem clever enough to simply not have it affect anchor href's which begin with #. I attempted to fix this with javascript and that caused problems with libraries making use of href='#' links (bootstrap, for example). Blaming the libraries is like blaming them for everything else that goes wrong with HTML. It's an outdated tool for a modern job, simple as.Orazio
"do complex URL rewrites with less hassle." - Although, in this case the base tag is arguably a workaround for not having (correctly) used root-relative URLs (or even absolute URLs) in the first place.Resinate
@Deji, When I wrote "problem", I mean "bug". Yes, the very existence of base href is indeed a real "problem", but in the above case, I'm saying the bug is not with base href. (Yet do not for once think that I support using base href, Indeed, my stand is that base href in its current version is useless: https://mcmap.net/q/18304/-what-are-the-recommendations-for-html-lt-base-gt-tag. Best way forward now is to deprecate it Or enable multiple base hrefs as it is only useful when multiple can be used)Dovelike
@MrWhite, Kudos that. @ Summer, re "relative links will break" Actually they won't as long as you modrewrite all those relative links too. Indeed, that's how it should be (also see stackoverflow.com/questions/1889076/…). ¶ Re "But the base tag deserves a place in the toolkit" No, just modrewrite properly [ie including all pages that are relatively linked] and all is good.Dovelike
F
27

To decide whether it should be used or not, you should be aware of what it does and whether it's needed. This is already partly outlined in this answer, which I also contributed to. But to make it easier to understand and follow, a second explanation here. First we need to understand:

How are links processed by the browser without <BASE> being used?

For some examples, let's assume we have these URLs:

A) http://www.example.com/index.html
B) http://www.example.com/
C) http://www.example.com/page.html
D) http://www.example.com/subdir/page.html

A and B both result in the very same file (index.html) be sent to the browser, C of course sends page.html, and D sends /subdir/page.html.

Let's further assume, both pages contain links of the following types:

  1. fully qualified absolute links (http://www...)
  2. local absolute links (/some/dir/page.html)
  3. relative links including file names (dir/page.html), and
  4. relative links with "segments" only (#anchor, ?foo=bar).

The browser receives the page, and renders the HTML. If it finds some URL, it needs to know where to point it to. That's always clear for Link 1), which is taken as-is. All others depend on the URL of the rendered page:

URL     | Type | Result
--------+------+--------------------------
A,B,C,D |    2 | http://www.example.com/some/dir/page.html
A,B,C   |    3 | http://www.example.com/dir/page.html
D       |    3 | http://www.example.com/subdir/dir/page.html
A       |    4 | http://www.example.com/index.html#anchor
B       |    4 | http://www.example.com/#anchor
C       |    4 | http://www.example.com/page.html#anchor
D       |    4 | http://www.example.com/subdir/page.html#anchor

Now what changes with <BASE> being used?

<BASE> is supposed to replace the URL as it appears to the browser. So it renders all links as if the user had called up the URL specified in <BASE>. Which explains some of the confusion in several of the other answers:

  • again, nothing changes for "fully qualified absolute links" ("type 1")
  • for "local absolute links", the targeted server might change (if the one specified in <BASE> differs from the one being called initially from the user)
  • "relative URLs" become critical here, so you've got to take special care how you set <BASE>:
    • better avoid setting it to a directory.
      Doing so, links of "type 3" (relative dir + filename) might continue to work, but it most certainly breaks those of "type 4" (relative + segment); except for "case B" (no path or filename).
    • setting it to the fully qualified file name produces, in most cases, the desired results.

An example explains it best

Say you want to "prettify" some URL using mod_rewrite:

  • real file: <DOCUMENT_ROOT>/some/dir/file.php?lang=en
  • real URL: http://www.example.com/some/dir/file.php?lang=en
  • user-friendly URL: http://www.example.com/en/file

Let's assume mod_rewrite is used to transparently rewrite the user-friendly URL to the real one (no external re-direct, so the "user-friendly" one stays in the browsers address bar, while the real-one is loaded). What to do now?

  • no <BASE> specified: breaks all relative links (as they would be based on http://www.example.com/en/file now)
  • <BASE HREF='http://www.example.com/some/dir>: Absolutely wrong. dir would be considered the file part of the specified URL, so still, all relative links are broken.
  • <BASE HREF='http://www.example.com/some/dir/>: Better already. But relative links of "type 4" are still broken (except for "case B").
  • <BASE HREF='http://www.example.com/some/dir/file.php>: Exactly. Everything should be working with this one.

A last note

Keep in mind this applies to all URLs in your document:

  • <A HREF=
  • <IMG SRC=
  • <SCRIPT SRC=
Factitious answered 11/12, 2009 at 16:10 Comment(5)
referring to your last note... I'm curious.. does it also alter the way a jQuery ajax request is going to be interpreted. This is different than <SCRIPT SRC=Spoonful
@Spoonful I don't use jQuery, but I'd assume so.Factitious
@Izzy, Re "example" Actually, if you prettify </some/dir/file.php?lang=en> to </en/file>, you'll also want to prettify </some/dir/page2?lang=en> and </some/dir/script> to </en/page2> and </en/script>. Thus your relative paths will work just as they should.Dovelike
how would <BASE HREF='http://www.example.com/some/dir/file.php> works with "type 4"? wouldn't it not be like "example.com/some/dir/file.php?foo=bar" instead of example.com/subdir/page.html?foo=barFirefly
@Firefly Yes, and that is what it should – as in my example http://www.example.com/some/dir/file.php is the "real location" (see "an example explains it best"), and passing only a fragment (#anchor) can only be resolved there.Factitious
I
13

Drupal initially relied on the <base> tag, and later on took the decision to not use due to problems with HTTP crawlers & caches.

I generally don't like to post links. But this one is really worth sharing as it could benefit those looking for the details of a real-world experience with the <base> tag:

http://drupal.org/node/13148

Intercostal answered 11/12, 2009 at 16:10 Comment(3)
The link points to a discussion had eight years before this answer, so now almost a decade ago. I think there should be a bit more testing to be done if this is still a problem, rather than to link to such an age old description of a problem that might not exist.Frodin
True, but IMHO it's still an eye opener as to what problems you need to test your <base> based implementation against, not just that your anchors work right in your browser.Intercostal
@AmrMostafa, Just don't use base href.Dovelike
E
11

It makes pages easier for offline viewing; you can put the fully qualified URL in the base tag and then your remote resources will load properly.

Ernestoernestus answered 11/12, 2009 at 16:19 Comment(1)
@Erik, Aside from offline viewing, it works too for all stopgap usecases that need to demo a page of a domain on another domain. Eg, when demoing a page on jsfiddle, you can use base href to base your domain instead of jsfiddle's domain. ¶ Though realistically speaking, creating a tag just for such stopgap usecases is not a good design, thus base href should be deprecated and removed even while it can be useful for such stopgap usecases.Dovelike
C
5

The hash "#" currently works for jump links in conjunction with the base element, but only in the latest versions of Google Chrome and Firefox, NOT IE9.

IE9 appears to cause the page to be reloaded, without jumping anywhere. If you are using jump links on the outside of an iframe, while directing the frame to load the jump links on a separate page within the frame, you will instead get a second copy of the jump link page loaded inside the frame.

Conductance answered 11/12, 2009 at 16:10 Comment(0)
J
5

It's probably not very popular because it's not well known. I wouldn't be afraid of using it since all major browsers support it.

If your site uses AJAX you'll want to make sure all of your pages have it set correctly or you could end up with links that cannot be resolved.

Just don't use the target attribute in an HTML 4.01 Strict page.

Johnstone answered 11/12, 2009 at 16:12 Comment(2)
Actually basetarget can be useful, but basehref aint. Indeed, it aint popular because it aint useful. See my ans.Dovelike
Now all browsers supports base tag.Marcmarcano
H
3

Also, you should remember that if you run your web server at non-standard port you need to include port number at base href too:

<base href="//localhost:1234" />  // from base url
<base href="../" />  // for one step above
Heartburning answered 11/12, 2009 at 16:10 Comment(0)
S
3

Working with AngularJS the BASE tag broke $cookieStore silently and it took me a while to figure out why my app couldn't write cookies anymore. Be warned...

Smithson answered 11/12, 2009 at 16:10 Comment(0)
L
3

In the case of SVG images inlined in the page there is another important issue that arises when the base tag is used:

Since with the base tag (as noted above already) you effectively loose the ability to use relative hash URLs like in

<a href="#foo">

because they will be resolved against the base URL rather than the current document's location and thus are not relative anymore. So you will have to add the path of the current document to these kinds of links like in

<a href="/path/to/this/page/name.html#foo">

So one of the seemingly positive aspects of the base tag (which is to move the long URL prefixes away from the anchor tag and get nicer, shorter anchors) completely backfires for local hash URLs.

This is especially annoying when inlining SVG in your page, be it static SVG or dynamically generated SVG because in SVG there can be a lot of such references and they will all break as soon as a base tag is used, on most, but not all user agent implementations (Chrome at least still works in these scenarios at the time of writing).

If you are using a templating system or another tool-chain that processes/generates your pages, I would always try to get rid of the base tag, because as I see it, it brings more problems to the table than it solves.

Lubricant answered 11/12, 2009 at 16:10 Comment(1)
With or without SVG, base tag is useless and considered harmful. See my elaboration: https://mcmap.net/q/18304/-what-are-the-recommendations-for-html-lt-base-gt-tagDovelike
P
2

have also a site where base - tag is used, and the problem described occured. ( after upgrading jquery ), was able to fix it by having tab urls like this:

<li><a href="{$smarty.server.REQUEST_URI}#tab_1"></li>

this makes them "local"

references i used:

http://bugs.jqueryui.com/ticket/7822 http://htmlhelp.com/reference/html40/head/base.html http://tjvantoll.com/2013/02/17/using-jquery-ui-tabs-with-the-base-tag/

Punkie answered 11/12, 2009 at 16:10 Comment(0)
F
2

One thing to keep in mind:

If you develop a webpage to be displayed within UIWebView on iOS, then you have to use BASE tag. It simply won't work otherwise. Be that JavaScript, CSS, images - none of them will work with relative links under UIWebView, unless tag BASE is specified.

I've been caught by this before, till I found out.

Flunk answered 11/12, 2009 at 16:10 Comment(0)
C
2

I've never really seen a point in using it. Provides very little advantage, and might even make things harder to use.

Unless you happen to have hundreds or thousands of links, all to the same sub-directory. Then it might save you a few bytes of bandwidth.

As an afterthought, I seem to recall there being some problem with the tag in IE6. You could place them anywhere in the body, redirecting different portions of the site to different locations. This was fixed in IE7, which broke a lot of sites.

Cephalic answered 11/12, 2009 at 16:14 Comment(5)
The advantage probably isn't saving bandwidth, but cleaner and shorter urls. Unfortunately, the subtle changes in behavior to all links really isn't worth it, at is turns out.Novel
The base tag is a solution to some problems. If you don't have a problem then don't use the base tag. Examples: 1. Reusing HTML content in different systems. Links are kept relative in the content and an appropriate base tag is set (by the CMS) so the links resolve correctly. 2. An existing site uses relative URLs throughout but later decides to implement "pretty" URLs which changes the URL-path depth. A base tag can be seen as preferable to "fixing" all the relative URLs.Resinate
@MrWhite, CMS does not need to use base tag to resolve links correctly as HTML already supports relative paths which defaults to the current folder. See elaboration here: https://mcmap.net/q/18304/-what-are-the-recommendations-for-html-lt-base-gt-tagDovelike
@Dovelike That depends on where the content is located (FWIW I'm not referring to WordPress et al).Resinate
@Resinate typically a CMS will not use static links in the first place, so that example is kind of weird. In fact, very few websites these days are built using static HTML. - I can see your points there, but those are solutions to problems that are basically obsolete now. (Everybody and their grandparents is using WordPress, or similar, for everything.)Cephalic
O
1

I'll add one more argument to the long list of reasons why you should never set a <base href> tag. As many others have noted here, setting <base href> changes the behavior of #anchor and ?query URLs — they get attached to the base href, not to the fallback base that is the document's own URL.

You might think that setting <base href="https://example.com/the/documents/own/url"> would solve this, and everything would behave normally. You'd be wrong.

On the real-world web, ?query=parameters are used all the time for session attribution (as in Google Analytics), and many other things. Many of these parameters are exclusively for client-side use by scripts; the server doesn't care or do anything with them.

Let's say you're serving example.com/landing-page, with a <base href="example.com/landing-page">, and a link on the page to #menu. Then someone arrives there via the URL example.com/landing-page?source=my-marketing-campaign.

Without the <base href>, when they click #menu the browser would recognize in-page navigation and jump instantly to that section.

But, since your defined base href example.com/landing-page is missing the query parameter source=my-marketing-campaign, the browser cannot be sure that it is an in-page link. Thus, clicking #menu will fire a new HTTP request and the page (and all its uncached assets) will reload. Best case scenario, this is a pointless waste of time and bandwidth on all sides. Worst case, state and data could be lost.

There's no way around this for a static site. If you're using a CMS you might think for a moment that you could dynamically set the <base href> to the request URL, all parameters included. While this would solve the refresh issue, you'd end up with caching troubles and a nightmare-inducing security vulnerability.

Bottom line: <base href> will cause you trouble, no matter what you set it to. Don't do it.

If you're concerned about the possibility of a malicious script injecting its own <base href="evil.com"> tag (for example in a nonce retargeting attack), the best solution in 2022 seems to be adding the base-uri directive to your Content Security Policy.

Outset answered 11/12, 2009 at 16:10 Comment(0)
D
1

My recommendation is NOT to use the <base> element in managing url paths. Why?

It just trades one problem for another. Without the base element you can use any path system you like for your relative paths and links without fear they will break. The minute you set the base element to a path you are "locked in" to designing all your url's to work off that path and will now have to change ALL paths to work from the base path. Bad idea!

That means you have to now write LONGER paths AND keep track of where each path is relative to this base. Worse.....when using the <base> element they recommend you use a fully qualified base path to support older browsers ("https://www.example.com/"), so now you've hard-coded your domain into your page or made all your links dependent on a valid domain path.

On the other hand, the minute you remove the base path again from your website, you are now free again to use shorter relative paths, which can be fully qualified, use absolute paths from the root, or use paths that are truly relative to the file and folder you are in. Its much more flexible. And best of all fragments like "#hello" work correctly without any additional fixes. Again, people are creating problems that don't exist.

Also, the argument above that your use base url's to help you migrate folders of web pages to new subfolder locations doesn't really matter today since most modern servers allow you to quickly set up any subfolder as a new application root folder under any domain. The definition or the "root" of a web application is not constrained by either folders or domains now.

It seems kind of silly this whole debate. So I say leave out base url and support the older native server-client default path system that does not use it.

Note: If the problem you have is controlling paths due to some new API system, the solution is simple...be consistent in how you path all your url's and links in your API. Don't rely on browser support of base or HTML5 or newer circus tricks like the javascript API kiddies do. Simply path all your anchor tags consistently and you will never have issues. Whats more, your web application is instantly portable to new servers regardless of path systems used.

Whats old is new again! The base element is clearly about trying to create a solution to a problem that never existed in the Web World 20 years ago, much less today.

Disarrange answered 11/12, 2009 at 16:10 Comment(0)
D
1

Base href example

Say a typical page with links:

<a href=home>home</a> <a href=faq>faq</a> <a href=etc>etc</a>

.and links to a diff folder:

..<a href=../p2/home>Portal2home</a> <a href=../p2/faq>p2faq</a> <a href=../p2/etc>p2etc</a>..

With base href, we can avoid repeating the base folder:

<base href=../p2/>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>

So that's a win.. yet pages too-often contain urls to diff bases And the current web supports only one base href per page, so the win is quickly lost as bases that aint base∙hrefed repeats, eg:

<a href=../p1/home>home</a> <a href=../p1/faq>faq</a> <a href=../p1/etc>etc</a>
<!--.. <../p1/> basepath is repeated -->

<base href=../p2>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>


Conclusion

(Base target might be useful.) Base href is useless as:

  • page is equally WET since:
    • default base [–parent folder] ⇌ perfect (unless unnecessary/rare exceptions 𝒞1 & 𝒞2).
    • current web ⇌ multiple base hrefs unsupported.

Related

Dovelike answered 11/12, 2009 at 16:10 Comment(1)
It's certain @downvoters won't be able to explain how basehref is useful, especially so when entire industries extensively recommends against using it.Dovelike
B
1

I have found a way to use <base> and anchor based links. You can use JavaScript to keep links like #contact working as they have to. I used it in some parallax pages and it works for me.

<base href="http://www.mywebsite.com/templates/"><!--[if lte IE 6]></base><![endif]-->

...content...

<script>
var link='',pathname = window.location.href;
$('a').each(function(){
    link = $(this).attr('href');
    if(link[0]=="#"){
        $(this).attr('href', pathname + link);
    }
});
</script>

You should use at the end of the page

Box answered 11/12, 2009 at 16:10 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.