从 a 标签打开 vscode 看伪协议

为什么?

a 标签支持不同的伪协议 像 tel:javascript: 伪协议是经常碰到。伪协议为操作带来了很大的便捷性。tel 协议点击之后直接能够在移动端拨打电话。当然 vscode 系列也有自己的伪协议,通过这些伪协议能够方便快捷的与 vscode 交互。

vscode 的协议

  • vscode: : 用于启动 Visual Studio Code。例如,通过命令行执行 code . 就是通过 vscode: 协议启动的
  • vscode-insiders: 用于启动 Visual Studio Code Insiders 版本。
  • vscode-insider:vscode-insiders: 类似,也用于打开 VSCode 的 Insiders 版本。
  • vscode-oss: 用于打开 VSCode 的开源版本。
  • vscode-resource: 用于在 VSCode 中打开资源,如文件或文件夹。
  • vscode-file:用于在 VSCode 中打开文件。
  • vscode:extension: 用于在 VSCode 的扩展
html 复制代码
<a href="vscode:" target="_blank">Open Visual Studio Code</a>
<a href="vscode-insiders:" target="_blank">Open Visual Studio Code Insiders</a>
<a href="vscode-insider:" target="_blank">Open Visual Studio Code Insiders</a>
<a href="vscode-oss:" target="_blank">Open VSCode OSS</a>
<a href="vscode-resource:/path/to/your/resource" target="_blank">Open Resource in VSCode</a>
<a href="vscode-file:/path/to/your/file.txt" target="_blank">Open File in VSCode</a>
<a href="vscode:extension/your.extension.id" target="_blank">Open Extension in VSCode</a>

在 markdown 中使用

因为 markdown 也可以编译成 html, 也可以在markdown的语法中使用 vscode 的伪协议来打开 vscode

markdown 复制代码
[Open in VSCode](vscode-resource:./src/index.js)

以为 vitepress 为例:

md 复制代码
[Open in VSCode](vscode:)
[Open Visual Studio Code Insiders](vscode-insiders:)
[Open Visual Studio Code Insiders (Alternative)](vscode-insider:)
[Open VSCode OSS](vscode-oss:)
[Open Resource in VSCode](vscode-resource:/path/to/your/resource)
[Open File in VSCode](vscode-file:/path/to/your/file.txt)
[Open Extension in VSCode](vscode:extension/your.extension.id)


[Open in VSCode](javascript:alert(1))

目前经过测试 vitepress markdown 语法中没有屏蔽 [Open in VSCode](vscode:) 协议,可以直接打开 vscode, 但是 javascript: 协议被直接解析成了字符串。

为什么要屏蔽、过滤伪协议?

为了安全起见像 javascript: 这种协议开始的伪协议是不被允许的。因为很容易造成 xss 攻击。在写作平台,像掘金社区等就不允许使用伪协议注入 javascript 等代码,会过滤掉 a 标签的中的伪协议代码。

常见的伪协议

  • tel: 电话相关
  • mailto: 邮件相关
  • sms: 短信相关
  • geopoint: 地址位相关
html 复制代码
<a href="tel:+123456789">tel:+123456789</a>
<a href="mailto:info@example.com?subject=Subject%20of%20email&body=Body%20of%20email">Send Email</a>
<a href="sms:+123456789?body=Hello%20World">Send SMS</a>
<a href="geo:32.7149,-102.4394">View Map</a>

其他伪协议

  • data: 协议: data:image/png;base64,iVBORw0KG...
  • about: 协议: 用于显示浏览器或系统的信息,例如 about:blank 用于显示一个空白页面。
  • file: 协议: 用于引用本地文件,例如 file:///path/to/file.txt
  • ftp: 协议: 用于访问 FTP 资源,例如 ftp://example.com
  • chrome:chrome-extension: 协议: 用于访问 Chrome 浏览器的一些特殊功能或扩展。

小结

本文主要关注 a 标签的伪协议,以及 vscode 自定义不同类型的伪协议,使用 vscode: 伪协议在浏览器中直接打开 vscode,tel: 伪协议为打电话提供了便捷操作,可见伪协议十分的方便快捷。但同时也需要考虑安全性,像 javascript: 伪协议能直接运行脚本,使用时就特别考虑其安全情况。伪协议虽然好用,但是需要注意使用安全。

相关推荐
ma772 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在2 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang5 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻6 分钟前
前端面试十一之TS
前端
摆烂为不摆烂7 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
生无谓11 分钟前
什么是跨域,如何处理跨域
后端
Smilejudy13 分钟前
极具特色的位置运算
后端
码出极致14 分钟前
支付线上问题复盘的“5W”框架
后端
DoraBigHead19 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
ezl1fe22 分钟前
RAG 每日一技(三):不止文本,代码和Markdown如何优雅地分块?
后端