diff --git a/src/content/_contributors.yaml b/src/content/_contributors.yaml index a918597b0ff..a78e27d4119 100644 --- a/src/content/_contributors.yaml +++ b/src/content/_contributors.yaml @@ -628,17 +628,20 @@ samthorogood: email: thorogood@google.com description: "Evangelises Chrome and the mobile web in the Developer Relations team at Google." -joelvanbergen: +johyphenel: name: given: Jo-el family: van Bergen org: name: Google - unit: Social privacy and security + unit: Software engineer country: USA role: - author - email: lowf@google.com + homepage: https://plus.google.com/+Jo-elvanBergen + google: +Jo-elvanBergen + twitter: johyphenel + email: jo-el@google.com mikewest: name: diff --git a/src/content/en/fundamentals/security/avoid-mixed-content/_code/puppy-thumb.jpg b/src/content/en/fundamentals/security/avoid-mixed-content/_code/puppy-thumb.jpg deleted file mode 100644 index e55b9b75ca8..00000000000 Binary files a/src/content/en/fundamentals/security/avoid-mixed-content/_code/puppy-thumb.jpg and /dev/null differ diff --git a/src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html b/src/content/en/fundamentals/security/prevent-mixed-content/_code/active-mixed-content.html similarity index 92% rename from src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html rename to src/content/en/fundamentals/security/prevent-mixed-content/_code/active-mixed-content.html index afbeedddc5f..9f3b503415e 100644 --- a/src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html +++ b/src/content/en/fundamentals/security/prevent-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/content/en/fundamentals/security/avoid-mixed-content/fixing-mixed-content.markdown b/src/content/en/fundamentals/security/prevent-mixed-content/fixing-mixed-content.markdown similarity index 76% rename from src/content/en/fundamentals/security/avoid-mixed-content/fixing-mixed-content.markdown rename to src/content/en/fundamentals/security/prevent-mixed-content/fixing-mixed-content.markdown index 06c586ca346..c50fe78c2a9 100644 --- a/src/content/en/fundamentals/security/avoid-mixed-content/fixing-mixed-content.markdown +++ b/src/content/en/fundamentals/security/prevent-mixed-content/fixing-mixed-content.markdown @@ -1,11 +1,11 @@ --- layout: shared/narrow title: "Fixing mixed content" -description: "intro doc" -published_on: 2015-09-21 -updated_on: 2015-09-21 +description: "Learn how to find and fix mixed content, keeping your site secure." +published_on: 2015-09-28 +updated_on: 2015-09-28 authors: - - joelvanbergen + - johyphenel translation_priority: 1 key-takeaways: - "Always use https:// URLs when loading resources on your page." @@ -18,13 +18,13 @@ notes: ---

- 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](.) on this topic. {% include shared/toc.liquid %} @@ -48,24 +48,29 @@ 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 src=_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 src=_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 shared/remember.liquid list=page.notes.current-page %} @@ -74,8 +79,8 @@ found them on, to help you fix them later. 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, @@ -90,14 +95,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 @@ -106,20 +110,32 @@ 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. - -
- -
TODO
-
- -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. - -
- -
TODO
-
+proceed to [step 2](#step-2). + +
+
+ +
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 over +**HTTPS**, it means the resource is not available securely. + +
+
+ +
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: @@ -146,7 +162,7 @@ on the page, causing a mixed content problem. {% include_code src=_code/image-gallery-example.html snippet=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. @@ -160,13 +176,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 @@ -175,12 +191,14 @@ 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 shared/remember.liquid list=page.notes.csp %} @@ -222,7 +240,7 @@ 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. @@ -261,7 +279,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 `