Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+8 votes
1.4k views
in Plugins by
If I copy paste an image in the editor and save, I get an error saying 'Maximum length is 12000 characters'.  The image appears fined after it is pasted.  Only when I save the question or answer I get that error.  Also, the image is now converted into a long text.  If I select a small image, then there is no error, but the image does not appear in the question/answer.

I've enabled image upload in the WYSIWYG editor.  But when I select image and click 'send it to server', I don't see any activity after that.  On the server I do see a 'POST /wysiwyg-editor-upload?qa_only_image....' request for which got a 200 response.  On the browser there is no progress.  I can't use the editor any further as OK says 'Image source URL is missing' and Cancel does not do anything.

I see a lot of questions here with images in them.  How was that done?  Copy paste of an image seems very intuitive.
Q2A version: 1.8.6

1 Answer

+2 votes
by
selected by
 
Best answer

You've asked three different questions. They have to be addressed separately.

1. Why you're getting the Maximum length is 12000 characters error

When you copy/paste the image, CKEditor is turning it into its base64 representation. Just as a reference, the base64 representation takes around an additional 30% over the image size. As 12000 characters is less than 12KB, then any image of that size will exceed the post content. Take into account the post content is plain HTML. So this is unavoidable, unless you configure some CKEditor plugin to generate an automatic upload, such us with this plugin.

2. Why the image is not displayed, even if it is small

This is a completely different issue. There is a library that filters dangerous HTML content. Using base64 images is considered dangerous based on the current configuration. I believe this is a miss rather than the real intention. You can change this behavior editing this line and turning it into:

'schemes' => 'src: data; href: aim, feed...

3. Why you don't see any activity after clicking the Send it to server button 

Something is wrong here. What should happen is that you would be taken to the tab on the left (Image info) and you would see the image you've uploaded.

I could only replicate a similar outcome to yours, if I exceed the maximum file upload size configured in the server. Check this SO question which seems clearer than the PHP official documentation. In that case, get a 200 Status code but the content of the response states:

Warning: POST Content-Length of XXXX bytes exceeds the limit of YYYY bytes in Unknown on line 0

No file chosen

I can even see that on top of the Send it to server button. There is no immediate fix for this. In fact, the only thing to do here is to avoid showing errors on the UI. Tweaking your server settings will have to do it.

by
Thanx a lot for answering pupi1985 !
You have broken down the problem beautifully.
I was able to paste smaller sized images with your suggestion in point 2.

The image size I'm experimenting with is about 2K.  I reduced the post_max_size in php.ini to 1K and saw the same warning in apache's error.log.  I've increased it back to the default now.  So that cannot be the issue.

I tried using the 'upload image' option on this site and understood the expected behaviour of that dialog.

I looked at the records in 'qa_blobs' table and I see that every time I've tried to upload an image, a new record is created.  But the upload page is stuck and does not shift to 'Image Info'.  I noted the url created here and manually tried to enter the link in Image Info tab with the blobid from the table.  But that is still not seen.

I'll add some debug statements in this path and experiment.
by
+1
1. Are you getting the Warning in your server logs with your standard settings?

2. What are the settings you're using for post_max_size, upload_max_filesize, memory_limit?

3. Can you confirm with the settings in question #2 and uploading a 1K image you get the result you're mentioned in your comment?

4. What is the response of the POST request sent to the server when hitting the "Send it to server" button? It should look like this:
<script>window.parent.CKEDITOR.tools.callFunction(0, 'https:\/\/www.yoursite.com\/?qa=blob&qa_blobid=6577534335365952531', '');</script>

5. Also check this gist: https://gist.github.com/pupi1985/03778d79da0b13446b26eb81d169df3a
Replace the whole qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php with it

And also modify this two lines:
https://github.com/q2a/question2answer/blob/4344721c138e7f6845a8129278c9d3374daee085/qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php#L123-L124

