From b5802745b111ca103402d9276036033fe66ff9ce Mon Sep 17 00:00:00 2001 From: BrunevalPE Date: Sat, 18 Jun 2022 01:13:41 -0400 Subject: [PATCH 1/5] adding referrer support to GUI image --- packages/dev/core/src/Engines/ICanvas.ts | 8 +++++++- packages/dev/gui/src/2D/controls/image.ts | 22 +++++++++++++++++++++- what's new.md | 1 + 3 files changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/dev/core/src/Engines/ICanvas.ts b/packages/dev/core/src/Engines/ICanvas.ts index bc8791ae24f..b8e631c1bf6 100644 --- a/packages/dev/core/src/Engines/ICanvas.ts +++ b/packages/dev/core/src/Engines/ICanvas.ts @@ -1,7 +1,7 @@ /** * Class used to abstract a canvas */ -export interface ICanvas { + export interface ICanvas { /** * Canvas width. */ @@ -72,6 +72,12 @@ export interface IImage { * thereby enabling the configuration of the CORS requests for the element's fetched data. */ crossOrigin: string | null; + + /** + * provides support for referrer policy on xhr load request, + * it is used to control the request header. + */ + referrerPolicy: string; } /** diff --git a/packages/dev/gui/src/2D/controls/image.ts b/packages/dev/gui/src/2D/controls/image.ts index 859df67cd2f..ab8ce894993 100644 --- a/packages/dev/gui/src/2D/controls/image.ts +++ b/packages/dev/gui/src/2D/controls/image.ts @@ -22,6 +22,7 @@ export class Image extends Control { private _stretch = Image.STRETCH_FILL; private _source: Nullable; private _autoScale = false; + private _referrerPolicy: ReferrerPolicy = "strict-origin-when-cross-origin"; private _sourceLeft = 0; private _sourceTop = 0; @@ -291,6 +292,24 @@ export class Image extends Control { } } + /** + * Gets or sets the referrer policy to apply on the img load request, + * you should set this field before set the source field if you want to ensure the header will be present on the xhr loading request + */ + @serialize() + public get referrerPolicy(): ReferrerPolicy { + return this._referrerPolicy; + } + + public set referrerPolicy(value: ReferrerPolicy) { + if (this._referrerPolicy === value) { + return; + } + + this._referrerPolicy = value; + this._domImage.referrerPolicy = value.toString(); + } + /** Gets or sets the stretching mode used by the image */ @serialize() public get stretch(): number { @@ -521,7 +540,8 @@ export class Image extends Control { throw new Error("Invalid engine. Unable to create a canvas."); } this._domImage = engine.createCanvasImage(); - + this._domImage.referrerPolicy = this._referrerPolicy; + this._domImage.onload = () => { this._onImageLoaded(); }; diff --git a/what's new.md b/what's new.md index 5b0843ef661..0ef7f68201b 100644 --- a/what's new.md +++ b/what's new.md @@ -207,6 +207,7 @@ - Added ValueAndUnit change observable and Grid to listen for changes ([brianzinn](https://github.com/brianzinn)) - Added `closeShape` and `closePath` as extra options parameters in `ExtrudeShape` and `ExtrudeShapeCustom` ([JohnK](https://github.com/BabylonJSGuide)) - Added `markAsDirty` and `markAllAsDirty` public functions on `Control` ([carolhmj](https://github.com/carolhmj)) +- Added support of referrer Policy to control image's request header in GUI Image element ([BrunevalPE](https://github.com/BrunevalPE)) ### Behaviors From 15cdd8c0b25fec217d8da9c40c07b8e8bb21c592 Mon Sep 17 00:00:00 2001 From: BrunevalPE Date: Sat, 18 Jun 2022 01:16:40 -0400 Subject: [PATCH 2/5] remove extra space --- packages/dev/core/src/Engines/ICanvas.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/core/src/Engines/ICanvas.ts b/packages/dev/core/src/Engines/ICanvas.ts index b8e631c1bf6..a7a202bc834 100644 --- a/packages/dev/core/src/Engines/ICanvas.ts +++ b/packages/dev/core/src/Engines/ICanvas.ts @@ -1,7 +1,7 @@ /** * Class used to abstract a canvas */ - export interface ICanvas { +export interface ICanvas { /** * Canvas width. */ From 7dcc6fe54257b0827ecc13fee52aea8bfeef89bc Mon Sep 17 00:00:00 2001 From: BrunevalPE Date: Sat, 18 Jun 2022 01:38:21 -0400 Subject: [PATCH 3/5] removed what's new change --- what's new.md | 1 - 1 file changed, 1 deletion(-) diff --git a/what's new.md b/what's new.md index 0ef7f68201b..5b0843ef661 100644 --- a/what's new.md +++ b/what's new.md @@ -207,7 +207,6 @@ - Added ValueAndUnit change observable and Grid to listen for changes ([brianzinn](https://github.com/brianzinn)) - Added `closeShape` and `closePath` as extra options parameters in `ExtrudeShape` and `ExtrudeShapeCustom` ([JohnK](https://github.com/BabylonJSGuide)) - Added `markAsDirty` and `markAllAsDirty` public functions on `Control` ([carolhmj](https://github.com/carolhmj)) -- Added support of referrer Policy to control image's request header in GUI Image element ([BrunevalPE](https://github.com/BrunevalPE)) ### Behaviors From d85a8bcee156b59321ea2c83058f24f7f77be487 Mon Sep 17 00:00:00 2001 From: BrunevalPE Date: Sat, 18 Jun 2022 02:10:33 -0400 Subject: [PATCH 4/5] format fixed --- packages/dev/gui/src/2D/controls/image.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dev/gui/src/2D/controls/image.ts b/packages/dev/gui/src/2D/controls/image.ts index ab8ce894993..c48f1c0f795 100644 --- a/packages/dev/gui/src/2D/controls/image.ts +++ b/packages/dev/gui/src/2D/controls/image.ts @@ -293,7 +293,7 @@ export class Image extends Control { } /** - * Gets or sets the referrer policy to apply on the img load request, + * Gets or sets the referrer policy to apply on the img load request, * you should set this field before set the source field if you want to ensure the header will be present on the xhr loading request */ @serialize() @@ -541,7 +541,7 @@ export class Image extends Control { } this._domImage = engine.createCanvasImage(); this._domImage.referrerPolicy = this._referrerPolicy; - + this._domImage.onload = () => { this._onImageLoaded(); }; From 3a04f6e2761da0e35f6b4054300915db99336b63 Mon Sep 17 00:00:00 2001 From: BrunevalPE Date: Tue, 21 Jun 2022 18:49:23 -0400 Subject: [PATCH 5/5] code review fixes --- packages/dev/core/src/Misc/tools.ts | 10 +++++++++ packages/dev/gui/src/2D/controls/image.ts | 27 ++++++----------------- 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/dev/core/src/Misc/tools.ts b/packages/dev/core/src/Misc/tools.ts index 3a8c08c2641..5102d0782a3 100644 --- a/packages/dev/core/src/Misc/tools.ts +++ b/packages/dev/core/src/Misc/tools.ts @@ -310,6 +310,16 @@ export class Tools { SetCorsBehavior(url, element); } + /** + * Sets the referrerPolicy behavior on a dom element. + * @param referrerPolicy define the referrer policy to use + * @param element define the dom element where to configure the referrer policy + * @param element.referrerPolicy + */ + public static SetReferrerPolicyBehavior(referrerPolicy: Nullable, element: { referrerPolicy: string | null }): void { + element.referrerPolicy = referrerPolicy; + } + // External files /** diff --git a/packages/dev/gui/src/2D/controls/image.ts b/packages/dev/gui/src/2D/controls/image.ts index c48f1c0f795..cf954b17f61 100644 --- a/packages/dev/gui/src/2D/controls/image.ts +++ b/packages/dev/gui/src/2D/controls/image.ts @@ -22,7 +22,6 @@ export class Image extends Control { private _stretch = Image.STRETCH_FILL; private _source: Nullable; private _autoScale = false; - private _referrerPolicy: ReferrerPolicy = "strict-origin-when-cross-origin"; private _sourceLeft = 0; private _sourceTop = 0; @@ -59,6 +58,12 @@ export class Image extends Control { */ public onSVGAttributesComputedObservable = new Observable(); + /** + * Gets or sets the referrer policy to apply on the img element load request. + * You should set referrerPolicy before set the source of the image if you want to ensure the header will be present on the xhr loading request + */ + public referrerPolicy: Nullable; + /** * Gets a boolean indicating that the content is loaded */ @@ -292,24 +297,6 @@ export class Image extends Control { } } - /** - * Gets or sets the referrer policy to apply on the img load request, - * you should set this field before set the source field if you want to ensure the header will be present on the xhr loading request - */ - @serialize() - public get referrerPolicy(): ReferrerPolicy { - return this._referrerPolicy; - } - - public set referrerPolicy(value: ReferrerPolicy) { - if (this._referrerPolicy === value) { - return; - } - - this._referrerPolicy = value; - this._domImage.referrerPolicy = value.toString(); - } - /** Gets or sets the stretching mode used by the image */ @serialize() public get stretch(): number { @@ -540,13 +527,13 @@ export class Image extends Control { throw new Error("Invalid engine. Unable to create a canvas."); } this._domImage = engine.createCanvasImage(); - this._domImage.referrerPolicy = this._referrerPolicy; this._domImage.onload = () => { this._onImageLoaded(); }; if (value) { Tools.SetCorsBehavior(value, this._domImage); + Tools.SetReferrerPolicyBehavior(this.referrerPolicy, this._domImage); this._domImage.src = value; } }