diff --git a/README.md b/README.md index e4587ff95ea..4c76bcf4343 100644 --- a/README.md +++ b/README.md @@ -73,8 +73,9 @@ Mac * `rvm install ruby-2.2.0` * `rvm --default use 2.2.0` 1. Install [Pygments](http://pygments.org/) - * `easy_install pygments` + * `sudo easy_install pygments` 1. Install [RubyGems](https://rubygems.org/) dependencies ([Jekyll](http://jekyllrb.com/) and [Kramdown](http://kramdown.gettalong.org/)) + * `gem install bundler` * `rvm . do bundle install` 1. Install the [Grunt CLI](http://gruntjs.com/) * `npm install -g grunt-cli` diff --git a/package.json b/package.json index 2374c89ffd4..e77e3cb0c61 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,8 @@ "grunt-contrib-watch": "~0.6.1", "grunt-gae": "^0.2.4", "grunt-open": "~0.2.3", - "grunt-sass": "^0.17.0", - "grunt-webfont": "~0.4.8", + "grunt-sass": "^1.0.0", + "grunt-webfont": "^0.5.4", "js-yaml": "^3.2.2", "latest-release": "^1.0.0", "marked": "^0.3.2", diff --git a/src/_contributors.yaml b/src/_contributors.yaml index f577c668450..5f6a9d603df 100644 --- a/src/_contributors.yaml +++ b/src/_contributors.yaml @@ -748,3 +748,18 @@ dgash: - author email: dgash@google.com description: "Dave is a Tech Writer" + +johyphenel: + name: + given: Jo-el + family: van Bergen + org: + name: Google + unit: Software Engineer + country: USA + role: + - author + homepage: https://plus.google.com/+Jo-elvanBergen + google: +Jo-elvanBergen + twitter: johyphenel + email: jo-el@google.com diff --git a/src/_langs/en/fundamentals/discovery-and-distribution/avoid-mixed-content/_code/active-mixed-content.html b/src/_langs/en/fundamentals/discovery-and-distribution/avoid-mixed-content/_code/active-mixed-content.html index afbeedddc5f..9f3b503415e 100644 --- a/src/_langs/en/fundamentals/discovery-and-distribution/avoid-mixed-content/_code/active-mixed-content.html +++ b/src/_langs/en/fundamentals/discovery-and-distribution/avoid-mixed-content/_code/active-mixed-content.html @@ -44,7 +44,7 @@

Active mixed content!

- View page over: HTTP - HTTPS + View page over: HTTP - HTTPS

Several examples of active mixed content. When viewed over HTTPS most browsers block this content and display errors in the JavaScript console. @@ -59,11 +59,12 @@

Loading insecure iframe...

- + + diff --git a/src/_langs/en/fundamentals/discovery-and-distribution/avoid-mixed-content/fixing-mixed-content.markdown b/src/_langs/en/fundamentals/discovery-and-distribution/avoid-mixed-content/fixing-mixed-content.markdown index 956f525aaf3..b3e3b64ec72 100644 --- a/src/_langs/en/fundamentals/discovery-and-distribution/avoid-mixed-content/fixing-mixed-content.markdown +++ b/src/_langs/en/fundamentals/discovery-and-distribution/avoid-mixed-content/fixing-mixed-content.markdown @@ -1,14 +1,13 @@ --- layout: article title: "Fixing mixed content" -published: false -description: "intro doc" +description: "Learn how to find and fix mixed content, keeping your site secure." article: - written_on: 2015-09-25 - updated_on: 2015-09-25 + written_on: 2015-09-28 + updated_on: 2015-09-28 order: 2 authors: - - joelvanbergen + - johyphenel id: fixing-mixed-content collection: mixed-content translation_priority: 1 @@ -25,13 +24,13 @@ notes: {% wrap content %}

- Finding and fixing mixed content can be time-consuming task; but it is an + Finding and fixing mixed content can be a time-consuming task; but it is an important task nonetheless. Thankfully, there are some tools available to help with this process.

This guide discusses tools and techniques to find and fix mixed content; for -more information on mixed content itself, see our [previous guide](#TODO) on this topic. +more information on mixed content itself, see our [previous guide](what-is-mixed-content) on this topic. {% include modules/toc.liquid %} @@ -55,34 +54,39 @@ console can be opened from the View menu, _View_ -> _Developer_ -> _JavaScript Console_ or by right-clicking the page, selecting _Inspect Element_ then selecting _Console_. -The passive mixed content example in our [previous guide](#TODO) -will cause mixed content warnings to be displayed, like the one below: +The [passive mixed content example](https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/passive-mixed-content.html) in our [previous guide](what-is-mixed-content#passive-mixed-content) will cause mixed content warnings to be displayed, like the ones below:
- -
TODO
+ Mixed Content: The page was loaded over HTTPS, but requested an insecure video. This content should also be served over HTTPS.
+{% link_sample_button _code/passive-mixed-content.html %} + Try sample +{% endlink_sample_button %} + While the active mixed content example will cause mixed content errors to be -display: +displayed:
- -
TODO
-
+ Mixed Content: The page was loaded over HTTPS, but requested an insecure resource. This request has been blocked; the content must be served over HTTPS. + + +{% link_sample_button _code/active-mixed-content.html %} + Try sample +{% endlink_sample_button %} The `http://` URLs listed in these errors and warnings should be fixed in your -sites source, it helps to make a list of these URLs, along with the page you +site's source, it helps to make a list of these URLs, along with the page you found them on, to help you fix them later. -{% include modules/remember.liquid list=page.notes.current-page %} +{% include modules/remember.liquid title="Note" list=page.notes.current-page %} ### Finding mixed content in your source code You can search for mixed content directly in your source code. Search for `http://` in your source and look for tags that include HTTP URL attributes. -Specifically, you are looking for the tags listed in the [mixed content types & security threats associated](#TODO) section in the [background on mixed content](#TODO) guide. -Note that having `http://` in the href attribute of anchor tags (`a`) +Specifically, you are looking for the tags listed in the [mixed content types & security threats associated](what-is-mixed-content#mixed-content-types--security-threats-associated) section of our previous guide. +Note that having `http://` in the href attribute of anchor tags (``) is often not a mixed content issue, with some notable exceptions discussed later. If you have a list of HTTP URLs from Chrome mixed content errors and warnings, @@ -97,14 +101,13 @@ follow these steps to fix it. Assuming you have the following mixed content error in Chrome:
- -
TODO
+ Mixed Content: The page was loaded over HTTPS, but requested an insecure image. This content should also be served over HTTPS.
Which you found in source here: {% highlight html %} - + {% endhighlight %} #### Step 1 @@ -113,19 +116,26 @@ Check that the URL is available over HTTPS. Open a new tab in your browser, enter the URL in the address bar, and change `http://` to `https://` If the resource displayed is the same over **HTTP** and **HTTPS**, everything is OK, -proceed to step 2. +proceed to [step 2](#step-2).
- -
TODO
+ +
HTTP image loads without error.
+
+
+ +
HTTPS image loads without error, and image is the same as HTTP. Go to step 2!
-If you see a certificate warning, or if the content can't be displayed at all -over **HTTPS**, it means the resource is not available securely. +If you see a certificate warning, or if the content can't be displayed over **HTTPS**, it means the resource is not available securely.
- -
TODO
+ +
Resource not available over HTTPS.
+
+
+ +
Certificate warning when attempting to view resource over HTTPS.
In this case, you should consider one of the following options: @@ -153,7 +163,7 @@ on the page, causing a mixed content problem. {% include_code _code/image-gallery-example.html snippet1 %} -In the code above, it may seem safe to leave the `a` tags href as `http://`, +In the code above, it may seem safe to leave the `` tags href as `http://`, however if you view the sample and click on the image, you'll see that it loads a mixed content resources and displays it on the page. @@ -167,13 +177,13 @@ ensure that your pages never unexpectedly load insecure resources. ### Content security policy -Content security policy (CSP) is a multi-purpose browser feature that you +**Content security policy** (CSP) is a multi-purpose browser feature that you can use to manage mixed content at scale. The CSP reporting mechanism can be used to track the mixed content on your site; and the enforcement policy, to protect users by upgrading or blocking mixed content. You can enable these features for a page by including the -`Content-Security-Policy` or `Content-Security-Policy-Report-Only header` in the +`Content-Security-Policy` or `Content-Security-Policy-Report-Only` header in the response sent from your server. Additionally, `Content-Security-Policy` (but **not** `Content-Security-Policy-Report-Only`) can be set using a `` tag in the `` section of your page. See examples in the following @@ -182,14 +192,16 @@ sections. CSP is useful for many things outside of its mixed content uses, you can find more information about other CSP directives at the following resources: -* Mozilla's intro to CSP: - [https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing\_Content\_Security\_Policy](https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy) -* HTML5 Rocks intro to CSP: - [http://www.html5rocks.com/en/tutorials/security/content-security-policy/](http://www.html5rocks.com/en/tutorials/security/content-security-policy/) -* CSP playground: [http://www.cspplayground.com/](http://www.cspplayground.com/) -* CSP version 2 spec: [http://www.w3.org/TR/CSP2/](http://www.w3.org/TR/CSP2/) +* [Mozilla's intro to CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy) +* [HTML5 Rocks' intro to CSP](http://www.html5rocks.com/en/tutorials/security/content-security-policy/) +* [CSP playground](http://www.cspplayground.com/) +* [CSP version 2 spec](http://www.w3.org/TR/CSP2/) + + + -{% include modules/remember.liquid list=page.notes.csp %} +{% include modules/remember.liquid title="Note" list=page.notes.csp %} ### Finding mixed content with content security policy @@ -199,13 +211,13 @@ directive by adding it as a response header for your site. Response header: {% highlight http %} -Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint +Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://.com/reportingEndpoint {% endhighlight %} Whenever a user visits a page on your site, their browser sends JSON-formatted reports regarding anything that violates the content security policy to -`https://example.com/reportingEndpoint`. In this case, anytime a +`https://.com/reportingEndpoint`. In this case, anytime a subresource is loaded over HTTP, a report is sent. These reports include the page URL where the policy violation occurred and the subresource URL that violated the policy. If you configure your reporting endpoint to log these @@ -220,7 +232,7 @@ The two caveats to this are: that don't get much traffic, it might be some time before you get reports for your entire site. -For more information on CSP header format, see the [Content Security Policy specification](https://w3c.github.io/webappsec/specs/content-security-policy/#violation-reports). +For more information on CSP header format, see the [Content Security Policy specification](https://w3c.github.io/webappsec/specs/content-security-policy/#directives). If you don't want to configure a reporting endpoint yourself, [https://report-uri.io/](https://report-uri.io/) is a reasonable @@ -229,18 +241,18 @@ alternative. ### Upgrading insecure requests One of the newest and best tools to automatically fix mixed content is the -[`upgrade-insecure-requests`](http://www.w3.org/TR/upgrade-insecure-requests) +[**`upgrade-insecure-requests`**](http://www.w3.org/TR/upgrade-insecure-requests) CSP directive. This directive instructs the browser to upgrade insecure URLs before making network requests. As an example, if a page contains an image tag with a HTTP URL: {% highlight html %} - + {% endhighlight %} The browser instead makes a secure request for -https://example.com/image.jpg, thus saving the user from mixed +https://<your-domain>.com/image.jpg, thus saving the user from mixed content. You can enable this behavior either by sending a `Content-Security-Policy` header @@ -268,7 +280,7 @@ ensuring the entire page is protected. Not all browsers support the upgrade-insecure-requests directive, so an alternative for protecting users is the -[`block-all-mixed-content`](http://www.w3.org/TR/mixed-content/#strict-checking) +[**`block-all-mixed-content`**](http://www.w3.org/TR/mixed-content/#strict-checking) CSP directive. This directive instructs the browser to never load mixed content; all mixed content resource request are blocked, including both active and passive mixed content. This option also cascades into `