403 due to invalid security token has terrible DX (was: "CKEditor / X-Content-Type-Options")

Thanks for reporting this issue! Looking into this now :)

I spent more than an hour on #2854817: Duplicate X-Content-Type-Options headers both with the value nosniff. I had to give up. See #2854817-11: Duplicate X-Content-Type-Options headers both with the value nosniff + #2854817-12: Duplicate X-Content-Type-Options headers both with the value nosniff.

due to bad content mime type.

Can you post a screenshot of what that response looks like?

Can you also please export your cdn.settings config? You can do that at /admin/config/development/configuration/single/export — it's of the "Simple configuration" configuration type.

I can't help you without more information. After >3 weeks of waiting for more information, I'm closing this, because it doesn't look like this information will ever follow.

Feel free to reopen!

Re-opening.

I'm experiencing this issue. CKEditor doesn't work if CDN is enabled with Amazon Cloudfront.

Here's the log from the Chrome console. Let me know if you need more information.

randomcode.cloudfront.net/cdn/farfuture/vRNUFFoVIBLXYTJfjXQOupHs5I2VJig2Le9Fll-0LrU/1530738491/core/assets/vendor/ckeditor/lang/en.js?t=pbkn7i:1 Failed to load resource: the server responded with a status of 403 ()
edit?destination=/admin/commerce/products:1 Refused to execute script from 'https://randomcode.cloudfront.net/cdn/farfuture/vRNUFFoVIBLXYTJfjXQOupHs5I2VJig2Le9Fll-0LrU/1530738491/core/assets/vendor/ckeditor/lang/en.js?t=pbkn7i' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ckeditor.js?v=4.8.0+2018-04-18-security-patch:235 Uncaught TypeError: Cannot set property 'dir' of undefined
    at Object.g (ckeditor.js?v=4.8.0+2018-04-18-security-patch:235)
    at a (ckeditor.js?v=4.8.0+2018-04-18-security-patch:236)
    at Array.n (ckeditor.js?v=4.8.0+2018-04-18-security-patch:236)
    at t (ckeditor.js?v=4.8.0+2018-04-18-security-patch:237)
    at HTMLScriptElement.CKEDITOR.env.ie.b.$.onerror (ckeditor.js?v=4.8.0+2018-04-18-security-patch:237)
edit?destination=/admin/commerce/products:1 Refused to apply style from 'https://randomcode.cloudfront.net/cdn/farfuture/vRNUFFoVIBLXYTJfjXQOupHs5I2VJig2Le9Fll-0LrU/1530738491/core/assets/vendor/ckeditor/skins/moono-lisa/editor.css?t=pbkn7i' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
js?callback=Drupal.geolocation.googleCallback&client=&key=AIzaSyAo76yFu77Qwv_lVqbeb1vZYKxyJdCohuQ&language=&libraries=&region=&v=&_=1531428939593:42 Google Maps JavaScript API error: DeletedApiProjectMapError
https://developers.google.com/maps/documentation/javascript/error-messages#deleted-api-project-map-error
_.Ib @ js?callback=Drupal.geolocation.googleCallback&client=&key=AIzaSyAo76yFu77Qwv_lVqbeb1vZYKxyJdCohuQ&language=&libraries=&region=&v=&_=1531428939593:42
edit?destination=/admin/commerce/products:1 Refused to apply style from 'https://randomcode.cloudfront.net/cdn/farfuture/vRNUFFoVIBLXYTJfjXQOupHs5I2VJig2Le9Fll-0LrU/1530738491/core/assets/vendor/ckeditor/skins/moono-lisa/editor.css?t=pbkn7i' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

If you load https://randomcode.cloudfront.net/cdn/farfuture/vRNUFFoVIBLXYTJfjXQOupHs5I2VJig2Le9Fll-0LrU/1530738491/core/assets/vendor/ckeditor/lang/en.js?t=pbkn7i, what does the response look like?

I get an Access Denied error in Drupal.

When visiting using a web sniffer, I get the following response. The Expires line is obviously wrong.

