es6 ... 添加属性

by Ayo Isaiah

通过Ayo Isaiah

如何在10分钟内免费将HTTPS添加到您的网站，以及为什么现在比以往更需要这样做 (How to add HTTPS to your website for free in 10 minutes, and why you need to do this now more than ever)

Last week, Google announced that Chrome 68, arriving in July, will mark all HTTP pages as “Not secure”.

上周，谷歌宣布将于7月份上市的Chrome 68将所有HTTP页面标记为“不安全” 。

This is the strongest nudge yet to drive the web towards encryption by default and has been a long time coming.

默认情况下，这是推动网络向加密迈进的最强劲的动力，而且已经有很长的时间了。

Although there is a ton of evidence that speaks to why everyone should hop on the HTTPS bandwagon, a lot of people still don’t see the value in serving their sites securely.

尽管有大量证据表明为什么每个人都应该跳上HTTPS潮流，但是很多人仍然看不到安全地为其站点提供服务的价值。

“Why do I need this for a blog?”

“ 为什么我的博客需要这个 ？”

I’ve written about the value of HTTPS previously, but just to reiterate:

之前，我已经写过关于HTTPS的价值的信息 ，但只是重申一下：

• HTTPS protects users against Man In the Middle attacks.

  HTTPS保护用户免受中间人攻击 。

• HTTPS is required to leverage many new features in browsers such as Service Workers

  需要HTTPS才能利用浏览器(例如Service Workers)中的许多新功能

• HTTPS impacts SEO

  HTTPS影响SEO

If you’re not convinced, read doesmysiteneedhttps.com to get the full picture of why every website should be served securely.

如果您不确定，请阅读dosmysiteneedhttps.com以全面了解为何应安全地服务每个网站。

And if you still don’t get it, then life is about to get a lot harder for you.

而且，如果您仍然不了解它，那么生活将会变得更加艰难。

In an effort to drive users away from insecure sites, browsers have been shaming websites served insecurely in certain contexts.

为了使用户远离不安全的站点，浏览器一直在羞辱在某些情况下不安全提供服务的网站。

Chrome 56 started that trend by marking pages with sensitive login fields as “Not secure” while Chrome 62 extended this warning to all HTTP pages that contained any type of input field. In addition, the warning is displayed on all HTTP pages in incognito mode regardless of whether they contained an input field or not.

Chrome 56通过将带有敏感登录字段的页面标记为“不安全”来开始了这种趋势，而Chrome 62将此警告扩展到了包含任何类型输入字段的所有HTTP页面。 此外，警告将以隐身模式显示在所有HTTP页面上，无论它们是否包含输入字段。

Firefox also warns users when they attempt to fill an insecure login form.

当用户尝试填写不安全的登录表单时，Firefox也会警告用户。

Now Chrome has decided to place this warning on all HTTP pages going forward. Eventually, the icon beside the “Not secure” label will change and the text will be made red to further emphasize that HTTP pages cannot be trusted.

现在，Chrome已决定在以后的所有HTTP页面上发出此警告。 最终，“不安全”标签旁边的图标将更改，并且文本将变为红色，以进一步强调不能信任HTTP页面。

To prevent users from seeing this warning on your website, all you need to get a valid SSL certificate. The good news is, doing so is not as hard or expensive as it used to be. In fact I’m going to show you how to deploy HTTPS on your site for free using Cloudflare. And it won’t take much time at all.

为了防止用户在您的网站上看到此警告，您需要获取有效的SSL证书。 好消息是，这样做并不像以前那样困难或昂贵。 实际上，我将向您展示如何使用Cloudflare在您的站点上免费部署HTTPS。 而且完全不需要时间。

为什么选择Cloudflare？ (Why Cloudflare?)

CloudFlare can help you secure an SSL certificate for free regardless of what server side infrastructure you have. It also works for sites that are hosted on platforms that do not provide server access such as GitHub Pages, Ghost and the likes.

无论您拥有哪种服务器端基础架构，CloudFlare均可帮助您免费保护SSL证书。 它也适用于托管在不提供服务器访问权限的平台上的网站，例如GitHub Pages ， Ghost等。

You don’t need to install anything or write any code. This makes it a really great option to deploy HTTPS on your website and setup time should literally take no more than 10 minutes.

您不需要安装任何东西或编写任何代码。 这使它成为在您的网站上部署HTTPS的绝佳选择，设置时间实际上不超过10分钟。

It also provides a myriad of other benefits in security and performance of your website which I’m not going to cover here. But I will talk a little bit about how it all works so you can get a good idea of how it’s able to do all those stuff.

