Update "Preventing mixed content" section and prepare for publishing

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`

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",

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

src/_langs/en/fundamentals/discovery-and-distribution/avoid-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/_langs/en/fundamentals/discovery-and-distribution/avoid-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/_langs/en/fundamentals/discovery-and-distribution/avoid-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/_langs/en/fundamentals/discovery-and-distribution/avoid-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/_langs/en/fundamentals/discovery-and-distribution/avoid-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] -->