Cdn.wanikani.com and CORS


#1

I’ve been trying to use the character_images (the unstyled SVG version, to be more specific) of radicals in a userscript. As long as I use them directly in an img tag, everything is working as expected. The downside is, I can’t style the SVGs this way. When I’m using an SVG injector (like this one), it tries to embed the SVG - and even actually seems to receive the data - but then it fails because the response from the CDN didn’t have an Access-Control-Allow-Origin header.

So I’ve been thinking, wouldn’t it be logical to have at least wanikani.com whitelisted for CORS on the CDN?


#2

Yes. Yes it would be logical.

We’ll get back to you on this one.


#3

Interesting… it must be the injection itself.

I’m using the unstyled SVGs on https://wkstats.com:10001/, and I’m not having any CORS problems. But I’m using ajax to fetch the SVGs, inserting them into the DOM, and styling them with CSS using .radical {...}.

But either way, you’re right about CORS whitelisting


#4

Looks like the Access-Control-Allow-Origin header is added now, but maybe only contains https://www.wanikani.com/ ?

wkstats.com stopped being able to load the radical SVGs.
Since the radical images/SVGs are part of the API, would it be okay to set Access-Control-Allow-Origin: * so any site or app can use them?


#5

Will look into this tomorrow. Sorry!


#6

I’ve updated the origin. Let me know how it goes. May take time to propagate.


#7

I’ve just refreshed the stats site when I sat down to do some reviews - the particular radicals are still not loading, for now.


#8

I went ahead and force invalidated the assets on our CDN. It is processing now. Should be refreshed in a few.

Edit: it just finished invalidating.


#9

I just refreshed and it’s still not loading, but it’s late where you are so I’ll leave you alone and wait 'til tomorrow.
Cheers.


#10

Its not a problem :slight_smile:

Finally found some time to get myself in front of a computer.

Here is a cURL to one of the SVGs.

curl -H "Origin: https://www.wkstats.com" --verbose https://cdn.wanikani.com/images/legacy/98-subject-1-with-css-original.svg\?1520987072
*   Trying 13.32.254.54...
* TCP_NODELAY set
* Connected to cdn.wanikani.com (13.32.254.54) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/cert.pem
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Client hello (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
* ALPN, server accepted to use h2
* Server certificate:
*  subject: OU=Domain Control Validated; OU=EssentialSSL Wildcard; CN=*.wanikani.com
*  start date: May 16 00:00:00 2016 GMT
*  expire date: Jun 15 23:59:59 2019 GMT
*  subjectAltName: host "cdn.wanikani.com" matched cert's "*.wanikani.com"
*  issuer: C=GB; ST=Greater Manchester; L=Salford; O=COMODO CA Limited; CN=COMODO RSA Domain Validation Secure Server CA
*  SSL certificate verify ok.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* Using Stream ID: 1 (easy handle 0x7fd4a980d600)
> GET /images/legacy/98-subject-1-with-css-original.svg?1520987072 HTTP/2
> Host: cdn.wanikani.com
> User-Agent: curl/7.54.0
> Accept: */*
> Origin: https://www.wkstats.com
> 
* Connection state changed (MAX_CONCURRENT_STREAMS updated)!
< HTTP/2 200 
< content-type: image/svg+xml
< content-length: 257
< date: Fri, 12 Oct 2018 04:57:42 GMT
< access-control-allow-origin: *
< access-control-allow-methods: GET
< access-control-max-age: 86400
< last-modified: Wed, 14 Mar 2018 00:24:33 GMT
< etag: "6dd0e5beb1cf1c38b2faf842d711c019"
< accept-ranges: bytes
< server: AmazonS3
< vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method
< x-cache: Miss from cloudfront
< via: 1.1 400e19a7f70282e0817451f6606ca8f9.cloudfront.net (CloudFront)
< x-amz-cf-id: AlAvGSmwxLGj10PtGiZaisdI-5taPL-fGrUAq_RcYSzJno8cx4b23g==
< 
* Connection #0 to host cdn.wanikani.com left intact
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.a{fill:none;stroke:#000;stroke-linecap:square;stroke-miterlimit:2;stroke-width:68px;}</style></defs><title>ground</title><line class="a" x1="60" y1="500" x2="940" y2="500"/></svg>

Looks like it is returning a splat origin now.

access-control-allow-origin: *

#11

Thank you!


#12

@rfindley, @viet - the issue with some of the radicals not loading on the new stats site is happening again…

stats


#13

Could you check the errors again an post a screenshot? They seem to be loading fine for me (at least on my tablet, anyway).


#14

It’s happening to me too, here are the errors I’m getting

EDIT: I’m guessing this would be more helpful, I opened one of the errors and it shows that it occurs in this function

Summary
html: function(e) {
            return z(this, function(e) {
                var t = this[0] || {}
                  , n = 0
                  , r = this.length;
                if (void 0 === e && 1 === t.nodeType)
                    return t.innerHTML;
                if ("string" == typeof e && !Ae.test(e) && !ge[(de.exec(e) || ["", ""])[1].toLowerCase()]) {
                    e = w.htmlPrefilter(e);
                    try {
                        for (; n < r; n++)
                            1 === (t = this[n] || {}).nodeType && (w.cleanData(ye(t, !1)),
                            t.innerHTML = e);
                        t = 0
                    } catch (e) {}
                }
                t && this.empty().append(e)
            }, null, e, arguments.length)
        },

specifically at this line
t.innerHTML = e);


#15

Looks identical to last time as far as I can see…

It also appears to be the exact same radicals that it’s happening to.


#16

Odd.

Can someone run the curl in this post and see what it returns for origin?


#17

Can also someone provide me a link to the new stats site?


#18

https://wkstats.com:10001


#19

The radicals are showing up for me.

Have you tried clearing your local cache? I’ll investigate further when I have access to a computer.


#20

Sorry for the trouble! I deleted my old bookmark for the site and the newly installed one is working fine now, cheers!