它还为您的网站的安全性和性能提供了许多其他好处，在此不做介绍。 但是，我将稍微介绍一下它们的工作原理，以便您可以很好地了解它如何完成所有这些工作。

Cloudflare如何运作 (How Cloudflare works)

Cloudflare sits right in the middle of traffic between visitors to your website and your server. Visitors could be regular humans, crawlers and bots (such as search engine bots) or hackers. By acting as an intermediary between your web server and visitors to your site, Cloudflare helps to filter out all illegitimate traffic so that only the good stuff goes through.

Cloudflare位于网站访问者和服务器访问者之间的流量中间。 访客可能是普通人，爬虫和漫游器(例如搜索引擎漫游器)或黑客。 通过充当Web服务器和网站访问者之间的中介，Cloudflare有助于过滤掉所有非法流量，从而仅使好东西通过。

Now you might be wondering if all that could have an adverse effect on the speed of your website, but it’s quite the opposite. Cloudflare has data centers all around the globe, so it will just use the nearest endpoint to your visitor which should make your site a lot faster than it was before.

现在，您可能想知道这是否会对网站的速度产生不利影响，但事实恰恰相反。 Cloudflare的数据中心遍布全球，因此它只会使用与访问者最近的端点，这将使您的站点比以前更快。

Now that we know how Cloudflare works, let’s take a look at how to setup a website on their infrastructure and how to get on HTTPS for free. The focus here will be on the features that Cloudflare provides for free, but do note that paid plans are also available with a bunch of extra features.

现在我们知道Cloudflare的工作原理，让我们看一下如何在其基础架构上设置网站以及如何免费使用HTTPS。 这里的重点将放在Cloudflare免费提供的功能上，但请注意，付费计划还提供了许多额外功能。

设置一个新站点 (Setting up a new site)

After you sign up at Cloudflare, the first thing to do is to add a domain and scan the DNS records.

在Cloudflare 注册后 ，要做的第一件事是添加域并扫描DNS记录。

Once the scan is completed, all the DNS records on the domain will be displayed. You can choose the sub-domains you want to enable Cloudflare on and make any desired modifications. Once you’re ready, click Continue to go to the next step.

扫描完成后，将显示该域上的所有DNS记录。 您可以选择要启用Cloudflare的子域并进行任何所需的修改。 准备就绪后，请单击“ 继续”转到下一步。

Select the free plan and click Continue.

选择免费计划，然后单击继续。

Next, you’ll need to change the nameservers on your domain registrar to the Cloudflare provided ones. The process for doing this on each domain registrar is slightly different, so do check with your domain registrar.

接下来，您需要将域注册器上的名称服务器更改为Cloudflare提供的名称服务器。 在每个域名注册商处执行此操作的过程略有不同，因此请与您的域名注册商进行核对。

Here’s how it looks like in Namecheap:

这就是Namecheap的样子 ：

Now you must wait for the nameserver changes to finish propagating. Click on Recheck Nameservers after a while to see if your site is now active on Cloudflare. This is the longest part of the setup and could take up to 24 hours, but in my experience it took less than 5 minutes.

现在，您必须等待名称服务器更改完成传播。 一段时间后单击“ 重新检查名称服务器” ，以查看您的站点现在是否在Cloudflare上处于活动状态。 这是设置过程中最长的部分，最多可能需要24个小时，但是以我的经验，它只花了不到5分钟的时间。

Once your nameserver updates have been validated by Cloudflare, your site becomes active on the service.

一旦您的名称服务器更新已通过Cloudflare验证，您的站点就会在该服务上处于活动状态。

If you want to be absolutely sure that your DNS settings have propagated everywhere, What’s My DNS provides a way to check what IP address your domain resolves to in different locations.

如果您要绝对确定DNS设置已传播到各处，则“我的DNS是什么”提供了一种方法来检查您的域在不同位置解析为哪个IP地址。

You can also use dig or nslookup in the command line to verify your domains DNS configuration.

您还可以在命令行中使用dig或nslookup来验证域的DNS配置。

This way, you can be sure that all traffic going to your domain is now being routed through Cloudflare.

这样，您可以确保所有流到您域的流量现在都通过Cloudflare进行了路由。

Before you start configuring Cloudflare, make sure your browser is not using the old DNS records from its cache. In Chrome and Firefox, you can do this by clearing your browser history.

在开始配置Cloudflare之前，请确保您的浏览器未使用其缓存中的旧DNS记录。 在Chrome和Firefox中，您可以通过清除浏览器历史记录来做到这一点。

免费获取SSL (Getting SSL for free)

