Azure DevOps描述区Markdown自定义超链接href更新失效

之前两个方案失效的核心原因 #

• 代码本身的漏洞
  • 所有跳转地址abc.azurewebsites.net都没补全https://协议头，拼接后会被浏览器当成当前域下的相对路径，直接跳错地方
  • 方案2里的全局buildURL函数执行时，内部的this指向全局window对象，给this.href赋值根本改不到<a>标签的href属性，完全没效果
  • 方案1的脚本块混进了多余的>引用标记，直接报JS语法错误，脚本根本跑不起来
  • 传的当前页面URL没做编码处理，URL自带的?、&、#这些特殊字符会把目标端点的参数拆碎，传过去的参数根本不对
• 平台规则限制
  • Azure DevOps的描述区块会对提交的HTML做安全消毒，单独嵌的<script>标签会被直接删掉，根本不会被浏览器加载执行

可正常跑通的调整方案 #

不用靠单独的脚本块，也不用靠元素ID查DOM节点，直接把跳转逻辑内联到<a>标签的href属性里，用支持的javascript:伪协议实现，完全不会被平台过滤，参考写法：

<a href="javascript:window.location.href='https://abc.azurewebsites.net?currentPage=' + encodeURIComponent(window.location.href)">点击跳转目标Web应用</a>

为什么这个写法能成 #

• 没有独立的script标签，不会被Azure DevOps的内容过滤机制删掉
• 逻辑直接绑在链接自己的跳转行为上，不存在DOM没加载完、ID找不到元素的问题
• 给传递的当前URL加了URI编码，避免特殊字符把目标端点的参数截断
• 补全了完整的HTTPS协议头，不会出现相对路径跳错的问题
  如果想用onclick事件实现，就把所有逻辑内联在事件属性里，不要靠单独的script块，同时用事件参数拿当前节点，避免this指错，参考写法：

<a href="about:blank" onclick="event.preventDefault(); window.location.href='https://abc.azurewebsites.net?currentPage=' + encodeURIComponent(window.location.href);">点击跳转目标Web应用</a>

注：这个onclick写法会先拦截空href的默认跳转行为，直接触发目标地址跳转，不需要点两次。

内容的提问来源于stack exchange，提问作者JAGBIR SINGH