从 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:[email protected]?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: 伪协议能直接运行脚本，使用时就特别考虑其安全情况。伪协议虽然好用，但是需要注意使用安全。