Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failed to load HTTP resource in live URL #23012

Closed
akilmakda opened this Issue Mar 27, 2018 · 20 comments

Comments

Projects
None yet
7 participants
@akilmakda
Copy link

akilmakda commented Mar 27, 2018

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Angular service worker application throws following error


Failed to HTTP in live url load resource : the server responded with a status of 504 (Gateway Timeout)

Expected behavior

It should not throw any exceptions

Minimal reproduction of the problem with instructions

Demo application on git below is the link
URL : https://github.com/akilmakda/PWA-not-work-in-HTTP

download application -> install npm -> build( ng build --prod) -> upload to any live server.

NOTE: in localhost, it works fine

screenshot from 2018-03-27 11-46-04

Environment


Angular version: 5.2.5


Browser:
- [ ] Chrome (desktop) version 65.0.3325.181
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.9.3  
- Platform: Linux
@jainanuj0812

This comment has been minimized.

Copy link
Contributor

jainanuj0812 commented Mar 27, 2018

Can you please share here, how you are using angular http service. It seems like you are facing issue due to some missing server-side configurations, something which is not related to angular.

@akilmakda

This comment has been minimized.

Copy link
Author

akilmakda commented Mar 27, 2018

@jainanuj0812 follow my uploaded application. In that application, I just set demo images three is in HTTPS and same three in HTTP when you set a refresh page https images are load but not HTTP images. You can check in console and Network tab of developer option.

i set application in this server : https://ghostly-baud.000webhostapp.com/

@jainanuj0812

This comment has been minimized.

Copy link
Contributor

jainanuj0812 commented Mar 27, 2018

@akilmakda, You can't make a request to HTTP from the HTTPS based origin.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Mar 27, 2018

This seems to be caused by the fact that, while "passive mixed content" (like images) only produces a warning without a ServiceWorker, fetching it via a ServiceWorker results in an error. This applies to ServiceWorkers in general and is not specific to Angular's implementation.
The link provided by @akoserwal above has more details on mixed content.

As fas as I understand, the fact that fetching from within the ServiceWorker behaves differently than fetching without a ServiceWorker is a limitation of ServiceWorkers (see relevant discussions here, here, and here).

One option for @angular/service-worker would be to choose not to handle this type of requests, but given that mixed content is insecure for users anyway, I would not be too keen on supporting it in @angular/service-worker 😈

While fixing #20404 we can make sure that it is possible to specify URL patterns that won't be handled by the ServiceWorker, which would provide a work-around for your usecase (i.e. you could config the SW to ignore http: URLs and let the browser handle them).

WDYT, @alxhub?

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Mar 27, 2018

It turns out that the fix for #20404 cancannot provide a work-around for this issue.

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Mar 28, 2018

So, the only fix/work-around I can think of is ignoring http: requests if the SW's scope is on https:. This can be checked synchronously and will avoid handling mixed content in the SW, which is currently not possible anyway.

@akilmakda

This comment has been minimized.

Copy link
Author

akilmakda commented Apr 2, 2018

@gkalpak 'ignoredUrlPatterns' not work for HTTP response. can you give any e.g how to ignore HTTP response.

or any other way to ignore HTTP API response.

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Apr 2, 2018

@akilmakda, I fixed my previous comment. I meant that #20404 cannot fix your usecase.
As mentioned in #23012 (comment), one fix/work-around I can think of would be to not handle mixed content from the service worker (but that is a change that needs to be made to the SW; it is not something you can do yourself).

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Apr 4, 2018

For future reference:
Discussed this with @alxhub and decided to implement #23012 (comment) (not handle mixed content from the SW). I'll submit a PR in the next days, unless someone beats me to it 😉

@gkalpak gkalpak modified the milestones: needsTriage, Backlog May 11, 2018

@ngbot ngbot bot modified the milestones: Backlog, needsTriage May 11, 2018

@gkalpak gkalpak modified the milestones: needsTriage, Backlog May 26, 2018

@ngbot ngbot bot modified the milestones: Backlog, needsTriage May 26, 2018

gkalpak added a commit to gkalpak/angular that referenced this issue Sep 18, 2018

