keystonejs/keystone-classic

tinymce cloudinary 'insert an image from your computer' not work on https.

Open

#4,368 opened on Jun 20, 2017

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (14,656 stars) (2,288 forks)batch import
help wantedquestion

Description

Expected behavior

Actual/Current behavior

Steps to reproduce the actual/current behavior

Issue: In keystone.js admin tinyMCE editor, it says no file chosen when I choose an image inside the ’insert an image from your computer’ button. It doesn't load the image. I'm just trying to load the image from the computer on my keystone.js hosted on https domain. This feature works over http , localhost but not on https domain.

console says:

serialize @ tinymce.min.js:5
593667c59ccc8a21f1f113c9:1 Refused to display 'https://lifeartlee.us/keystone/api/cloudinary/upload' in a frame because it set 'X-Frame-Options' to 'deny'.
/keystone/api/cloudinary/upload Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE
plugin.min.js:1 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://lifeartlee.us" from accessing a cross-origin frame.
    at HTMLIFrameElement.j (https://lifeartlee.us/keystone/js/lib/tinymce/plugins/uploadimage/plugin.min.js:1:2041)
593667c59ccc8a21f1f113c9:1 Refused to display 'https://lifeartlee.us/keystone/api/cloudinary/upload' in a frame because it set 'X-Frame-Options' to 'deny'.
/keystone/api/cloudinary/upload Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE
plugin.min.js:1 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://lifeartlee.us" from accessing a cross-origin frame.
    at HTMLIFrameElement.j (https://lifeartlee.us/keystone/js/lib/tinymce/plugins/uploadimage/plugin.min.js:1:2041)

Guessing: Probably tinyMCE is receiving cloudinary image over http, which may be blocked from my https domain,

Please help me solve the issue. thank you!

Environment

| Software | Version | ---------------- | 4.0.0-beta.5 | Keystone | | Node |

Contributor guide

Tech stack
javascriptnodejsexpress
Domain
backend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Express middlewareX Frame Options headerCloudinary upload plugin
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The issue is that the Cloudinary upload endpoint returns `X Frame Options: deny`, which prevents the TinyMCE iframe from loading the upload response. Investigate the Keystone Classic codebase to find where the upload route is defined (likely in a Cloudinary plugin). Check if the endpoint sets `X Frame Options` and modify it to allow same origin framing or remove the header. Alternatively, the TinyMCE plugin may need to be updated to handle the response differently. Review the plugin.min.js file mentioned in the stack trace for clues.