Failed to execute btoa on Window The string to be encoded contains characters outside of the Latin1 range

Question

The error in the title is thrown only in Google Chrome  according to my tests  I m base64 encoding a big XML file so that it can be downloaded   this loader src    data application x-forcedownload base64                      btoa   lt  xml version   1 0   encoding   utf-8    gt                        lt   this gamesave tagName   gt                      this xml firstChild innerHTML                      lt    this gamesave tagName   gt       this loader is hidden iframe   This error is actually quite a change because normally  Google Chrome would crash upon btoa call  Mozilla Firefox has no problems here  so the issue is browser related  I m not aware of any strange characters in file  Actually I do believe there are no non-ascii characters   Q  How do I find the problematic characters and replace them so that Chrome stops complaining   I have tried to use Downloadify to initiate the download  but it does not work  It s unreliable and throws no errors to allow debug

User · Answer

Using btoa with unescape and encodeURIComponent didn t work for me  Replacing all the special characters with XML HTML entities and then converting to the base64 representation was the only way to solve this issue for me  Some code   base64   btoa str replace    u00A0- u2666  g  function c        return   amp      c charCodeAt 0

User · Answer

As an complement to Stefan Steiger answer   as it doesn t look nice as a comment   Extending String prototype    String prototype b64encode   function          return btoa unescape encodeURIComponent this         String prototype b64decode   function          return decodeURIComponent escape atob this           Usage   var str                           var encoded   str b64encode    console log  encoded b64decode        NOTE   As stated in the comments  using unescape is not recommended as it may be removed in the future      Warning  Although unescape   is not strictly deprecated  as in  removed from the Web standards    it is defined in Annex B of the ECMA-262 standard  whose introduction states        All of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification       Note  Do not use unescape to decode URIs  use decodeURI or decodeURIComponent instead

User · Answer

I just ran into this problem myself   First  modify your code slightly   var download     lt  xml version   1 0   encoding   utf-8    gt                        lt   this gamesave tagName   gt                      this xml firstChild innerHTML                      lt    this gamesave tagName   gt     this loader src    data application x-forcedownload base64                      btoa download     Then use your favorite web inspector  put a breakpoint on the line of code that assigns this loader src  then execute this code   for  var i   0  i  lt  download length  i        if  download i  charCodeAt 0   gt  255        console warn  found character     download i  charCodeAt 0           download i       at position     i           Depending on your application  replacing the characters that are out of range may or may not work  since you ll be modifying the data   See the note on MDN about unicode characters with the btoa method   https   developer mozilla org en-US docs Web API window btoa

User · Answer