fix(service-worker): ignore passive mixed content requests
Although [passive mixed content][1] (like images) only produces a
warning without a ServiceWorker, fetching it via a ServiceWorker results
in an error. See
angular#23012 (comment)
for more details.

This commit makes the ServiceWorker ignore such requests and let them be
handled by the browser directly to avoid breaking apps that would work
without the ServiceWorker.

[1]: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#passive_mixed_content

Fixes angular#23012

gkalpak added a commit to gkalpak/angular that referenced this issue Sep 18, 2018

fix(service-worker): ignore passive mixed content requests
Although [passive mixed content][1] (like images) only produces a
warning without a ServiceWorker, fetching it via a ServiceWorker results
in an error. See
angular#23012 (comment)
for more details.

This commit makes the ServiceWorker ignore such requests and let them be
handled by the browser directly to avoid breaking apps that would work
without the ServiceWorker.

[1]: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#passive_mixed_content

Fixes angular#23012

gkalpak added a commit to gkalpak/angular that referenced this issue Sep 18, 2018

fix(service-worker): ignore passive mixed content requests
Although [passive mixed content][1] requests (like images) only produce
a warning without a ServiceWorker, fetching it via a ServiceWorker
results in an error. See
angular#23012 (comment)
for more details.

This commit makes the ServiceWorker ignore such requests and let them be
handled by the browser directly to avoid breaking apps that would work
without the ServiceWorker.

[1]: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#passive_mixed_content

Fixes angular#23012

gkalpak added a commit to gkalpak/angular that referenced this issue Sep 18, 2018

fix(service-worker): ignore passive mixed content requests
Although [passive mixed content][1] requests (like images) only produce
a warning without a ServiceWorker, fetching it via a ServiceWorker
results in an error. See
angular#23012 (comment)
for more details.

This commit makes the ServiceWorker ignore such requests and let them be
handled by the browser directly to avoid breaking apps that would work
without the ServiceWorker.

[1]: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#passive_mixed_content

Fixes angular#23012

gkalpak added a commit to gkalpak/angular that referenced this issue Sep 18, 2018

fix(service-worker): ignore passive mixed content requests
Although [passive mixed content][1] requests (like images) only produce
a warning without a ServiceWorker, fetching it via a ServiceWorker
results in an error. See
angular#23012 (comment)
for more details.

This commit makes the ServiceWorker ignore such requests and let them be
handled by the browser directly to avoid breaking apps that would work
without the ServiceWorker.

[1]: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#passive_mixed_content

Fixes angular#23012
@akilmakda

This comment has been minimized.

Copy link
Author

akilmakda commented Sep 25, 2018

@gkalpak when this feature roll-out?

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Sep 25, 2018

It has to be reviewed and merged first 😁
(cc @alxhub)

@akilmakda

This comment has been minimized.

Copy link
Author

akilmakda commented Oct 3, 2018

@gkalpak can you give me a timeline when you release this? So I will provide to my boss.

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Oct 5, 2018

No estimate, sorry. There other higher priority stuff to sort out first (for the upcoming 7.0 release).

gkalpak added a commit to gkalpak/angular that referenced this issue Jan 16, 2019

fix(service-worker): ignore passive mixed content requests
Although [passive mixed content][1] requests (like images) only produce
a warning without a ServiceWorker, fetching it via a ServiceWorker
results in an error. See
angular#23012 (comment)
for more details.

This commit makes the ServiceWorker ignore such requests and let them be
handled by the browser directly to avoid breaking apps that would work
without the ServiceWorker.

[1]: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#passive_mixed_content

Fixes angular#23012
@Krishna-Agrawal

This comment has been minimized.

Copy link

Krishna-Agrawal commented Jan 18, 2019

@gkalpak any update on this?

@akilmakda

This comment has been minimized.

Copy link
Author

akilmakda commented Jan 29, 2019

@gkalpak any update?

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Jan 29, 2019

I have a fix in #25994, but it is pending approval...

@eliraneliassy

This comment has been minimized.

Copy link

eliraneliassy commented Feb 27, 2019

@gkalpak +1 here

@shabbir-dhangot

This comment has been minimized.

Copy link

shabbir-dhangot commented Mar 1, 2019