Just change the `qa_path()` into `qa_path_absolute()` functions and let me know the results (specially the POST web server's response)
by
1. There are no errors in apache2 error.log

2. post_max_size=8M, upload_max_filesize=2M, memory_limit=128M  (all are default)
  I tried uploading images of 2K, 26K and 1.1M.  2K and 26K files upload created an entry in qa_blobs table.  1.1M upload failed with a response that max file size allowed is 1M.

3. With the above setting, uploading a 1K image file fails.  Copy-pasting the same image works.

4. Yes!  Thats exactly how it looks:
<script>window.parent.CKEDITOR.tools.callFunction(0, 'http:\/\/www.yoursite.com\/?qa=blob&qa_blobid=2768752912040693139', '');</script>
I can then open a new tab in the browser and access the image with the same link and it works too.

5.  Did you mean replace qa-wysiwyg-upload.php?  I replaced only qa-wysiwyg-upload.php with the file you mentioned and also modified the qa-wysiwyg-editor.php as you suggested.  The result was the same.
- No errors in apache2 error.log.
- Access log shows the POST request.
- I used tshark to capture the response and I see the response same as above:
  <script>window.parent.CKEDITOR.tools.callFunction(0, 'http:\/\/www.yoursite.com\/?qa=blob&qa_blobid=17850641872237821965', '');</script>
- 1.1M file upload failed with: <script>window.parent.CKEDITOR.tools.callFunction(0, '', 'Maximum upload size is 1.0MB');</script>

Since the entries are being made in qa_blobs table, I think the upload is going through fine.  And I do see the http response for the same.  And I can access the image directly after that.  Its just that the upload window does not pick up the link.

I have Userinfo plugin.  I disabled the plugin but the result was the same.

I have enabled some options in Apache server.  Not sure if they can cause any issues.  Here is the response and additional headers:

    HTTP/1.1 200 OK\r\n
        [Expert Info (Chat/Sequence): HTTP/1.1 200 OK\r\n]
            [HTTP/1.1 200 OK\r\n]
            [Severity level: Chat]
            [Group: Sequence]
        Response Version: HTTP/1.1
        Status Code: 200
        [Status Code Description: OK]
        Response Phrase: OK
    Date: Tue, 07 Sep 2021 12:49:37 GMT\r\n
    Server: Apache\r\n
    Strict-Transport-Security: max-age=2592000; includeSubDomains\r\n
    Expires: Thu, 19 Nov 1981 08:52:00 GMT\r\n
    Cache-Control: no-store, no-cache, must-revalidate\r\n
    Pragma: no-cache\r\n
    Vary: Accept-Encoding\r\n
    Content-Encoding: gzip\r\n
    X-Frame-Options: sameorigin\r\n
    Content-Security-Policy: frame-ancestors 'none';\r\n
    X-XSS-Protection: 1; mode=block\r\n
    Content-Length: 148\r\n
        [Content length: 148]
    Keep-Alive: timeout=5, max=100\r\n
    Connection: Keep-Alive\r\n
    Content-Type: text/html; charset=UTF-8\r\n
    \r\n
    [HTTP response 1/1]
    [Time since request: 0.068028605 seconds]
    [Request in frame: 7]
    [Request URI: http://www.yourserver.com/wysiwyg-editor-upload?qa_only_image=1&CKEditor=a_content&CKEditorFuncNum=0&langCode=en]
    Content-encoded entity body (gzip): 148 bytes -> 136 bytes
    File Data: 136 bytes
Line-based text data: text/html (1 lines)
    <script>window.parent.CKEDITOR.tools.callFunction(0, 'http:\/\/www.yourserver.com\/?qa=blob&qa_blobid=273528782264378881', '');</script>
by
+1
Very useful stuff. No errors in the log, the image is being properly created and the right response is being returned to the browser. The issue does not seem to be server-related, then.

1. Are you getting any error in the browser's console?
2. What browser are you using?
3. Do you succeed with all browser extensions disabled?
4. What about opening a private session and/or using a different browser?
5. If you completely remove the WYSIWYG plugin and you replace it with the one from the master branch, does it work? Here is the link: https://github.com/q2a/question2answer/tree/947a970beb76168a3ab1f4cbd0af468a168121c6

PS: Yes, I meant qa-wysiwyg-upload.php :)
by
Thanx a lot for following up pupi1985.

Suggestion no.1 helped!!

I did not know about the power of browser's console!!
I enabled it and it immediately showed that frame-ancestor 'none' error.  That is one of the headers I had set in the apache webserver!  I changed it to 'self' and and the image upload went through !! :D

Thanx a lot!

BTW, I was seeing this issue in Firefox, Edge and Chrome.  The issue was not with Q2A at all.  It was the Apache2 configuration!!  I'm so sorry to have taken so much time of yours!

FYI:
Now I have a different error.  When I load the page, I don't see the images!

Browser console is saying GET denied:http://www.yourserver.com/?qa=blob&qa_blobid=273528782264378881.

I don't see any entry in the access.log or any GET request for this in tshark output.

I think this is a browser issue too.  I've made some more security related configurations in Apache2 configuration.  I'll disable them one by one and check what works!
by
+1
Good. Your current issue should have been addressed by item 2 in my answer
by
You mean 'src: data;'?
No it hasn't...

I just noticed in tshark output that the http response itself contains the 'denied' word before the link.  This is not browser issue.  For some reason Q2A is adding this.

But what you mentioned in point 2 makes sense.  It should have solved.  Let me dig some more.

FYI: I see this in all browsers, private mode and with all Apache2 configurations set to default.
by
Maybe some plugin is overriding that behavior? Other custom editors maybe?
by
+1
Item 2, with modification solved the problem!
'schemes' => 'href: data, aim, feed..

More info:
Removed all other plugins except the editor and still saw the same behaviour.
tshark showed that the browser sent the correct image url.  However event log showed 'a_post' which already had 'denied:' prepended to the image url.  'qa_posts' table also showed the content contained 'denied:' prepended to the image url.  Read up htmLawed and experimented and got it working.  Also '*: data' also works but 'href:data' appears more restrictive (safer).
...