Data Url用法-Chen’Blog

Data Url用法

分类JS时间2024-01-31 16:27:58发布RustStream浏览69

摘要：定义 ==Date Url== 即前缀为 data: 协议的的 URL，其允许内容创建者向文档中嵌入小文件。 Data URLs 由四个部分组成：前缀（data:）指示数据类型的 MIME 类型如果非文本则为可选的 base64 标记数据本身：data // Content-Type: MIME文件类型 // base64 编码类型 // data 数据本身 data:Content-Type;base64,data 如下面写一个可以弹出1的js <script src="data:application/javascript;utf8,alert(1 "></script>...

定义

Date Url 即前缀为 data: 协议的的 URL，其允许内容创建者向文档中嵌入小文件。
Data URLs 由四个部分组成：

前缀（data:）
指示数据类型的 MIME 类型
如果非文本则为可选的 base64 标记
数据本身：data

// Content-Type: MIME文件类型
// base64 编码类型  
// data  数据本身
data:Content-Type;base64,data

如下面写一个可以弹出1的js

<script src="data:application/javascript;utf8,alert(1)"></script>

base64

任意数据通过base64可以转换为一个纯文本数据

在浏览器中提供了相应的函数

btoa('alert(1)')   
// 'YWxlcnQoMSk='
atob('YWxlcnQoMSk=')
// 'alert(1)'

上面弹出1的就是可以写为一下格式

<script src="data:application/javascript;base64,YWxlcnQoMSk="></script>

应用场景

可以在文件上传时直接看到预览图，而不用等待上传完成后端返回图片数据进行展示。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Url 预览图</title>
</head>
<body>
    <input type="file">
</body>
<script>
    const inp = document.querySelector('input')
    inp.onchange = (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.onload = e => {
            const dataurl = e.target.result;
            const img = document.createElement('img')
            img.src = dataurl;
            document.body.append(img)
        }
        reader.readAsDataURL(file)
    }
</script>
</html>

本文链接：https://blog.smallhao.fun/?id=17 转载需授权！

分享到：