If you have UTF8  use this  actually works with SVG source   like    btoa unescape encodeURIComponent str      example    var imgsrc    data image svg xml base64     btoa unescape encodeURIComponent markup      var img   new Image 1  1      width  height values are optional params   img src   imgsrc    If you need to decode that base64  use this   var str2   decodeURIComponent escape window atob b64     console log str2     Example   var str                           var b64   window btoa unescape encodeURIComponent str    console log b64    var str2   decodeURIComponent escape window atob b64     console log str2     Note  if you need to get this to work in mobile-safari  you might need to strip all the white-space from the base64 data     function b64 to utf8  str         str   str replace   s g               return decodeURIComponent escape window atob  str            2017 Update  This problem has been bugging me again   The simple truth is  atob doesn t really handle UTF8-strings - it s ASCII only   Also  I wouldn t use bloatware like js-base64   But webtoolkit does have a small  nice and very maintainable implementation            Base64 encode   decode    http   www webtoolkit info       var Base64             private property      keyStr   ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789             public method for encoding       encode  function  input                var output               var chr1  chr2  chr3  enc1  enc2  enc3  enc4          var i   0           input   Base64  utf8 encode input            while  i  lt  input length                        chr1   input charCodeAt i                 chr2   input charCodeAt i                 chr3   input charCodeAt i                  enc1   chr1  gt  gt  2              enc2     chr1  amp  3   lt  lt  4     chr2  gt  gt  4               enc3     chr2  amp  15   lt  lt  2     chr3  gt  gt  6               enc4   chr3  amp  63               if  isNaN chr2                                 enc3   enc4   64                            else if  isNaN chr3                                 enc4   64                             output   output                   this  keyStr charAt enc1    this  keyStr charAt enc2                    this  keyStr charAt enc3    this  keyStr charAt enc4                Whend           return output           End Function encode           public method for decoding      decode  function  input                var output               var chr1  chr2  chr3          var enc1  enc2  enc3  enc4          var i   0           input   input replace    A-Za-z0-9        g               while  i  lt  input length                        enc1   this  keyStr indexOf input charAt i                  enc2   this  keyStr indexOf input charAt i                  enc3   this  keyStr indexOf input charAt i                  enc4   this  keyStr indexOf input charAt i                   chr1    enc1  lt  lt  2     enc2  gt  gt  4               chr2     enc2  amp  15   lt  lt  4     enc3  gt  gt  2               chr3     enc3  amp  3   lt  lt  6    enc4               output   output   String fromCharCode chr1                if  enc3    64                                output   output   String fromCharCode chr2                              if  enc4    64                                output   output   String fromCharCode chr3                               Whend           output   Base64  utf8 decode output            return output           End Function decode           private method for UTF-8 encoding       utf8 encode  function  string                var utftext               string   string replace   r n g    n             for  var n   0  n  lt  string length  n                          var c   string charCodeAt n                if  c  lt  128                                utftext    String fromCharCode c                             else if   c  gt  127   amp  amp   c  lt  2048                                 utftext    String fromCharCode  c  gt  gt  6    192                   utftext    String fromCharCode  c  amp  63    128                             else                               utftext    String fromCharCode  c  gt  gt  12    224                   utftext    String fromCharCode   c  gt  gt  6   amp  63    128                   utftext    String fromCharCode  c  amp  63    128                               Next n           return utftext           End Function  utf8 encode          private method for UTF-8 decoding       utf8 decode  function  utftext                var string               var i   0          var c  c1  c2  c3          c   c1   c2   0           while  i  lt  utftext length                        c   utftext charCodeAt i                if  c  lt  128                                string    String fromCharCode c                   i                              else if   c  gt  191   amp  amp   c  lt  224                                 c2   utftext charCodeAt i   1                   string    String fromCharCode   c  amp  31   lt  lt  6     c2  amp  63                    i    2                            else                               c2   utftext charCodeAt i   1                   c3   utftext charCodeAt i   2                   string    String fromCharCode   c  amp  15   lt  lt  12      c2  amp  63   lt  lt  6     c3  amp  63                    i    3                              Whend           return string           End Function  utf8 decode       https   www fileformat info info unicode utf8 htm        For any character equal to or below 127  hex 0x7F   the UTF-8   representation is one byte  It is just the lowest 7 bits of the full   unicode value  This is also the same as the ASCII value    For characters equal to or below 2047  hex 0x07FF   the UTF-8   representation is spread across two bytes  The first byte will have   the two high bits set and the third bit clear  i e  0xC2 to 0xDF   The   second byte will have the top bit set and the second bit clear  i e    0x80 to 0xBF     For all characters equal to or greater than 2048 but less that 65535    0xFFFF   the UTF-8 representation is spread across three bytes

User · Answer

Use a library instead  We don t have to reinvent the wheel  Just use a library to save the time and headache   js-base64  https   github com dankogai js-base64 is good and I confirm it supports unicode very well   Base64 encode  dankogai        ZGFua29nYWk  Base64 encode               5bCP6aO85by  Base64 encodeURI            5bCP6aO85by-  Base64 decode  ZGFua29nYWk         dankogai Base64 decode  5bCP6aO85by                note  decodeURI   is unnecessary since it accepts both flavors Base64 decode  5bCP6aO85by-

User · Answer

I just thought I should share how I actually solved the problem and why I think this is the right solution  provided you don t optimize for old browser    Converting data to dataURL  data        var blob   new Blob                   I m using page innerHTML as data                  note that you can use the array                  to concatenate many long strings EFFICIENTLY                document body innerHTML                    Mime type is important for data url                type    text html          This FileReader works asynchronously  so it doesn t lag    the web application var a   new FileReader    a onload   function e            Capture result here      console log e target result      a readAsDataURL blob     Allowing user to save data  Apart from obvious solution - opening new window with your dataURL as URL you can do two other things   1  Use fileSaver js  File saver can create actual fileSave dialog with predefined filename  It can also fallback to normal dataURL approach   2  Use  experimental  URL createObjectURL  This is great for reusing base64 encoded data  It creates a short URL for your dataURL   console log URL createObjectURL blob      Prints  blob http   stackoverflow com 7c18953f-f5f8-41d2-abf5-e9cbced9bc42   Don t forget to use the URL including the leading blob prefix  I used document body again     You can use this short URL as AJAX target   lt script gt  source or  lt a gt  href location  You re responsible for destroying the URL though   URL revokeObjectURL  blob http   stackoverflow com 7c18953f-f5f8-41d2-abf5-e9cbced9bc42

