[{"data":1,"prerenderedAt":467},["ShallowReactive",2],{"blog-post-zh-base64-encoding-explained":3},{"id":4,"title":5,"author":6,"body":7,"description":452,"draft":453,"extension":454,"lang":455,"meta":456,"navigation":357,"path":457,"pubDate":458,"relatedTool":459,"seo":460,"stem":461,"tags":462,"__hash__":466},"blog\u002Fblog\u002Fzh-base64-encoding-explained.mdx","Base64 编码详解：是什么以及何时使用","ujiffy team",{"type":8,"value":9,"toc":438},"minimark",[10,14,19,40,58,65,69,72,75,82,92,96,99,104,107,147,150,154,174,178,189,197,212,216,219,223,226,229,235,241,247,262,266,269,293,296,419,422,425,434],[11,12,13],"p",{},"Base64 是每个开发者迟早都会遇到、但很多人存在误解的东西。最常见的误区：认为 Base64 编码是一种安全措施或加密手段。它完全不是。让我们先澄清这一点——然后再聊 Base64 究竟是什么、如何工作，以及什么时候真正需要用到它。",[15,16,18],"h2",{"id":17},"什么是-base64","什么是 Base64？",[11,20,21,22,26,27,31,32,35,36,39],{},"Base64 是一种",[23,24,25],"strong",{},"编码方案","，用于将二进制数据转换为可打印 ASCII 字符的字符串。名称来源于它使用 64 个可打印字符来表示数据：26 个大写字母（A–Z）、26 个小写字母（a–z）、10 个数字（0–9），以及 ",[28,29,30],"code",{},"+"," 和 ",[28,33,34],{},"\u002F","（用 ",[28,37,38],{},"="," 补位）。",[11,41,42,43,46,47,50,51,54,55,57],{},"关键点在于：",[23,44,45],{},"编码不是加密","。当你对某个内容进行 Base64 编码时，你并没有隐藏它。任何看到 Base64 字符串的人都可以立刻解码——不需要密钥，不需要密码。如果你对文本 ",[28,48,49],{},"hello"," 进行 Base64 编码，得到的是 ",[28,52,53],{},"aGVsbG8=","。把它丢进解码器，你就得到了 ",[28,56,49],{},"。",[11,59,60,61,64],{},"Base64 存在的理由完全不同：",[23,62,63],{},"兼容性","。某些系统——电子邮件协议、URL、HTML 属性、特定 API——最初被设计为处理文本，而非任意二进制数据。Base64 是一种将二进制数据（如图片或文件）转换为仅使用安全可打印 ASCII 字符的方式，使其能够在这些基于文本的系统中传输而不被破坏。",[15,66,68],{"id":67},"base64-的工作原理简要版","Base64 的工作原理（简要版）",[11,70,71],{},"二进制数据是字节流，每个字节是 8 位。Base64 每次取 3 个字节（24 位），将它们分成 4 组，每组 6 位。每个 6 位的组映射到 Base64 字母表中的一个字符。",[11,73,74],{},"为什么是 6 位？因为 2⁶ = 64，正好是编码字母表中的字符数量。",[11,76,77,78,81],{},"结果：每 3 个字节的输入变成 4 个 Base64 字符的输出。这意味着 Base64 编码后的数据比原始数据大约",[23,79,80],{},"大 33%","。这就是代价——以体积换兼容性。",[11,83,84,85,87,88,91],{},"如果输入不是 3 字节的倍数，则在末尾添加填充字符（",[28,86,38],{}," 或 ",[28,89,90],{},"==","），使输出长度为 4 的倍数。",[15,93,95],{"id":94},"开发者在哪些地方用到-base64","开发者在哪些地方用到 Base64？",[11,97,98],{},"Base64 在日常 Web 开发中出现的频率出乎意料地高：",[100,101,103],"h3",{"id":102},"data-url内联图片","Data URL（内联图片）",[11,105,106],{},"当你将图片直接嵌入 HTML 或 CSS 而不使用单独的文件时，就会用到 Data URL。图片的二进制内容经过 Base64 编码后内联放置：",[108,109,114],"pre",{"className":110,"code":111,"language":112,"meta":113,"style":113},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANS...\" \u002F>\n","html","",[28,115,116],{"__ignoreMap":113},[117,118,121,125,129,133,135,138,142,144],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"sMK4o","\u003C",[117,126,128],{"class":127},"swJcz","img",[117,130,132],{"class":131},"spNyl"," src",[117,134,38],{"class":123},[117,136,137],{"class":123},"\"",[117,139,141],{"class":140},"sfazB","data:image\u002Fpng;base64,iVBORw0KGgoAAAANS...",[117,143,137],{"class":123},[117,145,146],{"class":123}," \u002F>\n",[11,148,149],{},"这种技术适合小图标或希望打包进单文件的图片，可以减少一次 HTTP 请求。",[100,151,153],{"id":152},"jwtjson-web-token","JWT（JSON Web Token）",[11,155,156,157,159,160,163,164,159,166,169,170,173],{},"JWT 使用 Base64URL 编码（Base64 的 URL 安全变体，将 ",[28,158,30],{}," 替换为 ",[28,161,162],{},"-","，",[28,165,34],{},[28,167,168],{},"_","）。JWT 的 header 和 payload 部分是 Base64URL 编码的 JSON 对象——这就是为什么你可以把一个 JWT 丢进解码器直接读取其中的声明（claims）。",[23,171,172],{},"这并非加密","。签名部分用于验证完整性，但 payload 对任何人都是可读的。",[100,175,177],{"id":176},"http-basic-认证","HTTP Basic 认证",[11,179,180,181,184,185,188],{},"当浏览器或 API 客户端发送 Basic Auth 凭证时，",[28,182,183],{},"用户名:密码"," 字符串会被 Base64 编码后放入 ",[28,186,187],{},"Authorization"," 请求头：",[108,190,195],{"className":191,"code":193,"language":194},[192],"language-text","Authorization: Basic dXNlcjpwYXNzd29yZA==\n","text",[28,196,193],{"__ignoreMap":113},[11,198,199,200,203,204,207,208,211],{},"解码 ",[28,201,202],{},"dXNlcjpwYXNzd29yZA=="," 得到的就是 ",[28,205,206],{},"user:password","。这就是为什么 ",[23,209,210],{},"Basic Auth 必须始终在 HTTPS 下使用","——凭证是可以被轻易还原的。",[100,213,215],{"id":214},"电子邮件附件mime","电子邮件附件（MIME）",[11,217,218],{},"管理邮件附件的 MIME 标准使用 Base64 来编码二进制文件。当你收到一封带有 PDF 附件的邮件时，那个 PDF 在原始邮件源码中就是 Base64 编码的。原本设计用于纯文本的邮件服务器，可以通过这种方式安全地传输二进制内容。",[100,220,222],{"id":221},"在-json-或-xml-中存储二进制数据","在 JSON 或 XML 中存储二进制数据",[11,224,225],{},"JSON 没有原生的二进制类型。当 API 需要在 JSON 响应中包含二进制数据（如缩略图或加密密钥）时，Base64 编码是标准做法。",[15,227,228],{"id":228},"常见误区",[11,230,231,234],{},[23,232,233],{},"\"Base64 是加密\"","\n不是。它可以被轻易还原。永远不要用 Base64 来\"保护\"敏感数据。加密请使用 AES、RSA 等真正的加密算法。",[11,236,237,240],{},[23,238,239],{},"\"Base64 可以压缩数据\"","\n恰恰相反。Base64 会让数据体积增加约 33%。这是为了兼容性而接受的大小代价。",[11,242,243,246],{},[23,244,245],{},"\"存储密码前应该 Base64 编码\"","\n绝对不要这样做。密码应当使用 bcrypt、Argon2 或 scrypt 等合适的算法进行哈希处理。Base64 不提供任何安全保障。",[11,248,249,252,253,159,255,163,257,159,259,261],{},[23,250,251],{},"\"Base64URL 和 Base64 是同一回事\"","\n接近但不完全相同。Base64URL 将 ",[28,254,30],{},[28,256,162],{},[28,258,34],{},[28,260,168],{},"，并省略填充符。这使其可以安全用于 URL 和文件名，无需百分比编码。",[15,263,265],{"id":264},"如何在线进行-base64-编解码","如何在线进行 Base64 编解码",[11,267,268],{},"你不需要写代码就能对内容进行 Base64 编码或解码。ujiffy 的免费 Base64 工具让你可以：",[270,271,272,280,287,290],"ul",{},[273,274,275,276,279],"li",{},"将任何文本或二进制输入",[23,277,278],{},"编码","为 Base64",[273,281,282,283,286],{},"将任何 Base64 字符串",[23,284,285],{},"解码","回原始内容",[273,288,289],{},"完全在浏览器中运行——不向服务器发送任何内容",[273,291,292],{},"支持标准 Base64 和 Base64URL",[11,294,295],{},"开发者需要在代码中使用时的快速参考：",[108,297,301],{"className":298,"code":299,"language":300,"meta":113,"style":113},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F JavaScript\nbtoa(\"hello\")          \u002F\u002F 编码 → \"aGVsbG8=\"\natob(\"aGVsbG8=\")       \u002F\u002F 解码 → \"hello\"\n\n\u002F\u002F Python\nimport base64\nbase64.b64encode(b\"hello\")        # → b'aGVsbG8='\nbase64.b64decode(\"aGVsbG8=\")     # → b'hello'\n","js",[28,302,303,309,332,352,359,365,375,398],{"__ignoreMap":113},[117,304,305],{"class":119,"line":120},[117,306,308],{"class":307},"sHwdD","\u002F\u002F JavaScript\n",[117,310,312,316,320,322,324,326,329],{"class":119,"line":311},2,[117,313,315],{"class":314},"s2Zo4","btoa",[117,317,319],{"class":318},"sTEyZ","(",[117,321,137],{"class":123},[117,323,49],{"class":140},[117,325,137],{"class":123},[117,327,328],{"class":318},")          ",[117,330,331],{"class":307},"\u002F\u002F 编码 → \"aGVsbG8=\"\n",[117,333,335,338,340,342,344,346,349],{"class":119,"line":334},3,[117,336,337],{"class":314},"atob",[117,339,319],{"class":318},[117,341,137],{"class":123},[117,343,53],{"class":140},[117,345,137],{"class":123},[117,347,348],{"class":318},")       ",[117,350,351],{"class":307},"\u002F\u002F 解码 → \"hello\"\n",[117,353,355],{"class":119,"line":354},4,[117,356,358],{"emptyLinePlaceholder":357},true,"\n",[117,360,362],{"class":119,"line":361},5,[117,363,364],{"class":307},"\u002F\u002F Python\n",[117,366,368,372],{"class":119,"line":367},6,[117,369,371],{"class":370},"s7zQu","import",[117,373,374],{"class":318}," base64\n",[117,376,378,381,383,385,387,390,393,395],{"class":119,"line":377},7,[117,379,380],{"class":318},"base64.b64encode(b",[117,382,137],{"class":123},[117,384,49],{"class":140},[117,386,137],{"class":123},[117,388,389],{"class":318},")        # → b",[117,391,392],{"class":123},"'",[117,394,53],{"class":140},[117,396,397],{"class":123},"'\n",[117,399,401,404,406,408,410,413,415,417],{"class":119,"line":400},8,[117,402,403],{"class":318},"base64.b64decode(",[117,405,137],{"class":123},[117,407,53],{"class":140},[117,409,137],{"class":123},[117,411,412],{"class":318},")     # → b",[117,414,392],{"class":123},[117,416,49],{"class":140},[117,418,397],{"class":123},[15,420,421],{"id":421},"小结",[11,423,424],{},"Base64 是一种默默支撑着现代 Web 大量功能的编码方式——从内联图片到认证头，再到 JWT，无处不在。理解它是什么（以及它不是什么）能帮助你正确使用它，避免将其误当成加密手段的安全错误。它是兼容性工具，不是安全工具。请按此认知使用它。",[11,426,427],{},[428,429,431],"a",{"href":430},"\u002Fzh\u002Ftools\u002Fbase64-encoder",[23,432,433],{},"立即使用 ujiffy Base64 编码器 →",[435,436,437],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":113,"searchDepth":311,"depth":311,"links":439},[440,441,442,449,450,451],{"id":17,"depth":311,"text":18},{"id":67,"depth":311,"text":68},{"id":94,"depth":311,"text":95,"children":443},[444,445,446,447,448],{"id":102,"depth":334,"text":103},{"id":152,"depth":334,"text":153},{"id":176,"depth":334,"text":177},{"id":214,"depth":334,"text":215},{"id":221,"depth":334,"text":222},{"id":228,"depth":311,"text":228},{"id":264,"depth":311,"text":265},{"id":421,"depth":311,"text":421},"Base64 不是加密——了解它实际做什么、为什么开发者用它编码图片和 API 凭证，以及如何免费在线编解码。",false,"mdx","zh",{},"\u002Fblog\u002Fzh-base64-encoding-explained","2025-05-18","base64-encoder",{"title":5,"description":452},"blog\u002Fzh-base64-encoding-explained",[463,278,464,465],"base64","开发者工具","Web开发","snapteB-ToirH-bztxGFIw4eEO4KPbhDB_dNoO3ai50",1778831413183]