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

@@ -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);

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 />