SSL is still a premium service and many Certificate Authorities charge significant amounts before issuing an SSL certificate. It’s not something you can just get for free everywhere, but that’s changing rapidly in the industry.

SSL仍然是一项高级服务，许多证书颁发机构在颁发SSL证书之前会收取大量费用。 您不仅可以在任何地方免费获得免费服务，而且行业中的情况正在Swift改变。

Now that you’ve got Cloudflare sitting in the middle of your web traffic, you should get SSL on your domain automatically. It can take up to 24 hours for the certificate to become active, but in my experience, it doesn’t take long at all.

现在，您已经将Cloudflare置于网络流量的中间，您应该自动在域上获取SSL。 证书最多可能需要24小时才能生效，但是根据我的经验，它并不需要很长时间。

Once the certificate becomes active, load up your site in a browser. You should see the site served over HTTPS and a nice green padlock in the address bar.

证书激活后，在浏览器中加载您的网站。 您应该看到该站点通过HTTPS服务，并在地址栏中显示了一个绿色的挂锁。

If you view more information about the cert you will see the Certificate Authority that issued it (Comodo in my case) and the expire date. One of the great things about Cloudflare is that certificate renewal is done automatically for you so no worries there.

如果您查看有关证书的更多信息，则将看到签发证书的证书颁发机构(在我的情况下为Comodo)和到期日期。 Cloudflare的一大优点是证书续订会自动为您完成，因此您不必担心。

灵活，完全和完全(严格)SSL之间的区别 (Difference between Flexible, Full and Full (Strict) SSL)

Cloudflare makes it really easy to get SSL on your site for free without configuring anything, but it’s not always the same as serving your site over SSL directly from the origin.

通过Cloudflare，可以很容易地免费在站点上免费获取SSL，而无需进行任何配置，但这并不总是等同于直接从源头通过SSL为站点提供服务。

There are three implementations of Cloudflare’s SSL. The first one, which you get by default, is Flexible SSL. In this case, traffic is encrypted between the users of your site and Cloudflare but this encryption does not go all the way to the origin server. Cloudflare still speaks to your server over plain HTTP.

Cloudflare的SSL有三种实现。 默认情况下，第一个是Flexible SSL。 在这种情况下，站点用户和Cloudflare之间的通信将被加密，但是这种加密不会一直传递到原始服务器。 Cloudflare仍通过纯HTTP与服务器对话。

This means that any Man In The Middle (such as network providers) between Cloudflare and your server can see the traffic. If you collect sensitive information on your website, refrain from using this option.

这意味着Cloudflare与您的服务器之间的任何中间人(例如网络提供商)都可以看到流量。 如果您在网站上收集敏感信息，请不要使用此选项。

In order to have encryption all the way to the origin server, you need to use the Full or Full (Strict) implementation. The former requires you to install a valid certificate on your server, but the authenticity of the certificate will not be verified so you can get by with a self-signed certificate. On the other hand, the Full (Strict) implementation requires you to install a valid SSL certificate that has been signed by a trusted Certificate Authority.

为了一直对原始服务器进行加密，您需要使用完全或完全(严格)实现。 前者要求您在服务器上安装有效的证书，但是不会验证证书的真实性，因此可以使用自签名证书。 另一方面，完全(严格)实施要求您安装由受信任的证书颁发机构签名的有效SSL证书。

If you do not want to purchase SSL from the likes of Comodo, you can get free Origin CA certificates from Cloudflare that can be used with either the Full or Full(Strict) options as they are trusted by Cloudflare. But keep in mind that these certs are only trusted by Cloudflare so they will stop working if you decide to take your website off Cloudflare’s infrastructure.

如果您不想从Comodo之类购买SSL，则可以从Cloudflare获得免费的Origin CA证书，该证书可与Fullfla或Full(Strict)选项一起使用，因为Cloudflare信任它们。 但是请记住，这些证书仅受Cloudflare信任，因此如果您决定将网站从Cloudflare的基础架构中删除，它们将停止工作。

If you do not control your server environment, say if your site is hosted on GitHub Pages or similar platforms, you will not be able to use the Full or Full (Strict) implementations which means even though your users see HTTPS in the address bar, traffic will not go all the way to the origin server encrypted.

如果您无法控制服务器环境，例如说您的网站托管在GitHub Pages或类似平台上，则您将无法使用完全或完全(严格)实现，这意味着即使您的用户在地址栏中看到HTTPS，流量不会一直流到加密的原始服务器。

But that’s still a vast improvement compared to no HTTPS at all because it’s going to protect your users from being Man In The Middled on the client side.