User · Answer

btoa   only support characters from String fromCodePoint 0  up to String fromCodePoint 255   For Base64 characters with a code point 256 or higher you need to encode decode these before and after   And in this point it becomes tricky     Every possible sign are arranged in a Unicode-Table  The Unicode-Table is divided in different planes  languages  math symbols  and so on      Every sign in a plane has a unique code point number  Theoretically  the number can become arbitrarily large   A computer stores the data in bytes  8 bit  hexadecimal 0x00 - 0xff  binary 00000000 - 11111111  decimal 0 - 255   This range normally use to save basic characters  Latin1 range    For characters with higher codepoint then 255 exist different encodings  JavaScript use 16 bits per sign  UTF-16   the string called DOMString  Unicode can handle code points up to 0x10fffff  That means  that a method must be exist to store several bits over several cells away   String fromCodePoint 0x10000  length    2  UTF-16 use surrogate pairs to store 20bits in two 16bit cells  The first higher surrogate begins with 110110xxxxxxxxxx  the lower second one with 110111xxxxxxxxxx  Unicode reserved own planes for this  https   unicode-table com de  high-surrogates  To store characters in bytes  Latin1 range  standardized procedures use UTF-8   Sorry to say that  but I think there is no other way to implement this function self   function stringToUTF8 str        let bytes            for let character of str                let code   character codePointAt 0            if code  lt   127                        let byte1   code               bytes push byte1                     else if code  lt   2047                        let byte1   0xC0    code  gt  gt  6               let byte2   0x80    code  amp  0x3F                bytes push byte1  byte2                     else if code  lt   65535                        let byte1   0xE0    code  gt  gt  12               let byte2   0x80     code  gt  gt  6   amp  0x3F               let byte3   0x80    code  amp  0x3F                bytes push byte1  byte2  byte3                     else if code  lt   2097151                        let byte1   0xF0    code  gt  gt  18               let byte2   0x80     code  gt  gt  12   amp  0x3F               let byte3   0x80     code  gt  gt  6   amp  0x3F               let byte4   0x80    code  amp  0x3F                bytes push byte1  byte2  byte3  byte4                        return bytes     function utf8ToString bytes  fallback        let valid   undefined      let codePoint   undefined      let codeBlocks    0  0  0  0        let result            for let offset   0  offset  lt  bytes length  offset                  let byte   bytes offset            if  byte  amp  0x80     0x00                        codeBlocks 0    byte  amp  0x7F               codePoint   codeBlocks 0                     else if  byte  amp  0xE0     0xC0                        codeBlocks 0    byte  amp  0x1F               byte   bytes   offset               if offset  gt   bytes length     byte  amp  0xC0     0x80    valid   false  break                 codeBlocks 1    byte  amp  0x3F               codePoint    codeBlocks 0   lt  lt  6    codeBlocks 1                     else if  byte  amp  0xF0     0xE0                        codeBlocks 0    byte  amp  0xF               for let blockIndex   1  blockIndex  lt   2  blockIndex                                  byte   bytes   offset                   if offset  gt   bytes length     byte  amp  0xC0     0x80    valid   false  break                     codeBlocks blockIndex    byte  amp  0x3F                            if valid     false    break                 codePoint    codeBlocks 0   lt  lt  12     codeBlocks 1   lt  lt  6    codeBlocks 2                     else if  byte  amp  0xF8     0xF0                        codeBlocks 0    byte  amp  0x7               for let blockIndex   1  blockIndex  lt   3  blockIndex                                  byte   bytes   offset                   if offset  gt   bytes length     byte  amp  0xC0     0x80    valid   false  break                     codeBlocks blockIndex    byte  amp  0x3F                            if valid     false    break                 codePoint    codeBlocks 0   lt  lt  18     codeBlocks 1   lt  lt  12     codeBlocks 2   lt  lt  6     codeBlocks 3                      else                       valid   false  break                     result    String fromCodePoint codePoint              if valid     false                if  fallback                        throw new TypeError  Malformed utf-8 encoding                        result                for let offset   0  offset    bytes length  offset                          result    String fromCharCode bytes offset   amp  0xFF                        return result     function decodeBase64 text  binary        if    0-9a-zA-Z         test text     throw new TypeError  The string to be decoded contains characters outside of the valid base64 range            let codePointA    A  codePointAt 0       let codePointZ    Z  codePointAt 0       let codePointa    a  codePointAt 0       let codePointz    z  codePointAt 0       let codePointZero    0  codePointAt 0       let codePointNine    9  codePointAt 0       let codePointPlus       codePointAt 0       let codePointSlash       codePointAt 0        function getCodeFromKey key                let keyCode   key codePointAt 0            if keyCode  gt   codePointA  amp  amp  keyCode  lt   codePointZ                        return keyCode - codePointA                    else if keyCode  gt   codePointa  amp  amp  keyCode  lt   codePointz                        return keyCode   26 - codePointa                    else if keyCode  gt   codePointZero  amp  amp  keyCode  lt   codePointNine                        return keyCode   52 - codePointZero                    else if keyCode    codePointPlus                        return 62                    else if keyCode    codePointSlash                        return 63                     return undefined             let codes   Array from text  map character   gt  getCodeFromKey character         let bytesLength   Math ceil codes length   4    3       if codes codes length - 2     undefined    bytesLength   bytesLength - 2    else if codes codes length - 1     undefined    bytesLength--         let bytes   new Uint8Array bytesLength        for let offset   0  index   0  offset  lt  bytes length                 let code1   codes index             let code2   codes index             let code3   codes index             let code4   codes index              let byte1    code1  lt  lt  2     code2  gt  gt  4           let byte2     code2  amp  0xf   lt  lt  4     code3  gt  gt  2           let byte3     code3  amp  0x3   lt  lt  6    code4           bytes offset      byte1          bytes offset      byte2          bytes offset      byte3             if binary    return bytes         return utf8ToString bytes  true      function encodeBase64 bytes        if  bytes     undefined    bytes     null            return               if  bytes instanceof Array            bytes   bytes filter item   gt                return Number isFinite item   amp  amp  item  gt   0  amp  amp  item  lt   255                         if                          bytes instanceof Uint8Array                bytes instanceof Uint8ClampedArray                bytes instanceof Array                           if  typeof bytes      string                 const str   bytes              bytes   Array from unescape encodeURIComponent str    map ch   gt                  ch codePointAt 0                           else               throw new TypeError  bytes must be of type Uint8Array or String                          const keys              A            B            C            D            E            F            G            H            I            J            K            L            M            N            O            P            Q            R            S            T            U            V            W            X            Y            Z            a            b            c            d            e            f            g            h            i            j            k            l            m            n            o            p            q            r            s            t            u            v            w            x            y            z            0            1            2            3            4            5            6            7            8            9                                       const fillKey             let byte1      let byte2      let byte3      let sign1            let sign2            let sign3            let sign4             let result            for  let index   0  index  lt  bytes length              let fillUpAt   0              tslint disable no-increment-decrement         byte1   bytes index             byte2   bytes index             byte3   bytes index              if  byte2     undefined                byte2   0              fillUpAt   2                     if  byte3     undefined                byte3   0              if   fillUpAt                    fillUpAt   3                                      tslint disable no-bitwise         sign1   keys byte1  gt  gt  2           sign2   keys   byte1  amp  0x3   lt  lt  4     byte2  gt  gt  4            sign3   keys   byte2  amp  0xf   lt  lt  2     byte3  gt  gt  6            sign4   keys byte3  amp  0x3f            if  fillUpAt  gt  0                if  fillUpAt  lt   2                    sign3   fillKey                            if  fillUpAt  lt   3                    sign4   fillKey                                   result    sign1   sign2   sign3   sign4           if  fillUpAt                break                       return result     let base64   encodeBase64   u 1F604        unicode code point escapes for smiley let str   decodeBase64 base64    console log  base64   base64   console log  str   str    document body innerText   str    how to use it  decodeBase64 encodeBase64   u 1F604      demo  https   jsfiddle net qrLadeb8

[javascript] Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

Examples related to javascript

Examples related to google-chrome