tinymce broken in flatpages about chipy.org HOT 14 CLOSED

Ah, this is a CORS issue cause the static files are on S3. Seems like the simplest solution is to update the app to have the tinymce files come from the app instead of S3.

http://stackoverflow.com/questions/572025/tiny-mce-popups-blank-in-django-admin

-- 
Cezar Jenkins
@emperorcezar

On December 5, 2013 at 4:18:01 PM, Sheila Miguez ([email protected]) wrote:

When trying to use one of the widgets like anchors, the url goes to an empty s3 page...

http://s3.amazonaws.com/chipy/tiny_mce/themes/advanced/anchor.htm

—
Reply to this email directly or view it on GitHub.

from chipy.org.

Can you make something like http://cdn.ChiPy.org/ point to the s3 bucket and use that as the STATIC_URL? I believe that takes care of this issue. Guess we'd have to add document.domain = "chipy.org"; to the tinymce js files too.

from chipy.org.

I've used this package before without issue https://github.com/ottoyiu/django-cors-headers

from chipy.org.

If someone wants to throw that together, I'd be happy to deploy it.

from chipy.org.

I don't think that solves the problem; we need the S3 bucket to respond to CORS requests with appropriate headers, not the ChiPy Django app.

The S3 instructions boil down to creating the below XML document and adding it as the cors subresource to the bucket.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Can you try that?

from chipy.org.

Thanks. You're right. I had it backward. Issue now is that S3 won't return
the CORS headers unless the request includes an Origin header.

On Sun, May 4, 2014 at 4:17 PM, Adam Forsyth [email protected]:

I don't think that solves the problem; we need the S3 bucket to respond to
CORS requests with appropriate headers, not the ChiPy Django app.

The S3 instructionshttp://docs.aws.amazon.com/AmazonS3/latest/dev/cors.htmlboil down to creating the below XML document and adding it as the
cors subresource to the bucket.

* GET

Can you try that?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/54#issuecomment-42145346
.

from chipy.org.

The bucket appears to be working correctly for GET requests.

"Preflight" CORS requests seem to be 403ing. I think I misread the example rules. Can you try:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

which should allow everything? I think the AllowedHeader part is what was missing.

from chipy.org.

The issue, as far as I can tell, isn't the CORS settings at this point.
Because TinyMCE is loading the JS in iframes and not using XHR, there are
not preflight requests and no Origin header. Without and Origin header,
s3 wont' return the CORS headers.

Seems the only option is to use the subdomain trick and set
document.domain, or switch WYSIWYG editors. I'm going to try switching
editors first before I start with hacks.

On Mon, May 5, 2014 at 8:03 PM, Adam Forsyth [email protected]:

The bucket appears to be working correctlyhttp://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=http%3A%2F%2Fchipy.s3.amazonaws.com%2Ftiny_mce%2Fplugins%2Finlinepopups%2Fskins%2Fclearlooks2%2Fimg%2Fbuttons.gif&server_enable=true&server_status=200&server_credentials=false&server_tabs=remotefor GET requests.

"Preflight" CORS requests seem to be 403ing. I think I misread the example
rules. Can you try:

_ GET PUT POST DELETE _

which should just allow everything? I think the AllowedHeader part is
what was missing.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/54#issuecomment-42258319
.

from chipy.org.

I turned off tinymce for flat pages till we get it sorted out, you can edit
the html directly.

On Mon, May 5, 2014 at 8:29 PM, Adam "Cezar" Jenkins <[email protected]

wrote:

The issue, as far as I can tell, isn't the CORS settings at this point.
Because TinyMCE is loading the JS in iframes and not using XHR, there are
not preflight requests and no Origin header. Without and Origin header,
s3 wont' return the CORS headers.

Seems the only option is to use the subdomain trick and set
document.domain, or switch WYSIWYG editors. I'm going to try switching
editors first before I start with hacks.

On Mon, May 5, 2014 at 8:03 PM, Adam Forsyth [email protected]:

The bucket appears to be working correctlyhttp://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=http%3A%2F%2Fchipy.s3.amazonaws.com%2Ftiny_mce%2Fplugins%2Finlinepopups%2Fskins%2Fclearlooks2%2Fimg%2Fbuttons.gif&server_enable=true&server_status=200&server_credentials=false&server_tabs=remotefor GET requests.

"Preflight" CORS requests seem to be 403ing. I think I misread the
example rules. Can you try:

_ GET PUT POST DELETE _

which should just allow everything? I think the AllowedHeader part is
what was missing.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/54#issuecomment-42258319
.

from chipy.org.

Great, thanks.

from chipy.org.

Just came across this, would easily solve the issue, https://github.com/kennethreitz/dj-static

from chipy.org.

Any updates on this?

from chipy.org.

I have the backend using html for now. TinyMCE doesn't use an Origin header
so it's not going to work with S3. Kenneth Reitz has a good package for
Django that does static file hosting[0]. My next step is to use that for
the site so everything is on the domain.

[0] https://github.com/kennethreitz/dj-static

On Sun, Jun 1, 2014 at 11:53 AM, Brian Ray [email protected] wrote:

Any updates on this?

—
Reply to this email directly or view it on GitHub
#54 (comment)
.

from chipy.org.

This is now working.

from chipy.org.