[{"data":1,"prerenderedAt":2298},["ShallowReactive",2],{"guide-base64url-difference":3},{"id":4,"title":5,"body":6,"date":2290,"description":2291,"extension":2292,"meta":2293,"navigation":154,"path":2294,"readingTime":236,"seo":2295,"stem":2296,"__hash__":2297},"guides\u002Fguides\u002Fbase64url-difference.md","Base64 vs Base64URL: What's the Difference?",{"type":7,"value":8,"toc":2256},"minimark",[9,14,18,21,25,28,78,83,247,251,254,258,332,336,652,656,660,669,690,693,701,704,710,714,717,871,874,878,882,888,938,942,949,1122,1128,1132,1136,1166,1219,1223,1261,1366,1370,1374,1596,1600,1724,1728,1884,1888,1892,1960,1964,2084,2088,2139,2143,2229,2232,2236,2252],[10,11,13],"h2",{"id":12},"introduction","Introduction",[15,16,17],"p",{},"If you have worked with web APIs, JSON Web Tokens (JWT), or URL-safe data transmission, you have likely encountered both Base64 and Base64URL encoding. While they look nearly identical at first glance, the subtle differences between them are critical for correct implementation.",[15,19,20],{},"This guide explains exactly what sets Base64 and Base64URL apart, why those differences exist, and when to use each encoding scheme in your applications.",[10,22,24],{"id":23},"what-is-standard-base64","What is Standard Base64?",[15,26,27],{},"Base64 is a binary-to-text encoding scheme that converts binary data into an ASCII string format using a set of 64 characters. The standard Base64 alphabet consists of:",[29,30,31,39,44,50,60,69],"ul",{},[32,33,34,38],"li",{},[35,36,37],"strong",{},"Uppercase letters A–Z"," (26 characters)",[32,40,41,38],{},[35,42,43],{},"Lowercase letters a–z",[32,45,46,49],{},[35,47,48],{},"Digits 0–9"," (10 characters)",[32,51,52,59],{},[35,53,54,55],{},"The plus sign ",[56,57,58],"code",{},"+"," (value 62)",[32,61,62,68],{},[35,63,64,65],{},"The forward slash ",[56,66,67],{},"\u002F"," (value 63)",[32,70,71,77],{},[35,72,73,74],{},"The equals sign ",[56,75,76],{},"="," (padding character)",[79,80,82],"h3",{"id":81},"standard-base64-example","Standard Base64 Example",[84,85,90],"pre",{"className":86,"code":87,"language":88,"meta":89,"style":89},"language-javascript shiki shiki-themes github-light github-dark","const text = \"Hello World\";\nconst base64 = btoa(text);\nconsole.log(base64); \u002F\u002F SGVsbG8gV29ybGQ=\n\n\u002F\u002F With binary data\nconst binaryData = new Uint8Array([72, 101, 108, 108, 111]);\nconst base64Binary = btoa(String.fromCharCode(...binaryData));\nconsole.log(base64Binary); \u002F\u002F SGVsbG8=\n","javascript","",[56,91,92,116,133,149,156,162,207,234],{"__ignoreMap":89},[93,94,97,101,105,108,112],"span",{"class":95,"line":96},"line",1,[93,98,100],{"class":99},"szBVR","const",[93,102,104],{"class":103},"sj4cs"," text",[93,106,107],{"class":99}," =",[93,109,111],{"class":110},"sZZnC"," \"Hello World\"",[93,113,115],{"class":114},"sVt8B",";\n",[93,117,119,121,124,126,130],{"class":95,"line":118},2,[93,120,100],{"class":99},[93,122,123],{"class":103}," base64",[93,125,107],{"class":99},[93,127,129],{"class":128},"sScJk"," btoa",[93,131,132],{"class":114},"(text);\n",[93,134,136,139,142,145],{"class":95,"line":135},3,[93,137,138],{"class":114},"console.",[93,140,141],{"class":128},"log",[93,143,144],{"class":114},"(base64); ",[93,146,148],{"class":147},"sJ8bj","\u002F\u002F SGVsbG8gV29ybGQ=\n",[93,150,152],{"class":95,"line":151},4,[93,153,155],{"emptyLinePlaceholder":154},true,"\n",[93,157,159],{"class":95,"line":158},5,[93,160,161],{"class":147},"\u002F\u002F With binary data\n",[93,163,165,167,170,172,175,178,181,184,187,190,192,195,197,199,201,204],{"class":95,"line":164},6,[93,166,100],{"class":99},[93,168,169],{"class":103}," binaryData",[93,171,107],{"class":99},[93,173,174],{"class":99}," new",[93,176,177],{"class":128}," Uint8Array",[93,179,180],{"class":114},"([",[93,182,183],{"class":103},"72",[93,185,186],{"class":114},", ",[93,188,189],{"class":103},"101",[93,191,186],{"class":114},[93,193,194],{"class":103},"108",[93,196,186],{"class":114},[93,198,194],{"class":103},[93,200,186],{"class":114},[93,202,203],{"class":103},"111",[93,205,206],{"class":114},"]);\n",[93,208,210,212,215,217,219,222,225,228,231],{"class":95,"line":209},7,[93,211,100],{"class":99},[93,213,214],{"class":103}," base64Binary",[93,216,107],{"class":99},[93,218,129],{"class":128},[93,220,221],{"class":114},"(String.",[93,223,224],{"class":128},"fromCharCode",[93,226,227],{"class":114},"(",[93,229,230],{"class":99},"...",[93,232,233],{"class":114},"binaryData));\n",[93,235,237,239,241,244],{"class":95,"line":236},8,[93,238,138],{"class":114},[93,240,141],{"class":128},[93,242,243],{"class":114},"(base64Binary); ",[93,245,246],{"class":147},"\u002F\u002F SGVsbG8=\n",[10,248,250],{"id":249},"what-is-base64url","What is Base64URL?",[15,252,253],{},"Base64URL is a URL-safe variant of Base64 encoding defined in RFC 4648. It modifies the standard Base64 alphabet to make the output safe for use in URLs, filenames, and HTML form values without requiring percent-encoding.",[79,255,257],{"id":256},"the-key-differences","The Key Differences",[259,260,261,277],"table",{},[262,263,264],"thead",{},[265,266,267,271,274],"tr",{},[268,269,270],"th",{},"Character in Base64",[268,272,273],{},"Character in Base64URL",[268,275,276],{},"Reason",[278,279,280,299,317],"tbody",{},[265,281,282,288,294],{},[283,284,285,287],"td",{},[56,286,58],{}," (plus)",[283,289,290,293],{},[56,291,292],{},"-"," (hyphen)",[283,295,296,298],{},[56,297,58],{}," is meaningful in URLs (space encoding)",[265,300,301,306,312],{},[283,302,303,305],{},[56,304,67],{}," (slash)",[283,307,308,311],{},[56,309,310],{},"_"," (underscore)",[283,313,314,316],{},[56,315,67],{}," is a path separator in URLs",[265,318,319,324,327],{},[283,320,321,322],{},"Padding ",[56,323,76],{},[283,325,326],{},"Removed or optional",[283,328,329,331],{},[56,330,76],{}," can be percent-encoded in URLs",[79,333,335],{"id":334},"base64url-example","Base64URL Example",[84,337,339],{"className":86,"code":338,"language":88,"meta":89,"style":89},"function base64ToBase64Url(base64) {\n  return base64\n    .replace(\u002F\\+\u002Fg, '-')\n    .replace(\u002F\\\u002F\u002Fg, '_')\n    .replace(\u002F=+$\u002F, '');\n}\n\nfunction base64UrlToBase64(base64url) {\n  let base64 = base64url\n    .replace(\u002F-\u002Fg, '+')\n    .replace(\u002F_\u002Fg, '\u002F');\n  \u002F\u002F Restore padding\n  while (base64.length % 4) {\n    base64 += '=';\n  }\n  return base64;\n}\n\nconst text = \"Hello World\";\nconst standardBase64 = btoa(text); \u002F\u002F SGVsbG8gV29ybGQ=\nconst base64url = base64ToBase64Url(standardBase64); \u002F\u002F SGVsbG8gV29ybGQ\nconsole.log(base64url);\n",[56,340,341,358,366,395,419,445,450,454,468,482,506,530,536,556,570,576,584,589,594,607,624,642],{"__ignoreMap":89},[93,342,343,346,349,351,355],{"class":95,"line":96},[93,344,345],{"class":99},"function",[93,347,348],{"class":128}," base64ToBase64Url",[93,350,227],{"class":114},[93,352,354],{"class":353},"s4XuR","base64",[93,356,357],{"class":114},") {\n",[93,359,360,363],{"class":95,"line":118},[93,361,362],{"class":99},"  return",[93,364,365],{"class":114}," base64\n",[93,367,368,371,374,376,378,382,384,387,389,392],{"class":95,"line":135},[93,369,370],{"class":114},"    .",[93,372,373],{"class":128},"replace",[93,375,227],{"class":114},[93,377,67],{"class":110},[93,379,381],{"class":380},"snhLl","\\+",[93,383,67],{"class":110},[93,385,386],{"class":99},"g",[93,388,186],{"class":114},[93,390,391],{"class":110},"'-'",[93,393,394],{"class":114},")\n",[93,396,397,399,401,403,405,408,410,412,414,417],{"class":95,"line":151},[93,398,370],{"class":114},[93,400,373],{"class":128},[93,402,227],{"class":114},[93,404,67],{"class":110},[93,406,407],{"class":380},"\\\u002F",[93,409,67],{"class":110},[93,411,386],{"class":99},[93,413,186],{"class":114},[93,415,416],{"class":110},"'_'",[93,418,394],{"class":114},[93,420,421,423,425,427,429,432,435,437,439,442],{"class":95,"line":158},[93,422,370],{"class":114},[93,424,373],{"class":128},[93,426,227],{"class":114},[93,428,67],{"class":110},[93,430,76],{"class":431},"sA_wV",[93,433,434],{"class":99},"+$",[93,436,67],{"class":110},[93,438,186],{"class":114},[93,440,441],{"class":110},"''",[93,443,444],{"class":114},");\n",[93,446,447],{"class":95,"line":164},[93,448,449],{"class":114},"}\n",[93,451,452],{"class":95,"line":209},[93,453,155],{"emptyLinePlaceholder":154},[93,455,456,458,461,463,466],{"class":95,"line":236},[93,457,345],{"class":99},[93,459,460],{"class":128}," base64UrlToBase64",[93,462,227],{"class":114},[93,464,465],{"class":353},"base64url",[93,467,357],{"class":114},[93,469,471,474,477,479],{"class":95,"line":470},9,[93,472,473],{"class":99},"  let",[93,475,476],{"class":114}," base64 ",[93,478,76],{"class":99},[93,480,481],{"class":114}," base64url\n",[93,483,485,487,489,491,493,495,497,499,501,504],{"class":95,"line":484},10,[93,486,370],{"class":114},[93,488,373],{"class":128},[93,490,227],{"class":114},[93,492,67],{"class":110},[93,494,292],{"class":431},[93,496,67],{"class":110},[93,498,386],{"class":99},[93,500,186],{"class":114},[93,502,503],{"class":110},"'+'",[93,505,394],{"class":114},[93,507,509,511,513,515,517,519,521,523,525,528],{"class":95,"line":508},11,[93,510,370],{"class":114},[93,512,373],{"class":128},[93,514,227],{"class":114},[93,516,67],{"class":110},[93,518,310],{"class":431},[93,520,67],{"class":110},[93,522,386],{"class":99},[93,524,186],{"class":114},[93,526,527],{"class":110},"'\u002F'",[93,529,444],{"class":114},[93,531,533],{"class":95,"line":532},12,[93,534,535],{"class":147},"  \u002F\u002F Restore padding\n",[93,537,539,542,545,548,551,554],{"class":95,"line":538},13,[93,540,541],{"class":99},"  while",[93,543,544],{"class":114}," (base64.",[93,546,547],{"class":103},"length",[93,549,550],{"class":99}," %",[93,552,553],{"class":103}," 4",[93,555,357],{"class":114},[93,557,559,562,565,568],{"class":95,"line":558},14,[93,560,561],{"class":114},"    base64 ",[93,563,564],{"class":99},"+=",[93,566,567],{"class":110}," '='",[93,569,115],{"class":114},[93,571,573],{"class":95,"line":572},15,[93,574,575],{"class":114},"  }\n",[93,577,579,581],{"class":95,"line":578},16,[93,580,362],{"class":99},[93,582,583],{"class":114}," base64;\n",[93,585,587],{"class":95,"line":586},17,[93,588,449],{"class":114},[93,590,592],{"class":95,"line":591},18,[93,593,155],{"emptyLinePlaceholder":154},[93,595,597,599,601,603,605],{"class":95,"line":596},19,[93,598,100],{"class":99},[93,600,104],{"class":103},[93,602,107],{"class":99},[93,604,111],{"class":110},[93,606,115],{"class":114},[93,608,610,612,615,617,619,622],{"class":95,"line":609},20,[93,611,100],{"class":99},[93,613,614],{"class":103}," standardBase64",[93,616,107],{"class":99},[93,618,129],{"class":128},[93,620,621],{"class":114},"(text); ",[93,623,148],{"class":147},[93,625,627,629,632,634,636,639],{"class":95,"line":626},21,[93,628,100],{"class":99},[93,630,631],{"class":103}," base64url",[93,633,107],{"class":99},[93,635,348],{"class":128},[93,637,638],{"class":114},"(standardBase64); ",[93,640,641],{"class":147},"\u002F\u002F SGVsbG8gV29ybGQ\n",[93,643,645,647,649],{"class":95,"line":644},22,[93,646,138],{"class":114},[93,648,141],{"class":128},[93,650,651],{"class":114},"(base64url);\n",[10,653,655],{"id":654},"why-does-this-matter","Why Does This Matter?",[79,657,659],{"id":658},"the-url-problem","The URL Problem",[15,661,662,663,665,666,668],{},"Standard Base64 uses ",[56,664,58],{}," and ",[56,667,67],{}," characters that have special meanings in URLs:",[29,670,671,676,681],{},[32,672,673,675],{},[56,674,58],{}," is interpreted as a space in URL query strings (application\u002Fx-www-form-urlencoded)",[32,677,678,680],{},[56,679,67],{}," is a path separator that can break URL routing",[32,682,683,685,686,689],{},[56,684,76],{}," is sometimes percent-encoded as ",[56,687,688],{},"%3D",", making URLs longer and less readable",[15,691,692],{},"When you include a standard Base64 string in a URL, you typically need to percent-encode these characters:",[84,694,699],{"className":695,"code":697,"language":698},[696],"language-text","Standard Base64 in URL (problematic):\nhttps:\u002F\u002Fexample.com\u002Fapi\u002Fdata?token=SGVsbG8gV29ybGQ=+abc\u002Fdef\n\nAfter percent-encoding (ugly):\nhttps:\u002F\u002Fexample.com\u002Fapi\u002Fdata?token=SGVsbG8gV29ybGQ%3D%2Babc%2Fdef\n","text",[56,700,697],{"__ignoreMap":89},[15,702,703],{},"With Base64URL, the same token becomes:",[84,705,708],{"className":706,"code":707,"language":698},[696],"Base64URL in URL (clean):\nhttps:\u002F\u002Fexample.com\u002Fapi\u002Fdata?token=SGVsbG8gV29ybGQ-abc_def\n",[56,709,707],{"__ignoreMap":89},[79,711,713],{"id":712},"jwt-the-primary-use-case","JWT: The Primary Use Case",[15,715,716],{},"JSON Web Tokens (JWT) use Base64URL encoding for all three parts (header, payload, signature). This is specified in RFC 7519:",[84,718,720],{"className":86,"code":719,"language":88,"meta":89,"style":89},"\u002F\u002F JWT structure: header.payload.signature\n\u002F\u002F Each part is Base64URL-encoded\n\nconst header = { alg: \"HS256\", typ: \"JWT\" };\nconst payload = { sub: \"1234567890\", name: \"John Doe\" };\n\nconst encodedHeader = base64ToBase64Url(btoa(JSON.stringify(header)));\nconst encodedPayload = base64ToBase64Url(btoa(JSON.stringify(payload)));\n\nconsole.log(encodedHeader); \u002F\u002F eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\nconsole.log(encodedPayload); \u002F\u002F eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIn0\n",[56,721,722,727,732,736,760,783,787,817,843,847,859],{"__ignoreMap":89},[93,723,724],{"class":95,"line":96},[93,725,726],{"class":147},"\u002F\u002F JWT structure: header.payload.signature\n",[93,728,729],{"class":95,"line":118},[93,730,731],{"class":147},"\u002F\u002F Each part is Base64URL-encoded\n",[93,733,734],{"class":95,"line":135},[93,735,155],{"emptyLinePlaceholder":154},[93,737,738,740,743,745,748,751,754,757],{"class":95,"line":151},[93,739,100],{"class":99},[93,741,742],{"class":103}," header",[93,744,107],{"class":99},[93,746,747],{"class":114}," { alg: ",[93,749,750],{"class":110},"\"HS256\"",[93,752,753],{"class":114},", typ: ",[93,755,756],{"class":110},"\"JWT\"",[93,758,759],{"class":114}," };\n",[93,761,762,764,767,769,772,775,778,781],{"class":95,"line":158},[93,763,100],{"class":99},[93,765,766],{"class":103}," payload",[93,768,107],{"class":99},[93,770,771],{"class":114}," { sub: ",[93,773,774],{"class":110},"\"1234567890\"",[93,776,777],{"class":114},", name: ",[93,779,780],{"class":110},"\"John Doe\"",[93,782,759],{"class":114},[93,784,785],{"class":95,"line":164},[93,786,155],{"emptyLinePlaceholder":154},[93,788,789,791,794,796,798,800,803,805,808,811,814],{"class":95,"line":209},[93,790,100],{"class":99},[93,792,793],{"class":103}," encodedHeader",[93,795,107],{"class":99},[93,797,348],{"class":128},[93,799,227],{"class":114},[93,801,802],{"class":128},"btoa",[93,804,227],{"class":114},[93,806,807],{"class":103},"JSON",[93,809,810],{"class":114},".",[93,812,813],{"class":128},"stringify",[93,815,816],{"class":114},"(header)));\n",[93,818,819,821,824,826,828,830,832,834,836,838,840],{"class":95,"line":236},[93,820,100],{"class":99},[93,822,823],{"class":103}," encodedPayload",[93,825,107],{"class":99},[93,827,348],{"class":128},[93,829,227],{"class":114},[93,831,802],{"class":128},[93,833,227],{"class":114},[93,835,807],{"class":103},[93,837,810],{"class":114},[93,839,813],{"class":128},[93,841,842],{"class":114},"(payload)));\n",[93,844,845],{"class":95,"line":470},[93,846,155],{"emptyLinePlaceholder":154},[93,848,849,851,853,856],{"class":95,"line":484},[93,850,138],{"class":114},[93,852,141],{"class":128},[93,854,855],{"class":114},"(encodedHeader); ",[93,857,858],{"class":147},"\u002F\u002F eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\n",[93,860,861,863,865,868],{"class":95,"line":508},[93,862,138],{"class":114},[93,864,141],{"class":128},[93,866,867],{"class":114},"(encodedPayload); ",[93,869,870],{"class":147},"\u002F\u002F eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIn0\n",[15,872,873],{},"Using standard Base64 in JWT would cause parsing errors when the token is passed via URL or stored in cookies.",[10,875,877],{"id":876},"padding-to-pad-or-not-to-pad","Padding: To Pad or Not to Pad?",[79,879,881],{"id":880},"standard-base64-padding","Standard Base64 Padding",[15,883,884,885,887],{},"Standard Base64 always includes padding ",[56,886,76],{}," characters to make the output length a multiple of 4:",[84,889,891],{"className":86,"code":890,"language":88,"meta":89,"style":89},"btoa(\"A\");    \u002F\u002F \"QQ==\"  (padded to 4 characters)\nbtoa(\"AB\");   \u002F\u002F \"QUI=\"  (padded to 4 characters)\nbtoa(\"ABC\");  \u002F\u002F \"QUJD\"  (already multiple of 3, no padding)\n",[56,892,893,908,923],{"__ignoreMap":89},[93,894,895,897,899,902,905],{"class":95,"line":96},[93,896,802],{"class":128},[93,898,227],{"class":114},[93,900,901],{"class":110},"\"A\"",[93,903,904],{"class":114},");    ",[93,906,907],{"class":147},"\u002F\u002F \"QQ==\"  (padded to 4 characters)\n",[93,909,910,912,914,917,920],{"class":95,"line":118},[93,911,802],{"class":128},[93,913,227],{"class":114},[93,915,916],{"class":110},"\"AB\"",[93,918,919],{"class":114},");   ",[93,921,922],{"class":147},"\u002F\u002F \"QUI=\"  (padded to 4 characters)\n",[93,924,925,927,929,932,935],{"class":95,"line":135},[93,926,802],{"class":128},[93,928,227],{"class":114},[93,930,931],{"class":110},"\"ABC\"",[93,933,934],{"class":114},");  ",[93,936,937],{"class":147},"\u002F\u002F \"QUJD\"  (already multiple of 3, no padding)\n",[79,939,941],{"id":940},"base64url-padding","Base64URL Padding",[15,943,944,945,948],{},"Base64URL typically ",[35,946,947],{},"removes padding"," for URL safety. The decoding side must handle the missing padding:",[84,950,952],{"className":86,"code":951,"language":88,"meta":89,"style":89},"function decodeBase64Url(base64url) {\n  \u002F\u002F Add padding if necessary\n  const padded = base64url + '==='.slice((base64url.length + 3) % 4);\n  const base64 = padded.replace(\u002F-\u002Fg, '+').replace(\u002F_\u002Fg, '\u002F');\n  return atob(base64);\n}\n\n\u002F\u002F Usage\nconst encoded = \"SGVsbG8\"; \u002F\u002F No padding\nconst decoded = decodeBase64Url(encoded); \u002F\u002F \"Hello\"\n",[56,953,954,967,972,1016,1064,1074,1078,1082,1087,1105],{"__ignoreMap":89},[93,955,956,958,961,963,965],{"class":95,"line":96},[93,957,345],{"class":99},[93,959,960],{"class":128}," decodeBase64Url",[93,962,227],{"class":114},[93,964,465],{"class":353},[93,966,357],{"class":114},[93,968,969],{"class":95,"line":118},[93,970,971],{"class":147},"  \u002F\u002F Add padding if necessary\n",[93,973,974,977,980,982,985,987,990,992,995,998,1000,1003,1006,1009,1012,1014],{"class":95,"line":135},[93,975,976],{"class":99},"  const",[93,978,979],{"class":103}," padded",[93,981,107],{"class":99},[93,983,984],{"class":114}," base64url ",[93,986,58],{"class":99},[93,988,989],{"class":110}," '==='",[93,991,810],{"class":114},[93,993,994],{"class":128},"slice",[93,996,997],{"class":114},"((base64url.",[93,999,547],{"class":103},[93,1001,1002],{"class":99}," +",[93,1004,1005],{"class":103}," 3",[93,1007,1008],{"class":114},") ",[93,1010,1011],{"class":99},"%",[93,1013,553],{"class":103},[93,1015,444],{"class":114},[93,1017,1018,1020,1022,1024,1027,1029,1031,1033,1035,1037,1039,1041,1043,1046,1048,1050,1052,1054,1056,1058,1060,1062],{"class":95,"line":151},[93,1019,976],{"class":99},[93,1021,123],{"class":103},[93,1023,107],{"class":99},[93,1025,1026],{"class":114}," padded.",[93,1028,373],{"class":128},[93,1030,227],{"class":114},[93,1032,67],{"class":110},[93,1034,292],{"class":431},[93,1036,67],{"class":110},[93,1038,386],{"class":99},[93,1040,186],{"class":114},[93,1042,503],{"class":110},[93,1044,1045],{"class":114},").",[93,1047,373],{"class":128},[93,1049,227],{"class":114},[93,1051,67],{"class":110},[93,1053,310],{"class":431},[93,1055,67],{"class":110},[93,1057,386],{"class":99},[93,1059,186],{"class":114},[93,1061,527],{"class":110},[93,1063,444],{"class":114},[93,1065,1066,1068,1071],{"class":95,"line":158},[93,1067,362],{"class":99},[93,1069,1070],{"class":128}," atob",[93,1072,1073],{"class":114},"(base64);\n",[93,1075,1076],{"class":95,"line":164},[93,1077,449],{"class":114},[93,1079,1080],{"class":95,"line":209},[93,1081,155],{"emptyLinePlaceholder":154},[93,1083,1084],{"class":95,"line":236},[93,1085,1086],{"class":147},"\u002F\u002F Usage\n",[93,1088,1089,1091,1094,1096,1099,1102],{"class":95,"line":470},[93,1090,100],{"class":99},[93,1092,1093],{"class":103}," encoded",[93,1095,107],{"class":99},[93,1097,1098],{"class":110}," \"SGVsbG8\"",[93,1100,1101],{"class":114},"; ",[93,1103,1104],{"class":147},"\u002F\u002F No padding\n",[93,1106,1107,1109,1112,1114,1116,1119],{"class":95,"line":484},[93,1108,100],{"class":99},[93,1110,1111],{"class":103}," decoded",[93,1113,107],{"class":99},[93,1115,960],{"class":128},[93,1117,1118],{"class":114},"(encoded); ",[93,1120,1121],{"class":147},"\u002F\u002F \"Hello\"\n",[15,1123,1124,1127],{},[35,1125,1126],{},"Note",": Some implementations keep the padding in Base64URL. Always check what your target system expects.",[10,1129,1131],{"id":1130},"when-to-use-each-encoding","When to Use Each Encoding",[79,1133,1135],{"id":1134},"use-standard-base64-when","Use Standard Base64 When:",[29,1137,1138,1145,1152,1163],{},[32,1139,1140,1141,1144],{},"Encoding binary data for ",[35,1142,1143],{},"email attachments"," (MIME)",[32,1146,1147,1148,1151],{},"Storing binary data in ",[35,1149,1150],{},"XML or JSON"," (non-URL contexts)",[32,1153,1154,1155,1158,1159,1162],{},"Encoding ",[35,1156,1157],{},"Data URIs"," for CSS or HTML (e.g., ",[56,1160,1161],{},"data:image\u002Fpng;base64,...",")",[32,1164,1165],{},"General-purpose encoding where the output won't be used in URLs",[84,1167,1169],{"className":86,"code":1168,"language":88,"meta":89,"style":89},"\u002F\u002F Data URI example (uses standard Base64)\nconst canvas = document.getElementById('my-canvas');\nconst dataUrl = canvas.toDataURL(); \u002F\u002F data:image\u002Fpng;base64,iVBORw0KGgo...\n",[56,1170,1171,1176,1198],{"__ignoreMap":89},[93,1172,1173],{"class":95,"line":96},[93,1174,1175],{"class":147},"\u002F\u002F Data URI example (uses standard Base64)\n",[93,1177,1178,1180,1183,1185,1188,1191,1193,1196],{"class":95,"line":118},[93,1179,100],{"class":99},[93,1181,1182],{"class":103}," canvas",[93,1184,107],{"class":99},[93,1186,1187],{"class":114}," document.",[93,1189,1190],{"class":128},"getElementById",[93,1192,227],{"class":114},[93,1194,1195],{"class":110},"'my-canvas'",[93,1197,444],{"class":114},[93,1199,1200,1202,1205,1207,1210,1213,1216],{"class":95,"line":135},[93,1201,100],{"class":99},[93,1203,1204],{"class":103}," dataUrl",[93,1206,107],{"class":99},[93,1208,1209],{"class":114}," canvas.",[93,1211,1212],{"class":128},"toDataURL",[93,1214,1215],{"class":114},"(); ",[93,1217,1218],{"class":147},"\u002F\u002F data:image\u002Fpng;base64,iVBORw0KGgo...\n",[79,1220,1222],{"id":1221},"use-base64url-when","Use Base64URL When:",[29,1224,1225,1235,1241,1247,1254],{},[32,1226,1227,1228,1231,1232],{},"Encoding data for ",[35,1229,1230],{},"URL query parameters"," or ",[35,1233,1234],{},"path segments",[32,1236,1237,1238],{},"Working with ",[35,1239,1240],{},"JWT tokens",[32,1242,1243,1244],{},"Storing encoded data in ",[35,1245,1246],{},"cookies",[32,1248,1249,1250,1253],{},"Generating ",[35,1251,1252],{},"filename-safe"," encoded strings",[32,1255,1256,1257,1260],{},"Using ",[35,1258,1259],{},"OAuth 2.0"," state parameters",[84,1262,1264],{"className":86,"code":1263,"language":88,"meta":89,"style":89},"\u002F\u002F Storing state in OAuth flow (uses Base64URL)\nconst state = {\n  redirect: '\u002Fdashboard',\n  csrf: 'random-token-here'\n};\nconst encodedState = base64ToBase64Url(\n  btoa(JSON.stringify(state))\n);\n\u002F\u002F Use in redirect URL\nconst authUrl = `https:\u002F\u002Fauth.example.com\u002Fauthorize?state=${encodedState}`;\n",[56,1265,1266,1271,1283,1294,1302,1307,1321,1337,1341,1346],{"__ignoreMap":89},[93,1267,1268],{"class":95,"line":96},[93,1269,1270],{"class":147},"\u002F\u002F Storing state in OAuth flow (uses Base64URL)\n",[93,1272,1273,1275,1278,1280],{"class":95,"line":118},[93,1274,100],{"class":99},[93,1276,1277],{"class":103}," state",[93,1279,107],{"class":99},[93,1281,1282],{"class":114}," {\n",[93,1284,1285,1288,1291],{"class":95,"line":135},[93,1286,1287],{"class":114},"  redirect: ",[93,1289,1290],{"class":110},"'\u002Fdashboard'",[93,1292,1293],{"class":114},",\n",[93,1295,1296,1299],{"class":95,"line":151},[93,1297,1298],{"class":114},"  csrf: ",[93,1300,1301],{"class":110},"'random-token-here'\n",[93,1303,1304],{"class":95,"line":158},[93,1305,1306],{"class":114},"};\n",[93,1308,1309,1311,1314,1316,1318],{"class":95,"line":164},[93,1310,100],{"class":99},[93,1312,1313],{"class":103}," encodedState",[93,1315,107],{"class":99},[93,1317,348],{"class":128},[93,1319,1320],{"class":114},"(\n",[93,1322,1323,1326,1328,1330,1332,1334],{"class":95,"line":209},[93,1324,1325],{"class":128},"  btoa",[93,1327,227],{"class":114},[93,1329,807],{"class":103},[93,1331,810],{"class":114},[93,1333,813],{"class":128},[93,1335,1336],{"class":114},"(state))\n",[93,1338,1339],{"class":95,"line":236},[93,1340,444],{"class":114},[93,1342,1343],{"class":95,"line":470},[93,1344,1345],{"class":147},"\u002F\u002F Use in redirect URL\n",[93,1347,1348,1350,1353,1355,1358,1361,1364],{"class":95,"line":484},[93,1349,100],{"class":99},[93,1351,1352],{"class":103}," authUrl",[93,1354,107],{"class":99},[93,1356,1357],{"class":110}," `https:\u002F\u002Fauth.example.com\u002Fauthorize?state=${",[93,1359,1360],{"class":114},"encodedState",[93,1362,1363],{"class":110},"}`",[93,1365,115],{"class":114},[10,1367,1369],{"id":1368},"implementation-in-popular-languages","Implementation in Popular Languages",[79,1371,1373],{"id":1372},"nodejs","Node.js",[84,1375,1377],{"className":86,"code":1376,"language":88,"meta":89,"style":89},"const crypto = require('crypto');\n\n\u002F\u002F Standard Base64\nconst standard = Buffer.from('Hello World').toString('base64');\nconsole.log(standard); \u002F\u002F SGVsbG8gV29ybGQ=\n\n\u002F\u002F Base64URL\nfunction toBase64Url(buffer) {\n  return buffer.toString('base64')\n    .replace(\u002F\\+\u002Fg, '-')\n    .replace(\u002F\\\u002F\u002Fg, '_')\n    .replace(\u002F=+$\u002F, '');\n}\n\nconst urlSafe = toBase64Url(Buffer.from('Hello World'));\nconsole.log(urlSafe); \u002F\u002F SGVsbG8gV29ybGQ\n",[56,1378,1379,1398,1402,1407,1439,1450,1454,1459,1473,1488,1510,1532,1554,1558,1562,1585],{"__ignoreMap":89},[93,1380,1381,1383,1386,1388,1391,1393,1396],{"class":95,"line":96},[93,1382,100],{"class":99},[93,1384,1385],{"class":103}," crypto",[93,1387,107],{"class":99},[93,1389,1390],{"class":128}," require",[93,1392,227],{"class":114},[93,1394,1395],{"class":110},"'crypto'",[93,1397,444],{"class":114},[93,1399,1400],{"class":95,"line":118},[93,1401,155],{"emptyLinePlaceholder":154},[93,1403,1404],{"class":95,"line":135},[93,1405,1406],{"class":147},"\u002F\u002F Standard Base64\n",[93,1408,1409,1411,1414,1416,1419,1422,1424,1427,1429,1432,1434,1437],{"class":95,"line":151},[93,1410,100],{"class":99},[93,1412,1413],{"class":103}," standard",[93,1415,107],{"class":99},[93,1417,1418],{"class":114}," Buffer.",[93,1420,1421],{"class":128},"from",[93,1423,227],{"class":114},[93,1425,1426],{"class":110},"'Hello World'",[93,1428,1045],{"class":114},[93,1430,1431],{"class":128},"toString",[93,1433,227],{"class":114},[93,1435,1436],{"class":110},"'base64'",[93,1438,444],{"class":114},[93,1440,1441,1443,1445,1448],{"class":95,"line":158},[93,1442,138],{"class":114},[93,1444,141],{"class":128},[93,1446,1447],{"class":114},"(standard); ",[93,1449,148],{"class":147},[93,1451,1452],{"class":95,"line":164},[93,1453,155],{"emptyLinePlaceholder":154},[93,1455,1456],{"class":95,"line":209},[93,1457,1458],{"class":147},"\u002F\u002F Base64URL\n",[93,1460,1461,1463,1466,1468,1471],{"class":95,"line":236},[93,1462,345],{"class":99},[93,1464,1465],{"class":128}," toBase64Url",[93,1467,227],{"class":114},[93,1469,1470],{"class":353},"buffer",[93,1472,357],{"class":114},[93,1474,1475,1477,1480,1482,1484,1486],{"class":95,"line":470},[93,1476,362],{"class":99},[93,1478,1479],{"class":114}," buffer.",[93,1481,1431],{"class":128},[93,1483,227],{"class":114},[93,1485,1436],{"class":110},[93,1487,394],{"class":114},[93,1489,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508],{"class":95,"line":484},[93,1491,370],{"class":114},[93,1493,373],{"class":128},[93,1495,227],{"class":114},[93,1497,67],{"class":110},[93,1499,381],{"class":380},[93,1501,67],{"class":110},[93,1503,386],{"class":99},[93,1505,186],{"class":114},[93,1507,391],{"class":110},[93,1509,394],{"class":114},[93,1511,1512,1514,1516,1518,1520,1522,1524,1526,1528,1530],{"class":95,"line":508},[93,1513,370],{"class":114},[93,1515,373],{"class":128},[93,1517,227],{"class":114},[93,1519,67],{"class":110},[93,1521,407],{"class":380},[93,1523,67],{"class":110},[93,1525,386],{"class":99},[93,1527,186],{"class":114},[93,1529,416],{"class":110},[93,1531,394],{"class":114},[93,1533,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552],{"class":95,"line":532},[93,1535,370],{"class":114},[93,1537,373],{"class":128},[93,1539,227],{"class":114},[93,1541,67],{"class":110},[93,1543,76],{"class":431},[93,1545,434],{"class":99},[93,1547,67],{"class":110},[93,1549,186],{"class":114},[93,1551,441],{"class":110},[93,1553,444],{"class":114},[93,1555,1556],{"class":95,"line":538},[93,1557,449],{"class":114},[93,1559,1560],{"class":95,"line":558},[93,1561,155],{"emptyLinePlaceholder":154},[93,1563,1564,1566,1569,1571,1573,1576,1578,1580,1582],{"class":95,"line":572},[93,1565,100],{"class":99},[93,1567,1568],{"class":103}," urlSafe",[93,1570,107],{"class":99},[93,1572,1465],{"class":128},[93,1574,1575],{"class":114},"(Buffer.",[93,1577,1421],{"class":128},[93,1579,227],{"class":114},[93,1581,1426],{"class":110},[93,1583,1584],{"class":114},"));\n",[93,1586,1587,1589,1591,1594],{"class":95,"line":578},[93,1588,138],{"class":114},[93,1590,141],{"class":128},[93,1592,1593],{"class":114},"(urlSafe); ",[93,1595,641],{"class":147},[79,1597,1599],{"id":1598},"python","Python",[84,1601,1604],{"className":1602,"code":1603,"language":1598,"meta":89,"style":89},"language-python shiki shiki-themes github-light github-dark","import base64\n\ndef to_base64url(data: bytes) -> str:\n    # Standard Base64\n    standard = base64.b64encode(data).decode('ascii')\n    # Convert to Base64URL\n    url_safe = standard.replace('+', '-').replace('\u002F', '_').rstrip('=')\n    return url_safe\n\ndef from_base64url(base64url: str) -> bytes:\n    # Restore standard Base64\n    standard = base64url.replace('-', '+').replace('_', '\u002F')\n    # Restore padding\n    padding = 4 - len(standard) % 4\n    if padding != 4:\n        standard += '=' * padding\n    return base64.b64decode(standard)\n\n# Usage\nencoded = to_base64url(b\"Hello World\")\nprint(encoded)  # SGVsbG8gV29ybGQ\n\ndecoded = from_base64url(encoded)\nprint(decoded)  # b'Hello World'\n",[56,1605,1606,1611,1615,1620,1625,1630,1635,1640,1645,1649,1654,1659,1664,1669,1674,1679,1684,1689,1693,1698,1703,1708,1712,1718],{"__ignoreMap":89},[93,1607,1608],{"class":95,"line":96},[93,1609,1610],{},"import base64\n",[93,1612,1613],{"class":95,"line":118},[93,1614,155],{"emptyLinePlaceholder":154},[93,1616,1617],{"class":95,"line":135},[93,1618,1619],{},"def to_base64url(data: bytes) -> str:\n",[93,1621,1622],{"class":95,"line":151},[93,1623,1624],{},"    # Standard Base64\n",[93,1626,1627],{"class":95,"line":158},[93,1628,1629],{},"    standard = base64.b64encode(data).decode('ascii')\n",[93,1631,1632],{"class":95,"line":164},[93,1633,1634],{},"    # Convert to Base64URL\n",[93,1636,1637],{"class":95,"line":209},[93,1638,1639],{},"    url_safe = standard.replace('+', '-').replace('\u002F', '_').rstrip('=')\n",[93,1641,1642],{"class":95,"line":236},[93,1643,1644],{},"    return url_safe\n",[93,1646,1647],{"class":95,"line":470},[93,1648,155],{"emptyLinePlaceholder":154},[93,1650,1651],{"class":95,"line":484},[93,1652,1653],{},"def from_base64url(base64url: str) -> bytes:\n",[93,1655,1656],{"class":95,"line":508},[93,1657,1658],{},"    # Restore standard Base64\n",[93,1660,1661],{"class":95,"line":532},[93,1662,1663],{},"    standard = base64url.replace('-', '+').replace('_', '\u002F')\n",[93,1665,1666],{"class":95,"line":538},[93,1667,1668],{},"    # Restore padding\n",[93,1670,1671],{"class":95,"line":558},[93,1672,1673],{},"    padding = 4 - len(standard) % 4\n",[93,1675,1676],{"class":95,"line":572},[93,1677,1678],{},"    if padding != 4:\n",[93,1680,1681],{"class":95,"line":578},[93,1682,1683],{},"        standard += '=' * padding\n",[93,1685,1686],{"class":95,"line":586},[93,1687,1688],{},"    return base64.b64decode(standard)\n",[93,1690,1691],{"class":95,"line":591},[93,1692,155],{"emptyLinePlaceholder":154},[93,1694,1695],{"class":95,"line":596},[93,1696,1697],{},"# Usage\n",[93,1699,1700],{"class":95,"line":609},[93,1701,1702],{},"encoded = to_base64url(b\"Hello World\")\n",[93,1704,1705],{"class":95,"line":626},[93,1706,1707],{},"print(encoded)  # SGVsbG8gV29ybGQ\n",[93,1709,1710],{"class":95,"line":644},[93,1711,155],{"emptyLinePlaceholder":154},[93,1713,1715],{"class":95,"line":1714},23,[93,1716,1717],{},"decoded = from_base64url(encoded)\n",[93,1719,1721],{"class":95,"line":1720},24,[93,1722,1723],{},"print(decoded)  # b'Hello World'\n",[79,1725,1727],{"id":1726},"go","Go",[84,1729,1732],{"className":1730,"code":1731,"language":1726,"meta":89,"style":89},"language-go shiki shiki-themes github-light github-dark","package main\n\nimport (\n    \"encoding\u002Fbase64\"\n    \"strings\"\n)\n\nfunc toBase64URL(data []byte) string {\n    b64 := base64.StdEncoding.EncodeToString(data)\n    return strings.TrimRight(\n        strings.ReplaceAll(\n            strings.ReplaceAll(b64, \"+\", \"-\"),\n            \"\u002F\", \"_\",\n        ),\n        \"=\",\n    )\n}\n\nfunc fromBase64URL(s string) ([]byte, error) {\n    s = strings.ReplaceAll(s, \"-\", \"+\")\n    s = strings.ReplaceAll(s, \"_\", \"\u002F\")\n    \u002F\u002F Add padding if needed\n    switch len(s) % 4 {\n    case 2:\n        s += \"==\"\n    case 3:\n        s += \"=\"\n    }\n    return base64.StdEncoding.DecodeString(s)\n}\n",[56,1733,1734,1739,1743,1748,1753,1758,1762,1766,1771,1776,1781,1786,1791,1796,1801,1806,1811,1815,1819,1824,1829,1834,1839,1844,1849,1855,1861,1867,1873,1879],{"__ignoreMap":89},[93,1735,1736],{"class":95,"line":96},[93,1737,1738],{},"package main\n",[93,1740,1741],{"class":95,"line":118},[93,1742,155],{"emptyLinePlaceholder":154},[93,1744,1745],{"class":95,"line":135},[93,1746,1747],{},"import (\n",[93,1749,1750],{"class":95,"line":151},[93,1751,1752],{},"    \"encoding\u002Fbase64\"\n",[93,1754,1755],{"class":95,"line":158},[93,1756,1757],{},"    \"strings\"\n",[93,1759,1760],{"class":95,"line":164},[93,1761,394],{},[93,1763,1764],{"class":95,"line":209},[93,1765,155],{"emptyLinePlaceholder":154},[93,1767,1768],{"class":95,"line":236},[93,1769,1770],{},"func toBase64URL(data []byte) string {\n",[93,1772,1773],{"class":95,"line":470},[93,1774,1775],{},"    b64 := base64.StdEncoding.EncodeToString(data)\n",[93,1777,1778],{"class":95,"line":484},[93,1779,1780],{},"    return strings.TrimRight(\n",[93,1782,1783],{"class":95,"line":508},[93,1784,1785],{},"        strings.ReplaceAll(\n",[93,1787,1788],{"class":95,"line":532},[93,1789,1790],{},"            strings.ReplaceAll(b64, \"+\", \"-\"),\n",[93,1792,1793],{"class":95,"line":538},[93,1794,1795],{},"            \"\u002F\", \"_\",\n",[93,1797,1798],{"class":95,"line":558},[93,1799,1800],{},"        ),\n",[93,1802,1803],{"class":95,"line":572},[93,1804,1805],{},"        \"=\",\n",[93,1807,1808],{"class":95,"line":578},[93,1809,1810],{},"    )\n",[93,1812,1813],{"class":95,"line":586},[93,1814,449],{},[93,1816,1817],{"class":95,"line":591},[93,1818,155],{"emptyLinePlaceholder":154},[93,1820,1821],{"class":95,"line":596},[93,1822,1823],{},"func fromBase64URL(s string) ([]byte, error) {\n",[93,1825,1826],{"class":95,"line":609},[93,1827,1828],{},"    s = strings.ReplaceAll(s, \"-\", \"+\")\n",[93,1830,1831],{"class":95,"line":626},[93,1832,1833],{},"    s = strings.ReplaceAll(s, \"_\", \"\u002F\")\n",[93,1835,1836],{"class":95,"line":644},[93,1837,1838],{},"    \u002F\u002F Add padding if needed\n",[93,1840,1841],{"class":95,"line":1714},[93,1842,1843],{},"    switch len(s) % 4 {\n",[93,1845,1846],{"class":95,"line":1720},[93,1847,1848],{},"    case 2:\n",[93,1850,1852],{"class":95,"line":1851},25,[93,1853,1854],{},"        s += \"==\"\n",[93,1856,1858],{"class":95,"line":1857},26,[93,1859,1860],{},"    case 3:\n",[93,1862,1864],{"class":95,"line":1863},27,[93,1865,1866],{},"        s += \"=\"\n",[93,1868,1870],{"class":95,"line":1869},28,[93,1871,1872],{},"    }\n",[93,1874,1876],{"class":95,"line":1875},29,[93,1877,1878],{},"    return base64.StdEncoding.DecodeString(s)\n",[93,1880,1882],{"class":95,"line":1881},30,[93,1883,449],{},[10,1885,1887],{"id":1886},"common-pitfalls","Common Pitfalls",[79,1889,1891],{"id":1890},"_1-mixing-up-the-two-encodings","1. Mixing Up the Two Encodings",[84,1893,1895],{"className":86,"code":1894,"language":88,"meta":89,"style":89},"\u002F\u002F WRONG: Using standard Base64 in JWT\nconst jwtPart = btoa(JSON.stringify(payload)); \u002F\u002F May contain +, \u002F, =\n\n\u002F\u002F CORRECT: Use Base64URL for JWT\nconst jwtPart = base64ToBase64Url(btoa(JSON.stringify(payload)));\n",[56,1896,1897,1902,1927,1931,1936],{"__ignoreMap":89},[93,1898,1899],{"class":95,"line":96},[93,1900,1901],{"class":147},"\u002F\u002F WRONG: Using standard Base64 in JWT\n",[93,1903,1904,1906,1909,1911,1913,1915,1917,1919,1921,1924],{"class":95,"line":118},[93,1905,100],{"class":99},[93,1907,1908],{"class":103}," jwtPart",[93,1910,107],{"class":99},[93,1912,129],{"class":128},[93,1914,227],{"class":114},[93,1916,807],{"class":103},[93,1918,810],{"class":114},[93,1920,813],{"class":128},[93,1922,1923],{"class":114},"(payload)); ",[93,1925,1926],{"class":147},"\u002F\u002F May contain +, \u002F, =\n",[93,1928,1929],{"class":95,"line":135},[93,1930,155],{"emptyLinePlaceholder":154},[93,1932,1933],{"class":95,"line":151},[93,1934,1935],{"class":147},"\u002F\u002F CORRECT: Use Base64URL for JWT\n",[93,1937,1938,1940,1942,1944,1946,1948,1950,1952,1954,1956,1958],{"class":95,"line":158},[93,1939,100],{"class":99},[93,1941,1908],{"class":103},[93,1943,107],{"class":99},[93,1945,348],{"class":128},[93,1947,227],{"class":114},[93,1949,802],{"class":128},[93,1951,227],{"class":114},[93,1953,807],{"class":103},[93,1955,810],{"class":114},[93,1957,813],{"class":128},[93,1959,842],{"class":114},[79,1961,1963],{"id":1962},"_2-forgetting-to-handle-missing-padding","2. Forgetting to Handle Missing Padding",[84,1965,1967],{"className":86,"code":1966,"language":88,"meta":89,"style":89},"\u002F\u002F WRONG: Assuming padding exists\nconst decoded = atob(base64urlString); \u002F\u002F May fail if no padding\n\n\u002F\u002F CORRECT: Add padding before decoding\nconst padded = base64urlString + '==='.slice((base64urlString.length + 3) % 4);\nconst decoded = atob(padded.replace(\u002F-\u002Fg, '+').replace(\u002F_\u002Fg, '\u002F'));\n",[56,1968,1969,1974,1990,1994,1999,2035],{"__ignoreMap":89},[93,1970,1971],{"class":95,"line":96},[93,1972,1973],{"class":147},"\u002F\u002F WRONG: Assuming padding exists\n",[93,1975,1976,1978,1980,1982,1984,1987],{"class":95,"line":118},[93,1977,100],{"class":99},[93,1979,1111],{"class":103},[93,1981,107],{"class":99},[93,1983,1070],{"class":128},[93,1985,1986],{"class":114},"(base64urlString); ",[93,1988,1989],{"class":147},"\u002F\u002F May fail if no padding\n",[93,1991,1992],{"class":95,"line":135},[93,1993,155],{"emptyLinePlaceholder":154},[93,1995,1996],{"class":95,"line":151},[93,1997,1998],{"class":147},"\u002F\u002F CORRECT: Add padding before decoding\n",[93,2000,2001,2003,2005,2007,2010,2012,2014,2016,2018,2021,2023,2025,2027,2029,2031,2033],{"class":95,"line":158},[93,2002,100],{"class":99},[93,2004,979],{"class":103},[93,2006,107],{"class":99},[93,2008,2009],{"class":114}," base64urlString ",[93,2011,58],{"class":99},[93,2013,989],{"class":110},[93,2015,810],{"class":114},[93,2017,994],{"class":128},[93,2019,2020],{"class":114},"((base64urlString.",[93,2022,547],{"class":103},[93,2024,1002],{"class":99},[93,2026,1005],{"class":103},[93,2028,1008],{"class":114},[93,2030,1011],{"class":99},[93,2032,553],{"class":103},[93,2034,444],{"class":114},[93,2036,2037,2039,2041,2043,2045,2048,2050,2052,2054,2056,2058,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078,2080,2082],{"class":95,"line":164},[93,2038,100],{"class":99},[93,2040,1111],{"class":103},[93,2042,107],{"class":99},[93,2044,1070],{"class":128},[93,2046,2047],{"class":114},"(padded.",[93,2049,373],{"class":128},[93,2051,227],{"class":114},[93,2053,67],{"class":110},[93,2055,292],{"class":431},[93,2057,67],{"class":110},[93,2059,386],{"class":99},[93,2061,186],{"class":114},[93,2063,503],{"class":110},[93,2065,1045],{"class":114},[93,2067,373],{"class":128},[93,2069,227],{"class":114},[93,2071,67],{"class":110},[93,2073,310],{"class":431},[93,2075,67],{"class":110},[93,2077,386],{"class":99},[93,2079,186],{"class":114},[93,2081,527],{"class":110},[93,2083,1584],{"class":114},[79,2085,2087],{"id":2086},"_3-double-encoding","3. Double Encoding",[84,2089,2091],{"className":86,"code":2090,"language":88,"meta":89,"style":89},"\u002F\u002F WRONG: Encoding already-encoded data\nconst doubleEncoded = base64ToBase64Url(base64ToBase64Url(standardBase64));\n\n\u002F\u002F CORRECT: Only encode once\nconst encoded = base64ToBase64Url(standardBase64);\n",[56,2092,2093,2098,2117,2121,2126],{"__ignoreMap":89},[93,2094,2095],{"class":95,"line":96},[93,2096,2097],{"class":147},"\u002F\u002F WRONG: Encoding already-encoded data\n",[93,2099,2100,2102,2105,2107,2109,2111,2114],{"class":95,"line":118},[93,2101,100],{"class":99},[93,2103,2104],{"class":103}," doubleEncoded",[93,2106,107],{"class":99},[93,2108,348],{"class":128},[93,2110,227],{"class":114},[93,2112,2113],{"class":128},"base64ToBase64Url",[93,2115,2116],{"class":114},"(standardBase64));\n",[93,2118,2119],{"class":95,"line":135},[93,2120,155],{"emptyLinePlaceholder":154},[93,2122,2123],{"class":95,"line":151},[93,2124,2125],{"class":147},"\u002F\u002F CORRECT: Only encode once\n",[93,2127,2128,2130,2132,2134,2136],{"class":95,"line":158},[93,2129,100],{"class":99},[93,2131,1093],{"class":103},[93,2133,107],{"class":99},[93,2135,348],{"class":128},[93,2137,2138],{"class":114},"(standardBase64);\n",[10,2140,2142],{"id":2141},"summary","Summary",[259,2144,2145,2158],{},[262,2146,2147],{},[265,2148,2149,2152,2155],{},[268,2150,2151],{},"Feature",[268,2153,2154],{},"Base64",[268,2156,2157],{},"Base64URL",[278,2159,2160,2175,2189,2200,2211,2220],{},[265,2161,2162,2167,2171],{},[283,2163,2164,2166],{},[56,2165,58],{}," character",[283,2168,2169],{},[56,2170,58],{},[283,2172,2173],{},[56,2174,292],{},[265,2176,2177,2181,2185],{},[283,2178,2179,2166],{},[56,2180,67],{},[283,2182,2183],{},[56,2184,67],{},[283,2186,2187],{},[56,2188,310],{},[265,2190,2191,2194,2197],{},[283,2192,2193],{},"Padding",[283,2195,2196],{},"Required",[283,2198,2199],{},"Usually removed",[265,2201,2202,2205,2208],{},[283,2203,2204],{},"URL-safe",[283,2206,2207],{},"No",[283,2209,2210],{},"Yes",[265,2212,2213,2216,2218],{},[283,2214,2215],{},"JWT compatible",[283,2217,2207],{},[283,2219,2210],{},[265,2221,2222,2225,2227],{},[283,2223,2224],{},"Data URI compatible",[283,2226,2210],{},[283,2228,2207],{},[15,2230,2231],{},"Base64 and Base64URL serve different purposes. Choose Base64 for general encoding and Data URIs, and Base64URL whenever the encoded data will appear in URLs, JWTs, or other URL-sensitive contexts.",[10,2233,2235],{"id":2234},"related-tools","Related Tools",[29,2237,2238,2246],{},[32,2239,2240,2241],{},"Encode and decode Base64 strings with our ",[2242,2243,2245],"a",{"href":2244},"\u002Ftools\u002Fbase64","Base64 Encoder\u002FDecoder",[32,2247,2248,2249],{},"Convert between Base64 and Base64URL with our ",[2242,2250,2251],{"href":2244},"Base64URL Converter",[2253,2254,2255],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":89,"searchDepth":118,"depth":118,"links":2257},[2258,2259,2262,2266,2270,2274,2278,2283,2288,2289],{"id":12,"depth":118,"text":13},{"id":23,"depth":118,"text":24,"children":2260},[2261],{"id":81,"depth":135,"text":82},{"id":249,"depth":118,"text":250,"children":2263},[2264,2265],{"id":256,"depth":135,"text":257},{"id":334,"depth":135,"text":335},{"id":654,"depth":118,"text":655,"children":2267},[2268,2269],{"id":658,"depth":135,"text":659},{"id":712,"depth":135,"text":713},{"id":876,"depth":118,"text":877,"children":2271},[2272,2273],{"id":880,"depth":135,"text":881},{"id":940,"depth":135,"text":941},{"id":1130,"depth":118,"text":1131,"children":2275},[2276,2277],{"id":1134,"depth":135,"text":1135},{"id":1221,"depth":135,"text":1222},{"id":1368,"depth":118,"text":1369,"children":2279},[2280,2281,2282],{"id":1372,"depth":135,"text":1373},{"id":1598,"depth":135,"text":1599},{"id":1726,"depth":135,"text":1727},{"id":1886,"depth":118,"text":1887,"children":2284},[2285,2286,2287],{"id":1890,"depth":135,"text":1891},{"id":1962,"depth":135,"text":1963},{"id":2086,"depth":135,"text":2087},{"id":2141,"depth":118,"text":2142},{"id":2234,"depth":118,"text":2235},"2026-05-26","Learn the key differences between Base64 and Base64URL encoding, including character substitutions, padding handling, and when to use each in JWT and URL contexts.","md",{"immutable":154},"\u002Fguides\u002Fbase64url-difference",{"title":5,"description":2291},"guides\u002Fbase64url-difference","T_R00ARISQ-u3USyHW-Gw6w9w4w8NKMIIQPb74QXTo4",1780401322835]