Base solution for your next web application
Open Closed

Force HTTPS in Angular app #4334


User avatar
0
joe704la created

I am trying to force users to use https in the angular app in production. I added the below rule in the web.config but it seemed to kind of break things

<rule name="Redirect HTTP to HTTPS" stopProcessing="true">
            <match url="(.*)" />
                <conditions logicalGrouping="MatchAny">
                        <add input="{HTTPS}" pattern="^OFF$" />
                </conditions>
             <action type="Redirect" url="https://{HTTP_HOST}" redirectType="SeeOther" />
        </rule>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>

I added the Redirect HTTP to HTTPS rule.

Any help would be appreciated.


4 Answer(s)
  • User Avatar
    0
    alper created
    Support Team

    hi,

    For core application there's a startup configuration attribute called RequireHttpsAttribute. To see how to use it check out

    <a class="postlink" href="https://docs.microsoft.com/en-us/aspnet/core/security/enforcing-ssl/">https://docs.microsoft.com/en-us/aspnet ... rcing-ssl/</a> <a class="postlink" href="https://long2know.com/2016/07/asp-net-core-enforcing-https/">https://long2know.com/2016/07/asp-net-c ... ing-https/</a>

  • User Avatar
    0
    joe704la created

    This seems to be working great for the API. But the actual angular app doesn't . I can still visit the site in http? and now I just get an Error detail not sent by Server error. I don't seen an error in the log. It seems to be throwing a 304 error on my Angular side when it tries to get the js files or anything really from the angular side.

  • User Avatar
    0
    alper created
    Support Team
    app.use(function(req, res, next) {
      if(!req.secure) {
        return res.redirect('https://your-site-name-here');
      }
      next();
    });
    
  • User Avatar
    0
    joe704la created

    To do that would you have to use Express Middleware? <a class="postlink" href="http://expressjs.com/en/guide/using-middleware.html">http://expressjs.com/en/guide/using-middleware.html</a>

    Where exactly are you suggesting to put that in? The root Module?

    I did add this to the web.config file and it works kind of. So if you go to your root of the site <a class="postlink" href="http://yourdomain.com/">http://yourdomain.com/</a> it will redirect perfectly fine to <a class="postlink" href="https://yourdomain.com">https://yourdomain.com</a>. But if you did something like this <a class="postlink" href="http://yourdomain.com/account/login">http://yourdomain.com/account/login</a> it still errors out unless you delete the /account/login part.

    
        <rewrite>
          <rules>
            <rule name="Angular Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
            </rule>
          <rule name="Redirect to https" stopProcessing="true">
              <match url=".*" />
              <conditions>
                <add input="{HTTPS}" pattern="off" ignoreCase="true" />
              </conditions>
              <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
            </rule>
          </rules>
        </rewrite>