Inlining fonts behind HTTP proxy #19401

Eddman · 2020-11-16T13:53:05Z

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

No

Description

Since 11.0.0 there is the new feature to inline fonts. The problem is that it does not work behind HTTP proxy. We have correctly set HTTP_PROXY/http_proxy and NO_PROXY/no_proxy environment variables, but it is ignored.

🔬 Minimal Reproduction

There is no support for proxy:

angular-cli/packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts.ts

Line 107 in 871dd6a

https.get(

There is not really a reproduction scenario. It fails only when running behind HTTP proxy.

🔥 Exception or Error


✄1�7 Index html generation failed.
Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/icon?family=Material+Icons over the internet.
connect ETIMEDOUT 172.217.16.202:443

🌍 Your Environment


Angular CLI: 11.0.1
Node: 14.15.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1100.1 (cli-only)
@angular-devkit/core         11.0.1 (cli-only)
@angular-devkit/schematics   11.0.1 (cli-only)
@schematics/angular          11.0.1 (cli-only)
@schematics/update           0.1100.1 (cli-only)

Anything else relevant?

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

michaelfaith · 2020-11-17T02:35:37Z

This is affecting me as well. Our build servers don't have access outside our firewalls. I guess turning it off, is our only option.

alan-agius4 · 2020-11-17T07:15:48Z

On how to disable this, see https://angular.io/guide/workspace-config#optimization-and-source-map-configuration

nico151999 · 2021-01-14T14:22:05Z

Had the same issue behind a corporate proxy. Thought of using an index.html referencing the google fonts in dev config and replacing the index.html with a prod version referencing a local copy of the fonts that would be made in the build procedure of my docker image in my pipeline. However, this would have required additional scripting for the woff2 files referenced in the css files. I ended up using fontsource. This way ng build does not need to reach fonts.googleapis.com.

michaelfaith · 2021-01-14T21:11:06Z

Had the same issue behind a corporate proxy. Thought of using an index.html referencing the google fonts in dev config and replacing the index.html with a prod version referencing a local copy of the fonts that would be made in the build procedure of my docker image in my pipeline. However, this would have required additional scripting for the woff2 files referenced in the css files. I ended up using fontsource. This way ng build does not need to reach fonts.googleapis.com.

Why not just disable font optimization?

austi10 · 2021-01-21T10:00:56Z

If I set ONLY fonts optimization to false

"optimization": {
    "fonts": false
}

are scripts and styles property set to false or are they still true by default ?

I am not able to find any info on this. Could someone help ?

alan-agius4 · 2021-01-21T11:01:21Z

@austi10,

They are true, by default. See https://angular.io/guide/workspace-config#optimization-configuration

michaelfaith · 2021-01-21T11:04:53Z

Yeah, if you think about the code behind that property, the type is likely a simple boolean or some optimization config interface. Defining it as a simple boolean true is the equivalent of setting it with an object that has all properties as true. So if you want to just turn off one, provide an object that has all true, but the one(s) you want turned off as false. Seems pretty straightforward.

With this change users can now their proxy server via the `HTTPS_PROXY` environment variable. The specified proxy will be used when making requests to inline fonts. Closes #19401

With this change users can now their proxy server via the `HTTPS_PROXY` environment variable. The specified proxy will be used when making requests to inline fonts. Closes #19401 (cherry picked from commit 9af0942)

alexaka1 · 2021-01-29T09:31:42Z

This is the new error I get with the patch. I have tried with hardcoding my proxy credentials into %HTTP_PROXY% and %HTTPS_PROXY% too, but still no luck.

× Index html generation failed.
Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap over the internet.
Socket is closed

🌍 Your Environment

Angular CLI: 11.1.2
Node: 14.15.1
OS: win32 x64

Angular: 11.1.1
...
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.2
@angular-devkit/build-angular   0.1101.2
@angular-devkit/core            11.1.2
@angular-devkit/schematics      11.1.2
@angular/cli                    11.1.2
@angular/flex-layout            11.0.0-beta.33
@schematics/angular             11.1.2
@schematics/update              0.1101.2
rxjs                            6.6.3
typescript                      4.0.5

alan-agius4 · 2021-01-29T11:09:21Z

@alexaka1, are you using a rotating proxy?, If so, can you try using Node.js 12?
Note: only the HTTPS_PROXY environment variable is supported.

alexaka1 · 2021-02-02T07:02:30Z

Edit: Although something has changed here, because now even node 14 doesn't give the error, but this, regardless of what I have in the HTTPS_PROXY variable. Edit 2: My bad, I didn't also reinstall the local node_modules when switching between node versions. Now 14 gives the old error and 12 gives the html below.

Original comment: @alan-agius4 No we don't have rotating proxy, but still I have installed nvm4w, and got Node 12.20.1 installed, and building with that no cmd error is given, however, the final index.html doesn't have the font css, instead it has this inside <style type="text/css"> tag. (I have formatted it for readability.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <!-- FileName:index.html     Language:[en]--><!--Head--><head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>McAfee Web Gateway - Notification</title>
    <script
      src="/mwg-internal/de5fs23hu73ds/files/javascript/sw.js"
      type="text/javascript"
    ></script>
    <link
      rel="stylesheet"
      href="/mwg-internal/de5fs23hu73ds/files/default/stylesheet.css"
    /></head
  ><!--/Head--><!--Body-->
  <body onload="swOnLoad();">
    <table class="bodyTable">
      <tr>
        <td
          class="bodyData"
          background="/mwg-internal/de5fs23hu73ds/files/default/img/bg_body.gif"
        >
          <!--Logo-->
          <table class="logoTable">
            <tr>
              <td class="logoData">
                <a href="http://www.mcafee.com">
                  <img
                    src="/mwg-internal/de5fs23hu73ds/files/default/img/logo_mwg.png"
                /></a>
              </td>
            </tr>
          </table>
          <!--/Logo--><!--Contents--><!-- FileName:authenticationrequired.html     Language:[en]--><!--Title-->
          <table
            class="titleTable"
            background="/mwg-internal/de5fs23hu73ds/files/default/img/bg_navbar.jpg"
          >
            <tr>
              <td class="titleData">Authentication Required</td>
            </tr>
          </table>
          <!--/Title--><!--Content-->
          <table class="contentTable">
            <tr>
              <td class="contentData">
                You must be authenticated to access this URL.
              </td>
            </tr>
          </table>
          <script language="javascript" type="text/javascript">
            urlprotocol = "https";
            statuscode = 407;
            if (statuscode == 401 && urlprotocol == "ftp") {
              document.write('<form name="ftpform" method="get" action="">');
              document.write('<table class="contentData">');
              document.write(
                '<tr><td class="contentData" colspan=2>Please enter your credentials in the form below and click "Access FTP" button if your browser doesn\'t present authentication promt for FTP sites.</td></tr>'
              );
              document.write(
                '<tr><td class="contentData">Username:</td><td><input type="text" id="ftpUsername" name="ftpUsername" size=40 /></td></tr>'
              );
              document.write(
                '<tr><td class="contentData">Password:</td><td><input type="password" id="ftpPassword" name="ftpPassword" size=40 /></td></tr>'
              );
              document.write(
                '<tr><td class="contentData" colspan=2 align=center><input type="button" onclick="redirectToFTP();" value="Access FTP" /></td></tr>'
              );
              document.write("</table>");
              document.write("</form>");
            }
            function redirectToFTP() {
              var username = escape(
                document.getElementById("ftpUsername").value
              );
              var password = escape(
                document.getElementById("ftpPassword").value
              );
              location.href =
                "ftp://" +
                username +
                ":" +
                password +
                "@fonts.googleapis.com:443";
            }
          </script>
          <!--/Content--><!--Info-->
          <table class="infoTable">
            <tr>
              <td class="infoData">
                <b>URL:</b>
                <script type="text/javascript">
                  break_line("https://fonts.googleapis.com");
                </script>
                <br />
              </td>
            </tr>
          </table>
          <!--/Info--><!--/Contents--><!--Policy-->
          <table class="policyTable">
            <tr>
              <td class="policyHeading">
                <hr />
                Company Acceptable Use Policy
              </td>
            </tr>
            <tr>
              <td class="policyData"></td>
            </tr>
          </table>
          <!--/Policy--><!--Foot-->
          <table class="footTable">
            <tr>
              <td
                class="helpDeskData"
                background="/mwg-internal/de5fs23hu73ds/files/default/img/bg_navbar.jpg"
              >
                For assistance, please contact your system administrator.
              </td>
            </tr>
            <tr>
              <td class="footData">
                generated <span id="time">2021-02-01 15:52:39</span> by
                webgateway1 <br />
                <br />
                #Authentication with Kerberos and NTLM Fallback / Perform
                Authentication
              </td>
            </tr>
          </table>
          <!--/Foot-->
        </td>
      </tr>
    </table>
  </body>
  <!--/Body-->
</html>

alan-agius4 · 2021-02-02T08:45:25Z

@alexaka1, it appears that the authentication is failing, are you providing the credentials as part of the proxy uri specified in HTTPS_PROXY?

From the HTML page above, it appears that the proxy returned a 407, which indicates that proxy authentication is required.

I have a fix, so that such errors thrown in the terminal.

alexaka1 · 2021-02-02T08:54:26Z

@alan-agius4 Yes I have tried providing credentials in HTTPS_PROXY variable, with the http://username:pwd@proxydns:port format. I have also tried using the IP address instead of the dns name, but that shouldn't make a difference, I don't think at least.
However we're in a domain (AD), and my password contains special characters. I have read elsewhere that if I were to provide this to say npm, I would need to url-encode it. Do I have to do that here? Also do I include the domain too? Like http://domain\username:pwd@proxydns:port, or do I escape the backslash with another so http://domain\\username:pwd@proxydns:port, or do I use the url-encoded %5C? Also our proxy is only http, not https, not sure, if this matters.

alan-agius4 · 2021-02-02T09:25:47Z

HTTPS over HTTP proxy shouldn't be a problem at all. That is a common case. If you are using AD, you do need to provide the domain name of the authentication server, in the following format.

https_proxy=http://DOMAIN\\USERNAME:PASSWORD@SERVER:PORT

If you do have special characters in your password, indeed most likely you do need to use encoding, both HEX or URL encode should do the trick.

alexaka1 · 2021-02-02T10:02:24Z

@alan-agius4 I have tried the above, and I get strange behaviour. When I add a domain, even npm breaks, and it can't reach the registry. ng build gives this error:

× Index html generation failed.
Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap over the internet.
getaddrinfo ENOTFOUND mydomain

mydomain is the domain I give, and it's always in lowercase here, regardless of the env variable casing. I thought maybe the domain is case sensitive, but doesn't seem to make a difference.

If I don't add a domain, but change my password to a wrong one, then npm works fine.

Edit: I have figured out the proxy gateways use their own domain, if I use that I get: connect ECONNREFUSED proxyIP:80.

alan-agius4 · 2021-02-02T10:37:24Z

ENOTFOUND error typically indicates that the mydomain cannot be found in the host.
ECONNREFUSED indicates that the connection was refused by the server. Typically reasons for this error are; wrong IP address or port number or a firewall is blocking the connection.

alexaka1 · 2021-02-03T10:33:33Z

@alan-agius4 I ended up using @fontsource too to host the fonts locally.
Thx for the help btw!

angular-automatic-lock-bot · 2021-03-06T08:11:36Z

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.}

alan-agius4 added area: devkit/build-angular devkit/build-angular: browser feature Issue that requests a new feature labels Nov 16, 2020

ngbot bot added this to the Backlog milestone Nov 16, 2020

alan-agius4 mentioned this issue Jan 22, 2021

fix(@angular-devkit/build-angular): inlining fonts behind proxy #19848

Merged

filipesilva closed this as completed in #19848 Jan 25, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 6, 2021

May	JUN	Jul
	25
2022	2023	2024

Inlining fonts behind HTTP proxy #19401

Inlining fonts behind HTTP proxy #19401

Eddman commented Nov 16, 2020

michaelfaith commented Nov 17, 2020 •

edited

alan-agius4 commented Nov 17, 2020 •

edited

nico151999 commented Jan 14, 2021

michaelfaith commented Jan 14, 2021

austi10 commented Jan 21, 2021

alan-agius4 commented Jan 21, 2021

michaelfaith commented Jan 21, 2021 •

edited

alexaka1 commented Jan 29, 2021 •

edited

alan-agius4 commented Jan 29, 2021 •

edited

alexaka1 commented Feb 2, 2021 •

edited

alan-agius4 commented Feb 2, 2021

alexaka1 commented Feb 2, 2021

alan-agius4 commented Feb 2, 2021

alexaka1 commented Feb 2, 2021 •

edited

alan-agius4 commented Feb 2, 2021

alexaka1 commented Feb 3, 2021

angular-automatic-lock-bot bot commented Mar 6, 2021

Inlining fonts behind HTTP proxy #19401

Inlining fonts behind HTTP proxy #19401

Comments

Eddman commented Nov 16, 2020

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

michaelfaith commented Nov 17, 2020 • edited

alan-agius4 commented Nov 17, 2020 • edited

nico151999 commented Jan 14, 2021

michaelfaith commented Jan 14, 2021

austi10 commented Jan 21, 2021

alan-agius4 commented Jan 21, 2021

michaelfaith commented Jan 21, 2021 • edited

alexaka1 commented Jan 29, 2021 • edited

alan-agius4 commented Jan 29, 2021 • edited

alexaka1 commented Feb 2, 2021 • edited

alan-agius4 commented Feb 2, 2021

alexaka1 commented Feb 2, 2021

alan-agius4 commented Feb 2, 2021

alexaka1 commented Feb 2, 2021 • edited

alan-agius4 commented Feb 2, 2021

alexaka1 commented Feb 3, 2021

angular-automatic-lock-bot bot commented Mar 6, 2021

Command (mark with an `x`)

michaelfaith commented Nov 17, 2020 •

edited

alan-agius4 commented Nov 17, 2020 •

edited

michaelfaith commented Jan 21, 2021 •

edited

alexaka1 commented Jan 29, 2021 •

edited

alan-agius4 commented Jan 29, 2021 •

edited

alexaka1 commented Feb 2, 2021 •

edited

alexaka1 commented Feb 2, 2021 •

edited