我从未见过<base> HTML标签实际上在任何地方使用。它的使用是否存在意味着我应该避免使用的陷阱?

事实上,我从未注意到它在现代生产站点(或任何站点)上使用过,这让我对它持怀疑态度,尽管它似乎在简化我站点上的链接方面有有用的应用程序。


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!


当前回答

它可能不是很流行,因为它不是很出名。我不会害怕使用它,因为所有主流浏览器都支持它。

如果您的站点使用AJAX,您将希望确保所有页面都正确设置了AJAX,否则可能会出现无法解析的链接。

只是不要在HTML 4.01 Strict页面中使用target属性。

其他回答

在AngularJS中,BASE标签默默地破坏了$cookieStore,我花了一段时间才弄清楚为什么我的应用程序不能再编写cookie了。警告……

基本标签的效果分解:

base标记似乎有一些非直观的效果,我建议在依赖<base>!由于我是在尝试使用base标签来处理url不同的本地站点后发现它们的,并且在此之后才发现有问题的效果,令我沮丧的是,我觉得有必要为其他人创建这些潜在陷阱的摘要。

在下面的例子中,我将使用base标记:<base href="http://www.example.com/other-subdirectory/">作为示例,并将代码所在的页面假设为http://localsite.com/original-subdirectory

主要:

没有链接、命名锚或空白引用将指向原始子目录,除非显式: base标签使所有链接都不同,包括指向base标签url的同页锚链接,例如:

<a href='#top-of-page' title='Some title'>通过命名锚指向页面顶部的链接</a> 就变成了 <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>一个链接到一个#命名锚在完全不同的基本页</a> < a href = ' ?update=1' title='Some title'>该页面的链接</ A > . update=1' title='Some title'> 就变成了 <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>一个指向基本标签页面的链接

通过一些工作,您可以通过显式地指定这些链接链接到它们所在的页面来修复您所控制的链接上的这些问题,但是当您将依赖于标准行为的第三方库添加到组合中时,很容易造成很大的混乱。

小:

IE6修复了需要条件注释:需要条件注释的IE6,以避免搞砸dom层次结构,即<base href="http://www.example.com/"><!——[if lte IE 6]></base><![endif]- >正如BalusC在他上面的回答中提到的。

所以总的来说,主要的问题是使用棘手,除非你对每个链接都有完全的编辑控制,正如我最初担心的那样,这让它变得更麻烦。现在我不得不重新编写我对它的所有应用!: p

使用“片段”/散列时测试问题的相关链接:

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

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


编辑:对于所有和我一样对评论感到困惑的人:

我自己刚刚进行了测试,结果如下:

尾斜杠与否,对这里给出的例子没有影响(#anchor和?query将简单地附加到指定的<BASE>)。 然而,对于相对链接来说,这是不同的:省略后面的斜杠,other.html和dir/other.html将从给定示例的DOCUMENT_ROOT开始,/other-子目录(正确地)被视为文件,因此省略。

因此,对于相对链接,BASE可以很好地用于移动的页面,而锚和?查询则需要显式指定文件名(BASE有一个尾随斜杠,或者最后一个元素不对应于它所使用的文件的名称)。

可以把它看作是<BASE>替换文件本身的完整URL(而不是文件所在的目录),这样您就会得到正确的结果。假设本例中使用的文件是other-subdirectory/test.html(在它移动到新位置之后),正确的规范应该是:

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

-等瞧,一切都按预期工作:#anchor, ?query, other.html, very/other.html, /completely/other.html。

Drupal最初依赖于<base>标记,后来由于HTTP爬虫和缓存的问题决定不再使用。

我一般不喜欢发布链接。但这一点真的值得分享,因为它可以让那些寻找<base>标签的真实世界体验细节的人受益:

http://drupal.org/node/13148

它使页面更容易离线查看;您可以将完全限定的URL放在基本标记中,然后您的远程资源将正常加载。

我将在为什么不应该设置<base href>标记的长长的原因列表中再添加一个参数。正如许多人在这里注意到的,设置<base href>会改变#anchor和?query URL的行为——它们附加到基本href,而不是文档自己的URL的回退基础。

您可能认为设置<base href="https://example.com/the/documents/own/url">可以解决这个问题,并且一切都将正常运行。你错了。

在现实世界的web中,?query=参数一直用于会话属性(如谷歌Analytics)和许多其他事情。这些参数中有许多是专门供脚本在客户端使用的;服务器不会关心它们,也不会对它们做任何事情。

假设您正在为example.com/landing-page提供服务,其中包含<base href="example.com/landing-page">,并且页面上有一个到#菜单的链接。然后有人通过URL example.com/landing-page?source=my-marketing-campaign到达那里。

如果没有<base href>,当他们单击#菜单时,浏览器将识别页面内导航并立即跳转到该部分。

但是,由于定义的base href example.com/landing-page缺少查询参数source=my-marketing-campaign,浏览器不能确定它是一个页面内链接。因此,单击#menu将触发一个新的HTTP请求,页面(及其所有非缓存资产)将重新加载。最好的情况是,这是对各方时间和带宽的毫无意义的浪费。在最坏的情况下,状态和数据可能会丢失。

对于静态站点来说,这是没有办法的。如果您正在使用CMS,您可能会想一下,您可以动态地将<base href>设置为请求URL,包括所有参数。虽然这可以解决刷新问题,但最终会遇到缓存问题和噩梦般的安全漏洞。

底线:<base href>会给你带来麻烦,不管你把它设置成什么。不要这样做。

如果你担心恶意脚本可能会注入自己的<base href="evil.com">标记(例如在nonce重定向攻击中),2022年的最佳解决方案似乎是将base-uri指令添加到你的内容安全策略中。