diff --git a/src/Foundation.hs b/src/Foundation.hs
index 62f9dccf8..8fb2ec86e 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -1114,7 +1114,7 @@ instance Yesod UniWorX where
 
           lift . bracketOnError getMessages (mapM_ $ uncurry Yesod.addMessage) $ \msgs -> do
             Just msgs' <- return . forM msgs $ \(msgState, content) -> Message <$> fromPathPiece msgState <*> return content
-            addCustomHeader HeaderAlerts . decodeUtf8 $ JSON.encode msgs'
+            addCustomHeader HeaderAlerts . decodeUtf8 . urlEncode True . toStrict $ JSON.encode msgs'
 
     -- Since we implement `errorHandler` ourselves we don't need `defaultMessageWidget`
     defaultMessageWidget _title _body = error "defaultMessageWidget: undefined"
diff --git a/static/js/utils/alerts.js b/static/js/utils/alerts.js
index 52f620d12..427e38373 100644
--- a/static/js/utils/alerts.js
+++ b/static/js/utils/alerts.js
@@ -160,7 +160,8 @@
       var alerts;
       for (var header of response.headers) {
         if (header[0] === 'alerts') {
-          alerts = JSON.parse(header[1]);
+          var decodedHeader = decodeURIComponent(header[1]);
+          alerts = JSON.parse(decodedHeader);
           break;
         }
       }