但是，与根本没有HTTPS相比，这仍然是一个巨大的改进，因为它将保护您的用户免受客户端方面的干扰。

加强SSL实施 (Strengthen SSL implementation)

No matter what SSL implementation you opt for, there are ways to strengthen it to make sure that users can never access your site over insecure HTTP. Qualys SSL Labs is a tool that helps you run a test on your SSL configuration to see if there’s any room for improvement.

无论您选择哪种SSL实施，都有一些方法可以对其进行增强，以确保用户永远不会通过不安全的HTTP访问您的站点。 Qualys SSL Labs是一个工具，可帮助您对SSL配置进行测试，以查看是否还有改进的余地。

Even though I get an A grade on my domain, if you drill into the results you will see that there’s definitely room for improvement in the Key Exchange and Cipher Strength side of things.

即使我在我的领域中获得A成绩，但如果深入研究结果，您也会发现在“密钥交换”和“密码强度”方面肯定还有改进的空间。

Let’s take a look at a few things that we can do within Cloudflare to strengthen our SSL and get the ratings even higher.

让我们看一下我们在Cloudflare中可以做的一些事情，以增强我们的SSL并获得更高的评级。

随处强制HTTPS (Force HTTPS Everywhere)

Once you’ve gone HTTPS, you definitely want to prevent users from accessing your site over an insecure connection. You can do this in Cloudflare by 301 redirecting all HTTP traffic to HTTPS.

使用HTTPS后，您绝对希望阻止用户通过不安全的连接访问您的站点。 您可以通过301将所有HTTP流量重定向到HTTPS在Cloudflare中执行此操作。

Under Crypto settings, find the Always use HTTPS option and turn it On.

在“加密设置”下，找到“ 始终使用HTTPS”选项并将其打开。

启用HTTP严格传输安全性(HSTS) (Enable HTTP Strict Transport Security (HSTS))

I’ve written about how HSTS strengthens your sites SSL in the past but let’s just go over it again briefly.

过去，我曾写过关于HSTS如何增强网站SSL的文章 ，但让我们再次简要介绍一下。

The problem with just 301 redirecting HTTP traffic to HTTPS is that the initial insecure request still goes over the wire which means it could be read by anyone with access to the traffic.

仅使用301将HTTP流量重定向到HTTPS的问题在于，初始的不安全请求仍然通过网络传输，这意味着可以访问该流量的任何人都可以读取该请求。

HSTS is a response header that fixes that problem by telling the browser that it may not make an insecure request to a website for a specified duration of time.

HSTS是响应标头，它通过告诉浏览器在指定的持续时间内可能不会向网站提出不安全的请求来解决该问题。

This is how the header looks like:

标题如下所示：

strict-transport-security: max-age=31536000

Once the browser receives this header, it will not make an insecure request to your site for the next 31,536,000 seconds (1 year’s worth). Instead, all HTTP requests will be upgraded internally to HTTPS before being sent out over the network.

浏览器收到此标头后，在接下来的31,536,000秒(价值1年)内，不会向您的网站提出不安全的请求。 取而代之的是，所有HTTP请求都将在内部升级到HTTPS，然后再通过网络发送出去。

If you want to prevent all subdomains from being accessed over HTTP, you’ll need the includeSubdomains directive. You can also add the preload directive to allow browser vendors bake your site into the browser itself as being HTTPS only.

如果要阻止所有子域通过HTTP访问，则需要includeSubdomains指令。 您还可以添加preload指令，以允许浏览器供应商将您的网站仅作为HTTPS烘焙到浏览器中。

strict-transport-security: max-age=31536000; includeSubdomains; preload

Once you’ve enabled HSTS on your domain, you can be pretty sure that once someone has loaded your website over HTTPS, they will only be able to make access your it over the secure scheme henceforth.

一旦您在域上启用了HSTS，就可以肯定地说，一旦有人通过HTTPS加载了您的网站，他们将只能通过此安全方案访问您的网站。

So before you enable HSTS on your site, make sure you’re confident that all of your traffic will be served over HTTPS otherwise you will run into problems.

因此，在您的站点上启用HSTS之前，请确保您有信心所有流量都将通过HTTPS进行服务，否则会遇到问题。

To enable this in Cloudflare, go to the Crypto settings and scroll down to the HTTP Strict Transport Security (HSTS) section. Click on Change HSTS Settings, enable all the relevant options and hit Save.

要在Cloudflare中启用此功能，请转到“ 加密”设置，然后向下滚动至“ HTTP严格传输安全性(HSTS)”部分。 点击更改HSTS设置，启用所有相关选项，然后点击保存 。

