server_opensave-related changes: 1) Be more lenient in filename possibilities for server_opensave (supporting Unicode except characters disallowed in Windows file names); 2) XHTML escape filename and SVG content when put into HTML hidden input element as opposed to unnecessary URL-encoding; 3) fix base64 encoding (with update to dependent utf8-encoding function)--old base64 code caused SVG to break with surrogate pairs (e.g., in title); 4) provide default UTF-8 encoding in XML declaration and add this XML declaration to the download attribute as well

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2662 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/extensions/ext-php_savefile.js

@@ -8,7 +8,7 @@ svgEditor.addExtension("php_savefile", {
 		'use strict';
 		function getFileNameFromTitle () {
 			var title = svgCanvas.getDocumentTitle();
-			return $.trim(title); // .replace(/[^a-z0-9\.\_\-]+/gi, '_'); // We could do this more stringent client-side filtering, but we need to do on the server anyways
+			return $.trim(title);
 		}
 		var save_svg_action = 'extensions/savefile.php';
 		svgEditor.setCustomHandlers({

editor/extensions/ext-server_opensave.js

@@ -13,7 +13,11 @@ svgEditor.addExtension("server_opensave", {
 		'use strict';
 		function getFileNameFromTitle () {
 			var title = svgCanvas.getDocumentTitle();
-			return $.trim(title).replace(/[^a-z0-9\.\_\-]+/gi, '_');
+			// We convert (to underscore) only those disallowed Win7 file name characters
+			return $.trim(title).replace(/[\/\\:*?"<>|]/g, '_');
+		}
+		function xhtmlEscape(str) {
+			return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;'); // < is actually disallowed above anyways
 		}
 		function clientDownloadSupport (filename, suffix, uri) {
 			var a,
@@ -34,11 +38,11 @@ svgEditor.addExtension("server_opensave", {
 		$('<iframe name="output_frame" src="#"/>').hide().appendTo('body');
 		svgEditor.setCustomHandlers({
 			save: function(win, data) {
-				var svg = "<?xml version=\"1.0\"?>\n" + data,
+				var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data, // Firefox doesn't seem to know it is UTF-8 (if we skip the clientDownload code) despite the Content-Disposition header containing UTF-8, but adding the encoding works
 					filename = getFileNameFromTitle();
 
-				//if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml,' + encodeURI(data))) { // Firefox limits size of file
+				// if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml,' + encodeURI(data))) { // Firefox limits size of file
-				if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;base64,' + svgedit.utilities.encode64(data))) {
+				if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;base64,' + svgedit.utilities.encode64(svg))) {
 					return;
 				}
 
@@ -46,8 +50,8 @@ svgEditor.addExtension("server_opensave", {
 					method: 'post',
 					action: save_svg_action,
 					target: 'output_frame'
-				})	.append('<input type="hidden" name="output_svg" value="' + encodeURI(svg) + '">')
+				}).append('<input type="hidden" name="output_svg" value="' + xhtmlEscape(svg) + '">')
-					.append('<input type="hidden" name="filename" value="' + filename + '">')
+					.append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">')
 					.appendTo('body')
 					.submit().remove();
 			},
@@ -70,8 +74,8 @@ svgEditor.addExtension("server_opensave", {
 						uiStrings = svgEditor.uiStrings,
 						note = '';
 					
-					// Check if there's issues
+					// Check if there are issues
-					if(issues.length) {
+					if (issues.length) {
 						pre = "\n \u2022 ";
 						note += ("\n\n" + pre + issues.join(pre));
 					} 
@@ -91,9 +95,9 @@ svgEditor.addExtension("server_opensave", {
 						method: 'post',
 						action: save_img_action,
 						target: 'output_frame'
-					})	.append('<input type="hidden" name="output_img" value="' + datauri + '">')
+					}).append('<input type="hidden" name="output_img" value="' + datauri + '">')
 						.append('<input type="hidden" name="mime" value="' + mimeType + '">')
-						.append('<input type="hidden" name="filename" value="' + filename + '">')
+						.append('<input type="hidden" name="filename" value="' + xhtmlEscape(filename) + '">')
 						.appendTo('body')
 						.submit().remove();
 				}});
@@ -103,7 +107,7 @@ svgEditor.addExtension("server_opensave", {
 		});
 	
 		// Do nothing if client support is found
-		if(window.FileReader) {return;}
+		if (window.FileReader) {return;}
 		
 		// Change these to appropriate script file
 		open_svg_action = 'extensions/fileopen.php?type=load_svg';
@@ -113,7 +117,7 @@ svgEditor.addExtension("server_opensave", {
 		// Set up function for PHP uploader to use
 		svgEditor.processFile = function(str64, type) {
 			var xmlstr;
-			if(cancelled) {
+			if (cancelled) {
 				cancelled = false;
 				return;
 			}

editor/extensions/filesave.php

@@ -9,6 +9,15 @@
  *
  */
 
+function encodeRFC5987ValueChars ($str) {
+	// See http://tools.ietf.org/html/rfc5987#section-3.2.1
+	// For better readability within headers, add back the characters escaped by rawurlencode but still allowable
+	// Although RFC3986 reserves "!" (%21), RFC5987 does not
+	return preg_replace_callback('@%(2[1346B]|5E|60|7C)@', function ($matches) {
+		return chr('0x' . $matches[1]);
+	}, rawurlencode($str));
+}
+
 require('allowedMimeTypes.php');
 
 $mime = !isset($_POST['mime']) || !in_array($_POST['mime'], $allowedMimeTypesBySuffix) ? 'image/svg+xml' : $_POST['mime'];
@@ -28,19 +37,24 @@ if (isset($_POST['filename']) && strlen($_POST['filename']) > 0) {
 }
 
 if ($suffix == '.svg') {
-	$contents = rawurldecode($_POST['output_svg']);
+	$contents = $_POST['output_svg'];
 } else {
 	$contents = $_POST['output_img'];
 	$pos = (strpos($contents, 'base64,') + 7);
 	$contents = base64_decode(substr($contents, $pos));
 }
 
- header("Cache-Control: public");
+header("Cache-Control: public");
- header("Content-Description: File Transfer");
+header("Content-Description: File Transfer");
- header("Content-Disposition: attachment; filename=" . $file);
- header("Content-Type: " .  $mime);
- header("Content-Transfer-Encoding: binary");
 
- echo $contents;
+// See http://tools.ietf.org/html/rfc6266#section-4.1
+header("Content-Disposition: attachment; filename*=UTF-8''" . encodeRFC5987ValueChars(
+	// preg_replace('@[\\\\/:*?"<>|]@', '', $file) // If we wanted to strip Windows-disallowed characters server-side (but not a security issue, so we can strip client-side instead)
+	$file
+));
+header("Content-Type: " .  $mime . 'charset=utf-8');
+header("Content-Transfer-Encoding: binary");
+
+echo $contents;
  
 ?>

editor/svgutils.js

@@ -82,9 +82,9 @@ svgedit.utilities.fromXml = function(str) {
 // Converts a string to base64
 svgedit.utilities.encode64 = function(input) {
 	// base64 strings are 4/3 larger than the original string
-//	input = svgedit.utilities.encodeUTF8(input); // convert non-ASCII characters
+	input = svgedit.utilities.encodeUTF8(input); // convert non-ASCII characters
-	input = svgedit.utilities.convertToXMLReferences(input);
+	// input = svgedit.utilities.convertToXMLReferences(input);
-	if(window.btoa) {
+	if (window.btoa) {
 		return window.btoa(input); // Use native if available
   }
 	var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 );
@@ -158,28 +158,62 @@ svgedit.utilities.decode64 = function(input) {
 };
 
 // Currently not being used, so commented out for now
-// based on http://phpjs.org/functions/utf8_encode:577
+// based on http://phpjs.org/functions/utf8_encode
-// codedread:does not seem to work with webkit-based browsers on OSX
+// codedread:does not seem to work with webkit-based browsers on OSX // Brettz9: please test again as function upgraded
-//		'encodeUTF8': function(input) {
+svgedit.utilities.encodeUTF8 = function (argString) {
-//			//return unescape(encodeURIComponent(input)); //may or may not work
+	//return unescape(encodeURIComponent(input)); //may or may not work
-//			var output = '';
+	if (argString === null || typeof argString === 'undefined') {
-//			for (var n = 0; n < input.length; n++){
+		return '';
-//				var c = input.charCodeAt(n);
+	}
-//				if (c < 128) {
+
-//					output += input[n];
+	var string = String(argString); // .replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-//				}
+	var utftext = '',
-//				else if (c > 127) {
+		n, start, end, stringl = 0;
-//					if (c < 2048){
+
-//						output += String.fromCharCode((c >> 6) | 192);
+	start = end = 0;
-//					}
+	stringl = string.length;
-//					else {
+	for (n = 0; n < stringl; n++) {
-//						output += String.fromCharCode((c >> 12) | 224) + String.fromCharCode((c >> 6) & 63 | 128);
+		var c1 = string.charCodeAt(n);
-//					}
+		var enc = null;
-//					output += String.fromCharCode((c & 63) | 128);
+
-//				}
+		if (c1 < 128) {
-//			}
+			end++;
-//			return output;
+		} else if (c1 > 127 && c1 < 2048) {
-//		},
+			enc = String.fromCharCode(
+				(c1 >> 6) | 192, (c1 & 63) | 128
+			);
+		} else if (c1 & 0xF800 != 0xD800) {
+			enc = String.fromCharCode(
+				(c1 >> 12) | 224, ((c1 >> 6) & 63) | 128, (c1 & 63) | 128
+			);
+		} else { // surrogate pairs
+			if (c1 & 0xFC00 != 0xD800) {
+				throw new RangeError('Unmatched trail surrogate at ' + n);
+			}
+			var c2 = string.charCodeAt(++n);
+			if (c2 & 0xFC00 != 0xDC00) {
+				throw new RangeError('Unmatched lead surrogate at ' + (n - 1));
+			}
+			c1 = ((c1 & 0x3FF) << 10) + (c2 & 0x3FF) + 0x10000;
+			enc = String.fromCharCode(
+				(c1 >> 18) | 240, ((c1 >> 12) & 63) | 128, ((c1 >> 6) & 63) | 128, (c1 & 63) | 128
+			);
+		}
+		if (enc !== null) {
+			if (end > start) {
+				utftext += string.slice(start, end);
+			}
+			utftext += enc;
+			start = end = n + 1;
+		}
+	}
+
+	if (end > start) {
+		utftext += string.slice(start, stringl);
+	}
+
+	return utftext;
+};
 
 // Function: svgedit.utilities.convertToXMLReferences
 // Converts a string to use XML references