Name	Value
HTTP/1.1 403 Forbidden
Content-Type:	text/html; charset=UTF-8
Transfer-Encoding:	chunked
Connection:	keep-alive
Date:	Mon, 16 Jul 2018 06:59:27 GMT
Server:	Apache/2.4.33 (Amazon) OpenSSL/1.0.2k-fips PHP/5.6.36
X-Content-Type-Options:	nosniff
X-Powered-By:	PHP/5.6.36
Cache-Control:	max-age=60, public
X-Drupal-Dynamic-Cache:	UNCACHEABLE
Link:	; rel="canonical", ; rel="shortlink"
Link:	; rel=preconnect; crossorigin
Link:	; rel=dns-prefetch
Link:	; rel="canonical", ; rel="shortlink"
Link:	; rel=preconnect; crossorigin
Link:	; rel=dns-prefetch
x-dns-prefetch-control:	on
X-UA-Compatible:	IE=edge
Content-Language:	en
X-Content-Type-Options:	nosniff
X-Frame-Options:	SAMEORIGIN
Expires:	Sun, 19 Nov 1978 05:00:00 GMT
Last-Modified:	Mon, 16 Jul 2018 06:59:27 GMT
ETag:	"1531724367"
X-Generator:	Drupal 8 (https://www.drupal.org)
X-Drupal-Cache:	MISS
Vary:	Cookie
X-Cache:	Error from cloudfront
Via:	1.1 4b41f5d4002cf5daabe6e170bd619abc.cloudfront.net (CloudFront)
X-Amz-Cf-Id:	xDc_b8HzktahiEgFU9eSwd_FMUS12Dn4B0mxXSygYJjPYXhxHFeIoQ==

What does the response body look like? Does it contain Invalid security token.?

Without a response to #9, I can't help you. I really do want to help you!

Hi Wim.

Thanks. I messaged you privately via Drupal.org just after your last post a month or so ago. I'm guessing you didn't receive it?

Ugh. I did, but I missed it. Sorry! Stay tuned.

So you wrote

CKEditor doesn't work if CDN is enabled with Amazon Cloudfront.

… but since the response is a 403, of course it cannot work. Next step: figure out why it's a 403.

I'm 99% certain that this code in \Drupal\cdn\CdnFarfutureController::download() is causing the 403:

    // Validate security token.
    $root_relative_file_url = $request->query->get('root_relative_file_url');
    $calculated_token = Crypt::hmacBase64($mtime . $root_relative_file_url, $this->privateKey->get() . Settings::getHashSalt());
    if ($security_token !== $calculated_token) {
      throw new AccessDeniedHttpException('Invalid security token.');
    }

i.e. the provided security token is not matching, and AccessDeniedHttpException is converted to a HTML 403 response by \Drupal\Core\EventSubscriber\DefaultExceptionHtmlSubscriber::on403().

This is poor DX and should be fixed.

This is a test-only patch that should fail, proving the DX problem described in #13.

And here's the fix.

This should help confirm that it's indeed this "incorrect security token" that's causing the 403.

Next step: figuring out why that security token is invalid in your case. I'm assuming you did try clicking the "Clear all caches" button at /admin/config/development/performance?
Assuming you did, do you have any modules installed that extend/enhance/alter CKEditor?

Alright, that worked 👍

Now I need feedback for #16 :) It'd be great if you could apply #15 to your site and confirm that that 403 is no longer returning a HTML response, but just a plain text response containing:

Invalid security token.

Patch #15 applied, but I'm not seeing anything different in the Chrome console.

Sorry for not being more clear.

I never said that patch would fix your problem. I said it'd help confirm the root cause of the problem. I just checked the URL you sent me in private, and it almost is confirmed, but the concrete error message is missing. This should make that error message show up and confirm it 100%.

I hit the same issues, tested the patch in 21 and i can confirm that the 403 now shows {"message":"Invalid security token."} instead of the Drupal "Access Denied" page when trying to access the file https://snap.mydomain.com/cdn/farfuture/LPro....J2A/1536185780/core/assets/vendor/ckeditor/lang/en.js?t=peomou.

So now that we know for certain that that is the actual problem - what's the fix? :)

@asak Thanks for confirming!

I'll try to figure out how/why this is happening. Blocked on me now.

I can confirm this issue exists too. I am using CDN module with KeyCDN provider and CKEditor crashes when JS files are served by CDN.

Reproduced. This is actually the very reason #2827998: Add a new default option to the CDN UI: "all files except CSS+JS", and make this the new default of the CDN module, include upgrade path was done, and it was asked before in #2849041: CKEditor translation JS files cannot be loaded (403) when using Interface Translation + "Serve all files" + "Forever cacheable files". Detailed answer at #2849041-3: CKEditor translation JS files cannot be loaded (403) when using Interface Translation + "Serve all files" + "Forever cacheable files".

I'm very sorry this took so long to figure out :(

FYI: a potential solution for this was posted at #3061110-11: Automatically prevent CKEditor from loading from the CDN when far future functionality is enabled.