@gkalpak It seems like this issue is faced by many of user but got stuck in approval process. I am also waiting for this fix for almost 6+ months.
Kindly provide some tentative dates.

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak commented Mar 4, 2019

@shabbir-dhangot, hopefully this week 🎉 (based on #25994 (comment))

AndrewKushnir added a commit to gkalpak/angular that referenced this issue Mar 4, 2019

fix(service-worker): ignore passive mixed content requests
Although [passive mixed content][1] requests (like images) only produce
a warning without a ServiceWorker, fetching it via a ServiceWorker
results in an error. See
angular#23012 (comment)
for more details.

This commit makes the ServiceWorker ignore such requests and let them be
handled by the browser directly to avoid breaking apps that would work
without the ServiceWorker.

[1]: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#passive_mixed_content

Fixes angular#23012

AndrewKushnir added a commit that referenced this issue Mar 4, 2019

fix(service-worker): ignore passive mixed content requests (#25994)
Although [passive mixed content][1] requests (like images) only produce
a warning without a ServiceWorker, fetching it via a ServiceWorker
results in an error. See
#23012 (comment)
for more details.

This commit makes the ServiceWorker ignore such requests and let them be
handled by the browser directly to avoid breaking apps that would work
without the ServiceWorker.

[1]: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content#passive_mixed_content

Fixes #23012

PR Close #25994

wtrocki added a commit to aerogear/ionic-showcase that referenced this issue Mar 12, 2019

fix(deps): update angular monorepo to v7.2.8 (#97)
This PR contains the following updates:

| Package | Type | Update | Change | References |
|---|---|---|---|---|
| @​angular/common | dependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/common/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/compiler | devDependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/compiler/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/compiler-cli | devDependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/compiler-cli/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/core | dependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/core/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/forms | dependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/forms/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/http | dependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/http/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/language-service | devDependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/language-service/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/platform-browser | dependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/platform-browser/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/platform-browser-dynamic | dependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/platform-browser-dynamic/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |
| @​angular/router | dependencies | patch | [`7.2.7` -> `7.2.8`](https://diff.intrinsic.com/@angular/router/7.2.7/7.2.8) | [source](https://togithub.com/angular/angular) |

---

### Release Notes

<details>
<summary>angular/angular</summary>

### [`v7.2.8`](https://togithub.com/angular/angular/blob/master/CHANGELOG.md#&#8203;728httpsgithubcomangularangularcompare727728-2019-03-06)

[Compare Source](https://togithub.com/angular/angular/compare/7.2.7...7.2.8)

##### Bug Fixes

-   **animations:** ensure `position` and `display` styles are handled outside of keyframes/web-animations ([#&#8203;28911](https://togithub.com/angular/angular/issues/28911)) ([86981b3](https://togithub.com/angular/angular/commit/86981b3)), closes [#&#8203;24923](https://togithub.com/angular/angular/issues/24923) [#&#8203;25635](https://togithub.com/angular/angular/issues/25635)
-   **router:** removed obsolete TODO comment ([#&#8203;29085](https://togithub.com/angular/angular/issues/29085)) ([2a25ac2](https://togithub.com/angular/angular/commit/2a25ac2))
-   **service-worker:** detect new version even if files are identical to an old one ([#&#8203;26006](https://togithub.com/angular/angular/issues/26006)) ([5669333](https://togithub.com/angular/angular/commit/5669333)), closes [#&#8203;24338](https://togithub.com/angular/angular/issues/24338)
-   **service-worker:** ignore passive mixed content requests ([#&#8203;25994](https://togithub.com/angular/angular/issues/25994)) ([b598e88](https://togithub.com/angular/angular/commit/b598e88)), closes [/github.com/angular/angular/issues/23012#issuecomment-376430187](https://togithub.com//github.com/angular/angular/issues/23012/issues/issuecomment-376430187) [#&#8203;23012](https://togithub.com/angular/angular/issues/23012)

</details>

---

### Renovate configuration

📅 **Schedule**: At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻️ **Rebasing**: Whenever PR becomes conflicted, or if you modify the PR title to begin with "`rebase!`".

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- renovate-rebase -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://togithub.com/marketplace/renovate). View repository job log [here](https://renovatebot.com/dashboard#aerogear/ionic-showcase).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.