Cdn.wanikani.com and CORS

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 Likes

Yes. Yes it would be logical.

We’ll get back to you on this one.

2 Likes

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

1 Like

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?

1 Like

Will look into this tomorrow. Sorry!

1 Like

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

1 Like

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

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.

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.

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: *
1 Like

Thank you!

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

stats

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

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

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.

Odd.

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

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

https://wkstats.com:10001

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.

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