Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 08:36:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve CORS error on uploading via URL

Browse Source 
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.
This commit is contained in:
Julian Lam
2019-03-01 12:15:40 -05:00
parent da2e0e78d2
commit 3871a02ccc
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/src/modules/pictureCropper.js
View File

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

2
src/views/modals/crop_picture.tpl
View File

@@ -12,7 +12,7 @@
</div>
<div class="cropper">
<img id="cropped-image" src="{url}">
<img id="cropped-image" crossorigin="anonymous" src="{url}">
</div>
<hr />