Unicode in X-Message only correct in chrome

Question

I am having problems displaying UTF-8 string in Safari and Firefox for sending flash messages in rails via X-Message headers for ajax requests like this:

class ApplicationController < ActionController::Base
  def flash_to_headers
       return unless request.xhr?
       message = flash_message
       message = "#{message.join("','")}" if message.is_a?(Array)
       response.headers['X-Message'] = message
       response.headers["X-Message-Type"] = flash_type.to_s

       flash.discard # don't want the flash to appear when you reload page
   end

   def flash_message
       [:red, :warning, :notice, :success, nil].each do |type|
         return "" if type.nil?
         return flash[type] unless flash[type].blank?
       end
   end

   def flash_type
       [:red, :warning, :notice, :success, nil].each do |type|
         return "" if type.nil?
         return type unless flash[type].blank?
       end
   end

Javascript to handle the header:

var fade_flash = function() {
    $(".flash_alert").fadeIn("fast");
    $(".flash_alert").delay(10000).fadeOut("slow");
};

var show_ajax_message = function(msg, type) {
    $(".flash_message").html('<div class="flash_alert hidden flash_'+type+'">'+msg+'</div>');
    fade_flash();
};

$( document ).ajaxComplete(function(event, request) {
    var msg = request.getResponseHeader('X-Message');
    var type = request.getResponseHeader('X-Message-Type');
    if (msg) {
      show_ajax_message(msg, type);
    }

});

This was working great until I added l18n locale with Chinese support. In Chrome it still works, but in Safari and Firefox, the flash message is no longer displayed properly.

For example: a Message like this:"投注金额” 比你的余额多" will show up in Chrome fine, but in Safari and Firefox would show up like: "âæ注éé¢â æ¯ä½ çä½é¢å¤".

You can see a live demo of this bug at https://ice-dice.com Just click roll under Chinese locale and you can see the flash message is incorrect unless using chrome. Even quotes are not showing up properly in the english locale.

Thanks in advance for your help!

Answer 1

HTTP headers are specified by RFC 2616 to carry ISO-8859-1 data. Safari and Firefox are doing the right thing. It is, according to the HTTP standard, not possible to put a Chinese character in an HTTP header value.

Browser behaviour is inconsistent here (Opera also uses UTF-8, and IE uses whatever the locale ANSI code page is), so it is unsafe to use non-ASCII characters in HTTP headers.

The usual workaround if you must use headers is to apply an ad-hoc encoding at each end, typically URL-encoding or base64-encoding over UTF-8 bytes. But it's usually best not to wrap arbitrary data in HTTP headers; put it in the body instead.