manual merge of #1875

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:

src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html → src/content/en/fundamentals/security/prevent-mixed-content/_code/active-mixed-content.html

@@ -44,7 +44,7 @@ <h1>
         Active mixed content!
       </h1>
       <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/active-mixed-content.html">HTTP</a> - <a href="httpS://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/active-mixed-content.html">HTTPS</a>
+        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/active-mixed-content.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/active-mixed-content.html">HTTPS</a>
       </p>
       <p>
         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 @@ <h1>
       <p>Loading insecure iframe...</p>
       <!-- // [START snippet2] -->
       <!-- An insecure iframed page loaded on a secure page -->
-      <iframe src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content//image-gallery-example.html"></iframe>
+      <iframe src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html"></iframe>
 
       <!-- Flash resources also qualify as active mixed content and pose a
       serious security risk. Be sure to look for <object> tags with type set
       to "application/x-shockwave-flash", and an http:// data attribute. -->
+      <!-- <object type="application/x-shockwave-flash" data="http://..."></object> -->
 
       <script>
         // An insecure resource loaded using XMLHttpRequest

src/content/en/fundamentals/security/avoid-mixed-content/_code/image-gallery-example.html → src/content/en/fundamentals/security/prevent-mixed-content/_code/image-gallery-example.html

@@ -45,7 +45,7 @@ <h1>
         Image gallery mixed content!
       </h1>
       <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html">HTTP</a> - <a href="httpS://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html">HTTPS</a>
+        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/image-gallery-example.html">HTTPS</a>
       </p>
       <p> 
         Image galleries often rely on the &lt;img&gt; tag src attribute to display thumbnail images on the page, the anchor ( &lt;a&gt; ) tag href attribute is then used to load the full sized image for the gallery overlay. Normally &lt;a&gt; tags do not cause mixed content, but in this case the jQuery code overrides the default link behavior &mdash; to navigate to a new page &mdash; and instead loads the HTTP image on this page. While this content isn't blocked, modern browsers display a warning in the JavaScript console. This can be seen when the page is viewed over HTTPS and the thumbnail is clicked.

src/content/en/fundamentals/security/avoid-mixed-content/_code/passive-mixed-content.html → src/content/en/fundamentals/security/prevent-mixed-content/_code/passive-mixed-content.html

@@ -16,18 +16,18 @@ <h1>
         Passive mixed content!
       </h1>
       <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/passive-mixed-content.html">HTTP</a> - <a href="httpS://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/passive-mixed-content.html">HTTPS</a>
+        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/passive-mixed-content.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/passive-mixed-content.html">HTTPS</a>
       </p>
       <p>
         Several examples of passive mixed content. When viewed over HTTPS most browsers do <b>not</b> block this content but instead display warnings in the JavaScript console.
       </p>
 
       <!-- // [START snippet1] -->
       <!-- An insecure audio file loaded on a secure page -->
-      <audio src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content//symphony-5-beethoven.mp3" type="audio/mp3" controls></audio>
+      <audio src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/symphony-5-beethoven.mp3" type="audio/mp3" controls></audio>
 
       <!-- An insecure image loaded on a secure page -->
-      <img src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content//puppy-thumb.jpg">
+      <img src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy.jpg">
 
       <!-- An insecure video file loaded on a secure page -->
       <video src="http://developers.google.com/web/fundamentals/media/video/video/chrome.webm" type="video/webm" controls></video>

src/content/en/fundamentals/security/avoid-mixed-content/_code/simple-example.html → src/content/en/fundamentals/security/prevent-mixed-content/_code/simple-example.html

@@ -10,7 +10,7 @@ <h1>
         Simple mixed content example!
       </h1>
       <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.html">HTTP</a> - <a href="httpS://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.html">HTTPS</a>
+        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.html">HTTPS</a>
       </p>
       <p>
         This page loads the script simple-example.js using HTTP. This is the simplest case of mixed content. When the simple-example.js file is requested by the browser, an attacker can inject code into the returned content and take control of the entire page. Thankfully, most modern browsers block this type of dangerous content by default and display an error in the JavaScript console. This can be seen when the page is viewed over HTTPS.

src/content/en/fundamentals/security/avoid-mixed-content/_code/xmlhttprequest-example.html → src/content/en/fundamentals/security/prevent-mixed-content/_code/xmlhttprequest-example.html

@@ -10,7 +10,7 @@ <h1>
         XMLHttpRequest mixed content example!
       </h1>
       <p>
