From 070680918142cae271cd84f5d57d238bef9e8f26 Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Wed, 30 Oct 2019 18:02:47 -0700 Subject: [PATCH 01/10] added cached font info --- spec/amp-cors-requests.md | 49 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index e0c057864d23..9ac22b9f8704 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -368,6 +368,55 @@ Our response headers would be: Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: https://example-com.cdn.ampproject.org ``` +## Working with cached fonts +Google AMP Cache caches AMP HTML documents, images and fonts to optimize the speed of the AMP page. While making the AMP page fast, we also want to be careful in securing the cached resources. We will be making a change in how AMP cache responds it’s cached resources, +typically for fonts, by respecting the origin’s `Access-Control-Allow-Origin` value. + +### How AMP Cache works as-is +When an AMP page was loading [https://example.com/some/font.ttf](https://example.com/some/font.ttf) from `@font-face src` attribute, AMP Cache will cache the font file and serve the resource as below with having the wild card `Access-Control-Allow-Origin`. + +- URL [https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff](https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff) +- Access-Control-Allow-Origin: * + +### Font implementation +While the current implementation is permissive, this could lead to unexpected use of the fonts from cross-origin sites. In this change AMP Cache will start to respond with the exact same `Access-Control-Allow-Origin` value the origin server responds. +To properly load the fonts from the cached AMP document, you will need to accept the AMP Cache origin via the header. + +A sample implementation would be: + +```javascript +function assertFontCors(req, res, opt_validMethods, opt_exposeHeaders) { + var unauthorized = 'Unauthorized Request'; + var allowedOrigins = [ + "https://example.com", + "https://example-com.cdn.ampproject.org"]; + + // If allowed CORS origin + if (allowedOrigins.indexOf(req.headers.origin) != -1) { + res.setHeader('Access-Control-Allow-Origin', req.headers.origin); + } else { + res.statusCode = 401; + res.end(JSON.stringify({message: unauthorized})); + throw unauthorized; + } +} +``` +As an example, if you wanted to load /some/font.ttf in https://example.com/amp.html, the origin server should respond with the Access-Control-Allow-Origin header as below. + +// TODO: Add photo + +[tip type="note] +If your font file is okay to be accessible from any origin, you can respond with a wild card `Access-Control-Allow-Origin`, AMP cache will also echo that value meaning it will be responding with `Access-Control-Allow-Origin: *`. If you already have this setting, there is no need in changing anything. +[/tip] + +We are planning to make this change around mid October 2019 and would expect every AMP publishers using self-hosted fonts to check if it’s affected. + +### Roll out plan + +- 2019-09-30: release contains more precise control over which domains this change applies to. This build should roll out over the course of this week. +- 2019-10-07: test domains will be enabled for manual testing. +- 2019-10-14: (but depending on how testing goes): the feature will be rolled out generally. + ## Testing CORS in AMP From 52f2db88c7edd72d6a986836e8590f079a3c6fda Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Thu, 31 Oct 2019 09:35:08 -0700 Subject: [PATCH 02/10] added image --- spec/amp-cors-requests.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index 9ac22b9f8704..d8034c47f608 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -403,7 +403,11 @@ function assertFontCors(req, res, opt_validMethods, opt_exposeHeaders) { ``` As an example, if you wanted to load /some/font.ttf in https://example.com/amp.html, the origin server should respond with the Access-Control-Allow-Origin header as below. -// TODO: Add photo + + + [tip type="note] If your font file is okay to be accessible from any origin, you can respond with a wild card `Access-Control-Allow-Origin`, AMP cache will also echo that value meaning it will be responding with `Access-Control-Allow-Origin: *`. If you already have this setting, there is no need in changing anything. From dd56bef9eaad2f60bc2935e68c04ecc68558e356 Mon Sep 17 00:00:00 2001 From: CrystalOnScript Date: Thu, 31 Oct 2019 11:15:52 -0700 Subject: [PATCH 03/10] 401 => 403 --- spec/amp-cors-requests.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index d8034c47f608..42f01d459630 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -395,7 +395,7 @@ function assertFontCors(req, res, opt_validMethods, opt_exposeHeaders) { if (allowedOrigins.indexOf(req.headers.origin) != -1) { res.setHeader('Access-Control-Allow-Origin', req.headers.origin); } else { - res.statusCode = 401; + res.statusCode = 403; res.end(JSON.stringify({message: unauthorized})); throw unauthorized; } From ff36b9d7b37bc11ab1b3bad0b112025b8d3eaa2a Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Thu, 31 Oct 2019 12:27:00 -0700 Subject: [PATCH 04/10] nit fixes --- spec/amp-cors-requests.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index 42f01d459630..77c1239cdb05 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -372,13 +372,13 @@ Access-Control-Allow-Origin: https://example-com.cdn.ampproject.org Google AMP Cache caches AMP HTML documents, images and fonts to optimize the speed of the AMP page. While making the AMP page fast, we also want to be careful in securing the cached resources. We will be making a change in how AMP cache responds it’s cached resources, typically for fonts, by respecting the origin’s `Access-Control-Allow-Origin` value. -### How AMP Cache works as-is +### Past behavior (before October 2019) When an AMP page was loading [https://example.com/some/font.ttf](https://example.com/some/font.ttf) from `@font-face src` attribute, AMP Cache will cache the font file and serve the resource as below with having the wild card `Access-Control-Allow-Origin`. - URL [https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff](https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff) - Access-Control-Allow-Origin: * -### Font implementation +### New behavior (October 2019 and after) While the current implementation is permissive, this could lead to unexpected use of the fonts from cross-origin sites. In this change AMP Cache will start to respond with the exact same `Access-Control-Allow-Origin` value the origin server responds. To properly load the fonts from the cached AMP document, you will need to accept the AMP Cache origin via the header. @@ -415,7 +415,7 @@ If your font file is okay to be accessible from any origin, you can respond with We are planning to make this change around mid October 2019 and would expect every AMP publishers using self-hosted fonts to check if it’s affected. -### Roll out plan +#### Roll out plan - 2019-09-30: release contains more precise control over which domains this change applies to. This build should roll out over the course of this week. - 2019-10-07: test domains will be enabled for manual testing. From 4ce2073fa42741a3003405dd933963be10a0765b Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Thu, 31 Oct 2019 13:48:07 -0700 Subject: [PATCH 05/10] added issue link --- spec/amp-cors-requests.md | 1 + 1 file changed, 1 insertion(+) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index 77c1239cdb05..19f780ae14e7 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -421,6 +421,7 @@ We are planning to make this change around mid October 2019 and would expect eve - 2019-10-07: test domains will be enabled for manual testing. - 2019-10-14: (but depending on how testing goes): the feature will be rolled out generally. +Follow the related [issue here.](https://github.com/ampproject/amphtml/issues/24834) ## Testing CORS in AMP From 2ec56788cd803c8790694fc4249e6512c201ecb9 Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Tue, 19 Nov 2019 08:49:29 -0800 Subject: [PATCH 06/10] formattting issues --- spec/amp-cors-requests.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index 19f780ae14e7..6488ba36dc1c 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -287,11 +287,11 @@ function assertCors(req, res, opt_validMethods, opt_exposeHeaders) { var unauthorized = 'Unauthorized Request'; var origin; var allowedOrigins = [ - "https://example.com", - "https://example-com.cdn.ampproject.org", - "https://example.com.amp.cloudflare.com", - "https://cdn.ampproject.org" ]; - var allowedSourceOrigin = "https://example.com"; //publisher's origin + 'https://example.com', + 'https://example-com.cdn.ampproject.org', + 'https://example.com.amp.cloudflare.com', + 'https://cdn.ampproject.org' ]; + var allowedSourceOrigin = 'https://example.com'; //publisher's origin var sourceOrigin = req.query.__amp_source_origin; @@ -369,16 +369,20 @@ Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: https://example-com.cdn.ampproject.org ``` ## Working with cached fonts -Google AMP Cache caches AMP HTML documents, images and fonts to optimize the speed of the AMP page. While making the AMP page fast, we also want to be careful in securing the cached resources. We will be making a change in how AMP cache responds it’s cached resources, + +Google AMP Cache caches AMP HTML documents, images and fonts to optimize the speed of the AMP page. +While making the AMP page fast, we also want to be careful in securing the cached resources. We will be making a change in how AMP cache responds it’s cached resources, typically for fonts, by respecting the origin’s `Access-Control-Allow-Origin` value. ### Past behavior (before October 2019) + When an AMP page was loading [https://example.com/some/font.ttf](https://example.com/some/font.ttf) from `@font-face src` attribute, AMP Cache will cache the font file and serve the resource as below with having the wild card `Access-Control-Allow-Origin`. - URL [https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff](https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff) - Access-Control-Allow-Origin: * ### New behavior (October 2019 and after) + While the current implementation is permissive, this could lead to unexpected use of the fonts from cross-origin sites. In this change AMP Cache will start to respond with the exact same `Access-Control-Allow-Origin` value the origin server responds. To properly load the fonts from the cached AMP document, you will need to accept the AMP Cache origin via the header. From 80b0317bc2668223e27617d71baee6089dbc7f54 Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Tue, 19 Nov 2019 09:48:53 -0800 Subject: [PATCH 07/10] pretty, again --- spec/amp-cors-requests.md | 46 +++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index b3044cebb049..9d20604672be 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -274,21 +274,21 @@ function assertCors(req, res, opt_validMethods, opt_exposeHeaders) { var unauthorized = 'Unauthorized Request'; var origin; var allowedOrigins = [ - 'https://example.com', - 'https://example-com.cdn.ampproject.org', - 'https://example.com.amp.cloudflare.com', - 'https://cdn.ampproject.org' ]; - var allowedSourceOrigin = 'https://example.com'; //publisher's origin - var sourceOrigin = req.query.__amp_source_origin; - - + 'https://example.com', + 'https://example-com.cdn.ampproject.org', + 'https://example.com.amp.cloudflare.com', + 'https://cdn.ampproject.org', + ]; + var allowedSourceOrigin = 'https://example.com'; //publisher's origin // If same origin if (req.headers['amp-same-origin'] == 'true') { - origin = sourceOrigin; - // If allowed CORS origin & allowed source origin - } else if (allowedOrigins.indexOf(req.headers.origin) != -1 && - sourceOrigin == allowedSourceOrigin) { - origin = req.headers.origin; + origin = sourceOrigin; + // If allowed CORS origin & allowed source origin + } else if ( + allowedOrigins.indexOf(req.headers.origin) != -1 && + sourceOrigin == allowedSourceOrigin + ) { + origin = req.headers.origin; } else { res.statusCode = 403; res.end(JSON.stringify({message: unauthorized})); @@ -357,8 +357,8 @@ Access-Control-Allow-Origin: https://example-com.cdn.ampproject.org ``` ## Working with cached fonts -Google AMP Cache caches AMP HTML documents, images and fonts to optimize the speed of the AMP page. -While making the AMP page fast, we also want to be careful in securing the cached resources. We will be making a change in how AMP cache responds it’s cached resources, +Google AMP Cache caches AMP HTML documents, images and fonts to optimize the speed of the AMP page. +While making the AMP page fast, we also want to be careful in securing the cached resources. We will be making a change in how AMP cache responds it’s cached resources, typically for fonts, by respecting the origin’s `Access-Control-Allow-Origin` value. ### Past behavior (before October 2019) @@ -370,7 +370,7 @@ When an AMP page was loading [https://example.com/some/font.ttf](https://example ### New behavior (October 2019 and after) -While the current implementation is permissive, this could lead to unexpected use of the fonts from cross-origin sites. In this change AMP Cache will start to respond with the exact same `Access-Control-Allow-Origin` value the origin server responds. +While the current implementation is permissive, this could lead to unexpected use of the fonts from cross-origin sites. In this change AMP Cache will start to respond with the exact same `Access-Control-Allow-Origin` value the origin server responds. To properly load the fonts from the cached AMP document, you will need to accept the AMP Cache origin via the header. A sample implementation would be: @@ -379,16 +379,16 @@ A sample implementation would be: function assertFontCors(req, res, opt_validMethods, opt_exposeHeaders) { var unauthorized = 'Unauthorized Request'; var allowedOrigins = [ - "https://example.com", - "https://example-com.cdn.ampproject.org"]; - + 'https://example.com', + 'https://example-com.cdn.ampproject.org', + ]; // If allowed CORS origin if (allowedOrigins.indexOf(req.headers.origin) != -1) { - res.setHeader('Access-Control-Allow-Origin', req.headers.origin); + res.setHeader('Access-Control-Allow-Origin', req.headers.origin); } else { - res.statusCode = 403; - res.end(JSON.stringify({message: unauthorized})); - throw unauthorized; + res.statusCode = 403; + res.end(JSON.stringify({message: unauthorized})); + throw unauthorized; } } ``` From db2fac34243e04d3d4c5cf643ff291af5e771eb9 Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Tue, 19 Nov 2019 09:57:36 -0800 Subject: [PATCH 08/10] forgot one --- spec/amp-cors-requests.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index 9d20604672be..f5f8b03ad937 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -366,7 +366,7 @@ typically for fonts, by respecting the origin’s `Access-Control-Allow-Origin` When an AMP page was loading [https://example.com/some/font.ttf](https://example.com/some/font.ttf) from `@font-face src` attribute, AMP Cache will cache the font file and serve the resource as below with having the wild card `Access-Control-Allow-Origin`. - URL [https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff](https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff) -- Access-Control-Allow-Origin: * +- Access-Control-Allow-Origin: \* ### New behavior (October 2019 and after) From 327092dfd7bdc5377355a6634820e61caf83aa4b Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Tue, 19 Nov 2019 10:07:21 -0800 Subject: [PATCH 09/10] spaces added --- spec/amp-cors-requests.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index f5f8b03ad937..fcc42b22df9f 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -355,6 +355,7 @@ Our response headers would be: Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: https://example-com.cdn.ampproject.org ``` + ## Working with cached fonts Google AMP Cache caches AMP HTML documents, images and fonts to optimize the speed of the AMP page. @@ -392,6 +393,7 @@ function assertFontCors(req, res, opt_validMethods, opt_exposeHeaders) { } } ``` + As an example, if you wanted to load /some/font.ttf in https://example.com/amp.html, the origin server should respond with the Access-Control-Allow-Origin header as below. From 6e8cf570159d1b488631a840a64d5254933dd34f Mon Sep 17 00:00:00 2001 From: Crystal Lambert Date: Tue, 19 Nov 2019 10:35:11 -0800 Subject: [PATCH 10/10] fixed example links --- spec/amp-cors-requests.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/amp-cors-requests.md b/spec/amp-cors-requests.md index fcc42b22df9f..24894c7e1600 100644 --- a/spec/amp-cors-requests.md +++ b/spec/amp-cors-requests.md @@ -364,9 +364,9 @@ typically for fonts, by respecting the origin’s `Access-Control-Allow-Origin` ### Past behavior (before October 2019) -When an AMP page was loading [https://example.com/some/font.ttf](https://example.com/some/font.ttf) from `@font-face src` attribute, AMP Cache will cache the font file and serve the resource as below with having the wild card `Access-Control-Allow-Origin`. +When an AMP page was loading `https://example.com/some/font.ttf` from `@font-face src` attribute, AMP Cache will cache the font file and serve the resource as below with having the wild card `Access-Control-Allow-Origin`. -- URL [https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff](https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff) +- URL `https://example-com.cdn.ampproject.org/r/s/example.com/some/font.tff` - Access-Control-Allow-Origin: \* ### New behavior (October 2019 and after) @@ -394,7 +394,7 @@ function assertFontCors(req, res, opt_validMethods, opt_exposeHeaders) { } ``` -As an example, if you wanted to load /some/font.ttf in https://example.com/amp.html, the origin server should respond with the Access-Control-Allow-Origin header as below. +As an example, if you wanted to load /some/font.ttf in `https://example.com/amp.html`, the origin server should respond with the Access-Control-Allow-Origin header as below.