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

相关推荐
程序员爱钓鱼21 分钟前
Go语言实战案例-判断一个数是否为质数
后端·google·go
程序员爱钓鱼26 分钟前
Go语言实战案例-读取本地文本文件内容
后端·google·go
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20154 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构