Relative URL slash when using base tag

Question

I'm trying to learn more about the way paths are interpreted with a JSP.

When using an HTML base tag in combination with a relative URL, is it pretty standard to end the base href with a slash?

The reason I am asking is because I often need to express things in terms of the context root within a JSP (for a form action for example), so that the form is routed to the appropriate servlet as I've mapped it in web.xml.

Most of the time I would just use ${pageContext.request.contextPath} every time, until I learned about the base tag.

However, I'm guessing that since in a JSP the slash is interpreted by the server as the root of the web application, I can't have my base be, for example:

<base href="/foo"/>

and then in the form have:

<form action="/extension">
...
</form>

Since this would cause the form to be submitted to mydomain.com/extension instead of mydomain.com/foo/extension. Am I understanding this correctly, that since slash has special meaning, you generally need to end the base HREF with a backslash to get the desired effect?

Thanks

Answer 1

Not really.

Browsers do not simply concatenate your base href attributes and relative URLs. Instead, <base> tag sets the Document base URL which is then used to dynamically generate a new path.

You can see an interesting example in the WHATWG HTML specification:

<base href="http://www.example.com/news/index.html">
<p>Visit the <a href="archives.html">archives</a>.</p>

Note that the href attribute even ends with a filename.

This means that if you do not put a trailing slash to your base href attribute, foo will be treated as the last, volatile part of the path and will essentially be removed. By way of example:

<base href="http://www.example.com/news/index.html" />
<img src="ball.png" /> <!-- GET http://www.example.com/news/ball.png -->

---

<base href="http://www.example.com/news/" />
<img src="ball.png" /> <!-- GET http://www.example.com/news/ball.png -->

---

<base href="http://www.example.com/news" />
<img src="ball.png" /> <!-- GET http://www.example.com/ball.png -->

---

<base href="http://www.example.com/" />
<img src="ball.png" /> <!-- GET http://www.example.com/ball.png -->

---

<!-- If served from http://www.example.com: -->
<base href="/" />
<img src="ball.png" /> <!-- GET http://www.example.com/ball.png  -->