-        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/xmlhttprequest-example.html">HTTP</a> - <a href="httpS://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/xmlhttprequest-example.html">HTTPS</a>
+        View page over: <a href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/xmlhttprequest-example.html">HTTP</a> - <a href="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/xmlhttprequest-example.html">HTTPS</a>
       </p>
       <p>
         This page constructs an HTTP URL dynamically in JavaScript, the URL is eventually used to load an insecure resource by XMLHttpRequest. When the xmlhttprequest-data.js file is requested by the browser, an attacker can inject code into the returned content and take control of the entire page. Thankfully, most modern browsers block this type of dangerous content by default and display an error in the JavaScript console. This can be seen when the page is viewed over HTTPS.
@@ -27,7 +27,7 @@ <h1>
           var jsonData = JSON.parse(request.responseText);
           document.getElementById('output').innerHTML += '<br>' + jsonData.data;
         });
-        request.open('GET', rootUrl + resources.jsonData);
+        request.open('GET', rootUrl + resources.jsonData, true);
         request.send();
       </script>
       <!-- // [END snippet1] -->

src/content/en/fundamentals/security/avoid-mixed-content/fixing-mixed-content.markdown → 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:
 ---
 
 <p class="intro">
-  Finding and fixing <b>mixed content</b> can be time-consuming task; but it is an 
+  Finding and fixing <b>mixed content</b> can be a time-consuming task; but it is an 
   important task nonetheless. Thankfully, there are some tools available to help 
   with this process.
 </p>
 
 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_ -&gt; _Developer_ -&gt;
 _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:
 
 <figure>
-  <img src="imgs/todo.png">
-  <figcaption>TODO</figcaption>
+  <img src="imgs/passive-mixed-content-warnings.png" alt="Mixed Content: The page was loaded over HTTPS, but requested an insecure video. This content should also be served over HTTPS.">
 </figure>
 
+{% 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:
 
 <figure>
-  <img src="imgs/todo.png">
-  <figcaption>TODO</figcaption>
-</figure> 
+  <img src="imgs/active-mixed-content-errors.png" alt="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.">
+</figure>
+
+{% 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 (`<a>`)
 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:
 
 <figure>
-  <img src="imgs/todo.png">
-  <figcaption>TODO</figcaption>
+  <img src="imgs/image-gallery-warning.png" alt="Mixed Content: The page was loaded over HTTPS, but requested an insecure image. This content should also be served over HTTPS.">
 </figure>
 
 Which you found in source here:
 
 {% highlight html %}  
-<img src="http://example.com/image.jpg"> 
+<img src="http://googlesamples.github.io/web-fundamentals/.../puppy.jpg"> 
 {% 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.
-
-<figure>
-  <img src="imgs/todo.png">
-  <figcaption>TODO</figcaption>
-</figure>
-
-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. 
-
-<figure>
-  <img src="imgs/todo.png">
-  <figcaption>TODO</figcaption>
-</figure>
+proceed to [step 2](#step-2).
+
+<div class="mdl-grid">
+  <figure class="mdl-cell mdl-cell--6-col">
+    <img src="imgs/puppy-http.png">
+    <figcaption>HTTP image loads without error.</figcaption>
+  </figure>
+  <figure class="mdl-cell mdl-cell--6-col">
+    <img src="imgs/puppy-https.png">
+    <figcaption>HTTPS image loads without error, and image is the same as HTTP. Go to <a href="#step-2">step 2</a>!</figcaption>
+   </figure>
+</div>
+
+If you see a certificate warning, or if the content can't be displayed over
+**HTTPS**, it means the resource is not available securely.
+
+<div class="mdl-grid">
+  <figure class="mdl-cell mdl-cell--6-col">
+    <img src="imgs/https-not-available.png">
+    <figcaption>Resource not available over HTTPS.</figcaption>
+  </figure>
+  <figure class="mdl-cell mdl-cell--6-col">
+    <img src="imgs/https-cert-warning.png">
+    <figcaption>Certificate warning when attempting to view resource over HTTPS.</figcaption>
+  </figure>
+</div>
 
 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 `<a>` 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 `<meta>` tag 
 in the `<head>` 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/)
+
+<!-- Span required to prevent rest of page from being indented. 
+https://github.com/google/WebFundamentals/issues/1873 -->
+<span></span>
 
 {% 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 `<iframe>` documents,