使用条件HTTP和HTTPs路由进行前端开发

I am currently using MEAN stack for web development. My questions is how do I mix/redirect HTTP and HTTPs pages on the same website?

我目前正在使用MEAN堆栈进行Web开发。我的问题是如何在同一网站上混合/重定向HTTP和HTTP页面?

For most scenarios I am communicating with the back-end using HTTP protocol. And for some pages I absolutely need to use HTTP (For example /shop route I used a iframe that displays info from other websites. Also for some pages I need to HTTP GET from other API services providers.). It seems that I cannot achieve these with HTTPs setup.

对于大多数情况,我使用HTTP协议与后端进行通信。对于某些页面,我绝对需要使用HTTP(例如/商店路线,我使用iframe来显示来自其他网站的信息。对于某些页面,我还需要来自其他API服务提供商的HTTP GET。)。似乎我无法通过HTTPs设置实现这些目标。

For some cases I am communicating with the back-end using HTTPs (such as /money route) ...etc. And apparently you need HTTPs with money involved.

在某些情况下,我使用HTTP(例如/ money route)等与后端进行通信。显然你需要涉及金钱的HTTPs。

My back-end has middlewares setup so that if you request /money using HTTP it will return some error (currently returning 301 moved permanently..)

我的后端有中间件设置,所以如果你使用HTTP请求/钱,它将返回一些错误(目前返回301永久移动..)

But I am not sure how do I proceed with front-end development. For Angular part should I just do some configurations so when the route consists of /money I just reload the whole page in HTTPs and should I just explicitly make sure the links look someting like this?

但我不知道如何进行前端开发。对于Angular部分,我应该只做一些配置,所以当路由由/ money组成时我只是在HTTP中重新加载整个页面,我应该明确地确保链接看起来像这样吗?

<a ng-href="https://www.domain.com/#!/money">money page</a>

But that seems like a lot of hard-coding for me.

但这对我来说似乎有很多硬编码。

My question is: 1. Am I thinking in the right direction?
2. Is it doable?

我的问题是:1。我在思考正确的方向吗?它可行吗?

Thanks and any idea is greatly appreciated!

谢谢,任何想法非常感谢!

1 个解决方案

#1

There are a few things to consider here.

这里有几点需要考虑。

First of all, yes, when money is involved you should always use HTTPS. The S here stands for secure, so as you can imagine this means that regular HTTP is not secure. With regular HTTP things are sent in plain text, so anyone who can see the request along the way can see and copy what's in there. For this reason you should always make sure to use HTTPS if you are doing things like sending financials data, sending passwords/login requests, sending private user data, etc.

首先,是的,当涉及金钱时,您应该始终使用HTTPS。这里的S代表安全,因此您可以想象这意味着常规HTTP不安全。使用常规HTTP的东西是以纯文本形式发送的,因此任何能够在此过程中看到请求的人都可以查看和复制其中的内容。因此,如果您正在执行诸如发送财务数据,发送密码/登录请求,发送私人用户数据等操作,则应始终确保使用HTTPS。

You should also remember that you shouldn't load HTTP content on a HTTPS page, this will cause browsers to warn for insecure content or even block the request outright.

您还应该记住,不应该在HTTPS页面上加载HTTP内容,这会导致浏览器警告不安全的内容,甚至直接阻止请求。

Anyway, on to the actuall question. Yes, you are thinking correctly. When going from HTTP to HTTPS you are going to have to do a full reload of the page, but hardcoding https into any such link is not a great solution. Luckily Angular provides us with decorators for directives that allows us to chainge their behavior. You can use this to decorate ngHref so that it adds https on it's own when certain conditions are met.

无论如何,关于实际问题。是的,你正在思考。从HTTP到HTTPS时,您将不得不对页面进行完全重新加载,但将https硬编码到任何此类链接中并不是一个好方法。幸运的是,Angular为我们提供了指令的装饰器,允许我们对其行为进行链接。您可以使用它来装饰ngHref,以便在满足某些条件时自己添加https。

Decorators are not that easy to get started with however, or at least they weren't the last time I read the docs, so here is one that does what you need and that you can edit to cover more cases:

然而装饰器并不是那么容易上手,或者至少它们不是我最后一次阅读文档,所以这里有一个可以满足你需要的东西,你可以编辑以涵盖更多的情况:

myApp.config(function($provide) {
    $provide.decorator('ngHrefDirective', function($delegate) {
      var original = $delegate[0].compile;
      $delegate[0].compile = function(element, attrs, transclude) {
        if(attrs.ngHref.indexOf('money') !== -1) {
            attrs.ngHref = 'https://example.com/'+attrs.ngHref;
        }
        return original(element, attrs, transclude);
      };
      return $delegate;
    })
});

This will take any ng-href directive that contains the word money, and change the input data to include the full path with https. It will turn this:

这将采用任何包含单词money的ng-href指令,并更改输入数据以包含https的完整路径。它会变成这样:

<a ng-href="/money">Link that should be re-written</a>
<a ng-href="/other">Link that should not be re-written</a>

Will become this:

会变成这样:

<a href="https://example.com/money>Money link</a>
<a href="/other">Link that should not be re-written</a>

#1