.origin on WindowOrWorkerGlobalScope breaks company called Origin

RESOLVED FIXED

Status

Tech Evangelism
Desktop
RESOLVED FIXED
a year ago
11 months ago

People

(Reporter: jkitch, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

a year ago
Visit https://www.originenergy.com.au/for-home/my-account.html

Expected:
Username and password fields should be present.  
Actual:
No username or password fields.


16:46.09 INFO: Last good revision: 45dd83a63162363fe69af8e65e8a79b24827ce38
16:46.10 INFO: First bad revision: 5f74cfa4af59296179594ef6269fc35e6f2833d3
16:46.10 INFO: Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=45dd83a63162363fe69af8e65e8a79b24827ce38&tochange=5f74cfa4af59296179594ef6269fc35e6f2833d3

TypeError: origin.headerIconLinks is undefined  navigation.min.65cef571d8c121955dd7583430256b2d.js:34:1
TypeError: origin.accountQuickLinks is undefined  account-quicklinks.min.4dd3369f04436101daeb2a28ec44d9f1.js:5:1
TypeError: origin.accountAlerts is undefined  account-message-alerts.min.ffd1d9b8d5e312caa8f6585881fe28a2.js:13:1
TypeError: origin.accountSessionStorage is undefined  account-property-dropdown.min.957eef84837eb14b1d753e029f0e26f0.js:3:1
TypeError: origin.accountDetailsGraph is undefined  account-landing-snapshot.min.2e3781af45a6baea386154f63deffb8d.js:5:1
TypeError: origin.accountSupportLoginValidation is undefined  account-form-login.min.797ea60e9888dc102543d3d539593e23.js:31:1
TypeError: origin.solarfit is undefined  accountandsupport.min.139369a9827859df829b9ddf48f407b5.js:587:37
TypeError: origin.sessionIdle is undefined  my-account.html:3963:1
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/  jquery.min.320c331d3619d3e998ed3768a1b7b6ad.js:2521
TypeError: origin.utils is undefined  navigation.min.65cef571d8c121955dd7583430256b2d.js:7:5

A sample of the affected code is

var origin=origin||{};
origin.headerIconLinks=origin.headerIconLinks||{};
origin.accountSupportLoginValidation=origin.accountSupportLoginValidation||{};
$(function(){$("#account-header-login").submit(function(f){f.preventDefault();
if($("form.account-header-login").data("formValidation").isValid()){origin.headerIconLinks.submitLogin()
}});


Is this intentional?
The site is only setting their version of the self.origin attribute if its falsey.  For example:

  var origin = origin || {
  };
  origin.headerIconLinks = origin.headerIconLinks || {
  };
  origin.accountSupportLoginValidation = origin.accountSupportLoginValidation || {
  };
Boris, what do you think we should do here?
Flags: needinfo?(bzbarsky)
We could attempt outreach here and ask that they use window._origin, or something...
Ah, the falsiness check effectively works around us making the property replaceable...

I think we should indeed reach out and ask them to change the test to test for typeof object instead of truthiness, or change the variable name, or make the assignment unconditional...
Flags: needinfo?(bzbarsky)
(FWIW, var foo = foo || {} is a super common idiom on the web.)

Karl, could you try to get in touch with the site and ask them to either use a different variable name (other than origin), or to do something like:

var origin = typeof origin == "object" ? origin : {};

It's clashing with https://html.spec.whatwg.org/multipage/webappapis.html#dom-origin.
Flags: needinfo?(kdubost)
Let's move to TE.
Component: DOM → Desktop
Product: Core → Tech Evangelism
I guess we should figure out whether this is a one-off for this site or a somewhat commonly used library....
I did some searching and found no meaningful results via Google or GitHub search. There are 2 comments that make me wonder if this doesn't come from something else though...

> Placeholder example for AEM developer to customise.

AEM *could* to be this Abode thing: https://www.adobe.com/marketing-cloud/enterprise-content-management.html. But it's hard to say. 

I sort of think they just picked origin as their global namespace because the company name is Origin Energy. They use it about 50 different times in 3 different scripts, and some of the usage looks pretty specific to a utility company:

var origin=origin||{};
origin.hotWaterCheck=origin.hotWaterCheck||{}

var origin=origin||{};
origin.accountHomeEnergyProfileGraph=origin.accountHomeEnergyProfileGraph||{}
(Reporter)

Comment 10

11 months ago
They have updated their website, and I have checked that it works with 54.0b13.
Status: NEW → RESOLVED
Last Resolved: 11 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.