Failed to load HTTP resource in live URL #23012

akilmakda · 2018-03-27T06:32:11Z

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

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

The text was updated successfully, but these errors were encountered:

jainanuj0812 · 2018-03-27T07:21:43Z

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 · 2018-03-27T07:31:35Z

@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/

akoserwal · 2018-03-27T07:38:54Z

@akilmakda: please have a look at

jainanuj0812 · 2018-03-27T07:42:51Z

@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 · 2018-03-27T07:50:32Z

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 · 2018-03-27T20:55:04Z

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

gkalpak · 2018-03-28T15:51:28Z

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 · 2018-04-02T04:32:04Z

@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 · 2018-04-02T07:35:44Z

@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 · 2018-04-04T17:43:56Z

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 😉

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

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 · 2018-09-25T13:13:41Z

@gkalpak when this feature roll-out?

gkalpak · 2018-09-25T13:39:39Z

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

akilmakda · 2018-10-03T05:42:10Z

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

gkalpak · 2018-10-05T07:48:31Z

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

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 · 2019-01-18T09:30:11Z

@gkalpak any update on this?

akilmakda · 2019-01-29T15:13:20Z

@gkalpak any update?

gkalpak · 2019-01-29T16:11:29Z

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

eliraneliassy · 2019-02-27T14:38:49Z

@gkalpak +1 here

shabbir-dhangot · 2019-03-01T09:56:57Z

@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 · 2019-03-04T11:29:36Z

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

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

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

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#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 ([#28911](https://togithub.com/angular/angular/issues/28911)) ([86981b3](https://togithub.com/angular/angular/commit/86981b3)), closes [#24923](https://togithub.com/angular/angular/issues/24923) [#25635](https://togithub.com/angular/angular/issues/25635) - **router:** removed obsolete TODO comment ([#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 ([#26006](https://togithub.com/angular/angular/issues/26006)) ([5669333](https://togithub.com/angular/angular/commit/5669333)), closes [#24338](https://togithub.com/angular/angular/issues/24338) - **service-worker:** ignore passive mixed content requests ([#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) [#23012](https://togithub.com/angular/angular/issues/23012) </details> --- ### Renovate configuration :date: **Schedule**: At any time (no schedule defined). :vertical_traffic_light: **Automerge**: Disabled by config. Please merge this manually once you are satisfied. :recycle: **Rebasing**: Whenever PR becomes conflicted, or if you modify the PR title to begin with "`rebase!`". :no_bell: **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] 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).

shabbir-dhangot · 2019-09-05T09:18:52Z

@gkalpak can you share document link how we can start using this?

gkalpak · 2019-09-05T09:38:57Z

Not sure what you mean @shabbir-dhangot. You don't have to do anything. This was a change in @angular/service-worker internals (it now ignores mixed content requests), you don't have to change anything in your app.

angular-automatic-lock-bot · 2019-10-06T16:05:17Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

ngbot bot added this to the needsTriage milestone Mar 27, 2018

akilmakda mentioned this issue Mar 27, 2018

Failed to load resource: the server responded with a status of 504 (Gateway Timeout) #22362

Closed

gkalpak added the area: service-worker Issues related to the @angular/service-worker package label Mar 27, 2018

gkalpak mentioned this issue Mar 27, 2018

feat(service-worker): add support for ignoring specific URLs #23025

Closed

3 tasks

gkalpak added type: bug/fix effort1: hours freq1: low target: patch This PR is targeted for the next patch release and removed target: patch This PR is targeted for the next patch release labels Apr 4, 2018

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

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

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

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

gkalpak mentioned this issue Sep 18, 2018

fix(service-worker): ignore passive mixed content requests #25994

Closed

3 tasks

AndrewKushnir closed this as completed in 48214e2 Mar 4, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to load HTTP resource in live URL #23012

Failed to load HTTP resource in live URL #23012

akilmakda commented Mar 27, 2018 •

edited

jainanuj0812 commented Mar 27, 2018

akilmakda commented Mar 27, 2018 •

edited

akoserwal commented Mar 27, 2018

jainanuj0812 commented Mar 27, 2018

gkalpak commented Mar 27, 2018 •

edited

gkalpak commented Mar 27, 2018 •

edited

gkalpak commented Mar 28, 2018

akilmakda commented Apr 2, 2018

gkalpak commented Apr 2, 2018

gkalpak commented Apr 4, 2018 •

edited

akilmakda commented Sep 25, 2018

gkalpak commented Sep 25, 2018

akilmakda commented Oct 3, 2018

gkalpak commented Oct 5, 2018

Krishna-Agrawal commented Jan 18, 2019

akilmakda commented Jan 29, 2019

gkalpak commented Jan 29, 2019

eliraneliassy commented Feb 27, 2019

shabbir-dhangot commented Mar 1, 2019

gkalpak commented Mar 4, 2019

shabbir-dhangot commented Sep 5, 2019

gkalpak commented Sep 5, 2019

angular-automatic-lock-bot bot commented Oct 6, 2019

Navigation Menu

Failed to load HTTP resource in live URL #23012

Failed to load HTTP resource in live URL #23012

Comments

akilmakda commented Mar 27, 2018 • edited

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

jainanuj0812 commented Mar 27, 2018

akilmakda commented Mar 27, 2018 • edited

akoserwal commented Mar 27, 2018

jainanuj0812 commented Mar 27, 2018

gkalpak commented Mar 27, 2018 • edited

gkalpak commented Mar 27, 2018 • edited

gkalpak commented Mar 28, 2018

akilmakda commented Apr 2, 2018

gkalpak commented Apr 2, 2018

gkalpak commented Apr 4, 2018 • edited

akilmakda commented Sep 25, 2018

gkalpak commented Sep 25, 2018

akilmakda commented Oct 3, 2018

gkalpak commented Oct 5, 2018

Krishna-Agrawal commented Jan 18, 2019

akilmakda commented Jan 29, 2019

gkalpak commented Jan 29, 2019

eliraneliassy commented Feb 27, 2019

shabbir-dhangot commented Mar 1, 2019

gkalpak commented Mar 4, 2019

shabbir-dhangot commented Sep 5, 2019

gkalpak commented Sep 5, 2019

angular-automatic-lock-bot bot commented Oct 6, 2019

akilmakda commented Mar 27, 2018 •

edited

akilmakda commented Mar 27, 2018 •

edited

gkalpak commented Mar 27, 2018 •

edited

gkalpak commented Mar 27, 2018 •

edited

gkalpak commented Apr 4, 2018 •

edited