From 3871a02ccc7aa45b22cc0606f4d9628bfb8ff79b Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Fri, 1 Mar 2019 12:15:40 -0500
Subject: [PATCH] fix: resolve CORS error on uploading via URL

On uploading a new profile picture via URL, a CORS error presents
itself during the .toDataUrl() call due to misconfigured CORS
handling in the library. The change here allows cropper.js to
check crossorigin attribute in image and handle appropriately.

Also, the error handling is improved so the error is caught on
Firefox, as it sends a different error message than on Chrome.
---
 public/src/modules/pictureCropper.js | 8 ++++++--
 src/views/modals/crop_picture.tpl    | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/src/modules/pictureCropper.js b/public/src/modules/pictureCropper.js
index 8f7ba364dd..029b9ace31 100644
--- a/public/src/modules/pictureCropper.js
+++ b/public/src/modules/pictureCropper.js
@@ -45,7 +45,7 @@ define('pictureCropper', ['cropper'], function (Cropper) {
 				aspectRatio: data.aspectRatio,
 				autoCropArea: 1,
 				viewMode: 1,
-				checkCrossOrigin: false,
+				checkCrossOrigin: true,
 				cropmove: function () {
 					if (data.restrictImageDimension) {
 						if (cropperTool.cropBoxData.width > data.imageDimension) {
@@ -143,7 +143,11 @@ define('pictureCropper', ['cropper'], function (Cropper) {
 		try {
 			imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
 		} catch (err) {
-			if (err.message === 'Failed to execute \'toDataURL\' on \'HTMLCanvasElement\': Tainted canvases may not be exported.') {
+			var corsErrors = [
+				'The operation is insecure.',
+				'Failed to execute \'toDataURL\' on \'HTMLCanvasElement\': Tainted canvases may not be exported.',
+			];
+			if (corsErrors.indexOf(err.message) !== -1) {
 				app.alertError('[[error:cors-error]]');
 			} else {
 				app.alertError(err.message);
diff --git a/src/views/modals/crop_picture.tpl b/src/views/modals/crop_picture.tpl
index f54370a0bb..c301436124 100644
--- a/src/views/modals/crop_picture.tpl
+++ b/src/views/modals/crop_picture.tpl
@@ -12,7 +12,7 @@
 				</div>
 
 				<div class="cropper">
-					<img id="cropped-image" src="{url}">
+					<img id="cropped-image" crossorigin="anonymous" src="{url}">
 				</div>
 
 				<hr />