And just in case you’re wondering, browser support for HSTS is pretty good.

万一您想知道，浏览器对HSTS的支持还不错。

修正不安全方案参考 (Fix Insecure Scheme References)

If you embed a passive resource (such as an image) insecurely on a secure page, the browser still loads it just fine. It just takes off the green padlock from the address bar. You can see an example of this error here.

如果您在安全页面上不安全地嵌入了被动资源(例如图像)，则浏览器仍然可以正常加载它。 它只是从地址栏中取下绿色的挂锁。 您可以在此处看到此错误的示例。

If you check the browser console, you will see some warnings or errors that point to the resource that was embedded insecurely. In this case it’s

如果检查浏览器控制台，将看到一些警告或错误，这些警告或错误指向不安全地嵌入的资源。 在这种情况下

<img class="mixed" src="http://mixed.badssl.com/image.jpg" alt="HTTP image">

To fix this, just change scheme to HTTPS and all will be well again.

要解决此问题，只需将方案更改为HTTPS，一切都会恢复。

<img class="mixed" src="https://mixed.badssl.com/image.jpg" alt="HTTP image">

If you have a lot of content in your site embedded insecurely, finding and fixing each one could be quite tedious. But Cloudflare can help you here again with the Automatic HTTPS Rewrites feature.

如果您的网站中有很多内容被不安全地嵌入，则查找和修复每个内容可能会非常繁琐。 但是Cloudflare可以通过自动HTTPS重写功能再次为您提供帮助。

To be double sure that no content on your website can ever be served insecurely, consider implementing a Content Security Policy on your site.

要双重确保您的网站上的任何内容都不能被不安全地提供，请考虑在您的网站上实施内容安全政策 。

Now let’s see how the above changes to has affected our SSL Labs report. I’ve rerun the test on my domain, and now we now get an A+ rating.

现在，让我们看看上述更改对我们的SSL实验室报告有何影响。 我已经在我的域上重新运行了测试，现在我们获得了A +评级。

If you check the individual ratings in the graph, nothing has changed but we still do get a really secure SSL implementation for free and in just a few minutes.

如果您查看图表中的各个评分，则什么都没有改变，但是我们仍然可以在几分钟之内免费获得真正安全的SSL实施。

免费SSL的Cloudflare替代品 (Alternatives to Cloudflare for free SSL)

If you prefer not to use Cloudflare for some reason, there are other ways you can get your website on HTTPS for free. Here are two options you can try:

如果您出于某种原因不愿使用Cloudflare，可以通过其他方法免费在HTTPS上获取网站。 您可以尝试以下两种选择：

让我们加密 (Let’s Encrypt)

If you have control over your server, you can quickly deploy HTTPS on your site using Let’s Encrypt. They offer free SSL certificates that last for three months and can be renewed automatically.

如果您可以控制服务器，则可以使用Let's Encrypt在您的站点上快速部署HTTPS。 他们提供持续三个月的免费SSL证书，并且可以自动续订。

Even if you don’t have server access, check with your web host. Some hosts will allow you to use Let’s Encrypt SSL without providing shell access.

即使您没有服务器访问权限，也请与您的网络主机联系。 某些主机将允许您在不提供外壳程序访问的情况下使用“让我们加密SSL”。

Amazon AWS证书管理器 (Amazon AWS Certificate Manager)

Amazon also issues and automatically renews SSL certificates for customers on its Amazon Web Services (AWS) infrastructure. That way, you can set and forget HTTPS on your site if you use AWS resources such as Cloudfront.

亚马逊还将在其亚马逊网络服务(AWS)基础架构上为客户颁发并自动续订SSL证书。 这样，如果您使用诸如Cloudfront之类的AWS资源，则可以在站点上设置并忘记HTTPS。

Regardless of how you implement HTTPS on your website, the most important thing is to make sure you get setup as soon as possible so that your users get the security benefits it provides and you do not miss out on several cool features in browsers that will help you create better web experiences.

无论您如何在网站上实施HTTPS，最重要的是确保尽快进行设置，以使用户获得其提供的安全性好处，并且不要错过浏览器中的几项出色功能，这些功能将为您提供帮助您可以创造更好的网络体验。

If you liked this article, do share with others who might benefit from reading it. By the way, do checkout my blog at freshman.tech for articles on web development. Thanks for reading.

如果您喜欢这篇文章，请与其他可能从阅读中受益的人分享。 顺便说一句，请在freshman.tech上查看我的博客，以获取有关Web开发的文章。 谢谢阅读。

翻译自: https://www.freecodecamp.org/news/free-https-c051ca570324/

es6 ... 添加属性