Disabling automatic bootstrap. <script> protocol indicates an extension, document.location.href does not match

[jeffhuys]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

On certain browsers (Tested: Safari 9, PhantomJS 2.1), Angular refuses to bootstrap. It generates the error: Angular: Disabling automatic bootstrap. <script> protocol indicates an extension, document.location.href does not match.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

I find it very hard to debug this issue and reproduce it. What might help: we're using Webpack to compile everything down to a single <script> tag (WITHOUT src= or anything else)

What is the expected behavior?

I expect angular to auto-bootstrap.

What is the motivation / use case for changing the behavior?

It's very weird that different browsers generate different results. We're already in production and only now we're getting reports of people being unable to open our website.

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

WORKS in macOS Sierra with Safari 10.x, Firefox, Chrome.
BROKEN in macOS with Safari 9.x, PhantomJS, SINCE 1.5.9

Other information (e.g. stacktraces, related issues, suggestions how to fix)

I've traced the code to https://github.com/angular/angular.js/blob/master/src/Angular.js#L1509 .

Maybe I need to specify a src= tag, or something?

I'm aware that this report may miss some critical info. Please let me know what other information you need!

[Narretz]

This might be a false positive for the mechanism that disallows bootstrap if "angular.js was loaded from a known scheme used on the web". It's possible that there is no provision for a script tag without a src attribute.
Can you maybe debug were exactly this function here:

angular.js/src/Angular.js

Line 1448 in 1cf93fd

function allowAutoBootstrap(document) {

returns false, and why in your application?

[gkalpak]

cc @mprobst

[mprobst]

@jeffhuys could you change the code to print out document.location.origin and link.origin (and possibly without the .origin as well)?

https://github.com/angular/angular.js/blob/master/src/Angular.js#L1485

This is probably some incompatibility on our side, but it's unclear to me what values we should expect there in Safari & PhantomJS.

[gkalpak]

Obviously, document.currentScript.getAttribute('src') returns null when there is no src attribute. The difference comes from how different browsers treat link.href = null.

Chrome (and presumably the other working browsers) treats it as link.href = 'null', which sets the link.protocol and link.origin correctly.

PhantomJS (and presumably Safari 9.x) seems to ignore it. As a result, link.href === link.origin === '' and link.protocol === ':'.

An easy fix would be changing this line like this (which seems to work on PhantomJS):

-var src = document.currentScript.getAttribute('src');
+var src = document.currentScript.getAttribute('src') || '';

The following might also work, but I haven't tried it on all browsers:

-var src = document.currentScript.getAttribute('src');
+var src = document.currentScript.src;

[gkalpak]

@mprobst, if this sgty, I can put together a PR (unless @jeffhuys wants to 😉).

[mprobst]

@gkalpak sounds reasonable. We should treat no src= attribute as the <script> coming from the same origin as the document. Which means we could also check and early exit, something like if (!src) return true;.