From 4488af3bc80e2e286a3176f4f89d8aa2567ac3ad Mon Sep 17 00:00:00 2001 From: Jo-el van Bergen Date: Sun, 27 Sep 2015 14:48:38 -0700 Subject: [PATCH] Updated branch to changes from master https://github.com/google/WebFundamentals/pull/1875 --- src/content/_contributors.yaml | 4 +- .../_code/active-mixed-content.html | 83 +++++++------- .../_code/image-gallery-example.html | 38 ++++--- .../_code/passive-mixed-content.html | 38 ++++--- .../avoid-mixed-content/_code/petelepage.jpg | Bin 48090 -> 0 bytes .../{petelepage-thumb.jpg => puppy-thumb.jpg} | Bin 12574 -> 11707 bytes .../avoid-mixed-content/_code/puppy.jpg | Bin 0 -> 36627 bytes .../_code/simple-example.html | 30 ++--- .../_code/xmlhttprequest-example.html | 54 ++++----- .../fixing-mixed-content.markdown | 103 ++++++++++-------- .../imgs/active-mixed-content-errors.png | Bin 0 -> 385720 bytes .../imgs/https-cert-warning.png | Bin 0 -> 54980 bytes .../imgs/https-not-available.png | Bin 0 -> 25920 bytes .../imgs/image-gallery-warning.png | Bin 0 -> 83555 bytes .../imgs/passive-mixed-content-warnings.png | Bin 0 -> 244253 bytes .../avoid-mixed-content/imgs/puppy-http.png | Bin 0 -> 218987 bytes .../avoid-mixed-content/imgs/puppy-https.png | Bin 0 -> 220436 bytes .../imgs/simple-mixed-content-error.png | Bin 0 -> 77187 bytes .../avoid-mixed-content/imgs/todo.png | Bin 2509 -> 0 bytes .../xmlhttprequest-mixed-content-error.png | Bin 0 -> 84517 bytes .../avoid-mixed-content/index.markdown | 66 ++++++----- src/static/imgs/contributors/johyphenel.jpg | Bin 0 -> 69485 bytes 22 files changed, 224 insertions(+), 192 deletions(-) delete mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/_code/petelepage.jpg rename src/content/en/fundamentals/security/avoid-mixed-content/_code/{petelepage-thumb.jpg => puppy-thumb.jpg} (50%) create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/_code/puppy.jpg create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/active-mixed-content-errors.png create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/https-cert-warning.png create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/https-not-available.png create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/image-gallery-warning.png create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/passive-mixed-content-warnings.png create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/puppy-http.png create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/puppy-https.png create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/simple-mixed-content-error.png delete mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/todo.png create mode 100644 src/content/en/fundamentals/security/avoid-mixed-content/imgs/xmlhttprequest-mixed-content-error.png create mode 100644 src/static/imgs/contributors/johyphenel.jpg diff --git a/src/content/_contributors.yaml b/src/content/_contributors.yaml index 47422767ff7..011aafe7985 100644 --- a/src/content/_contributors.yaml +++ b/src/content/_contributors.yaml @@ -628,13 +628,13 @@ 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: Security and Privacy Engineer + unit: Software Engineer country: USA role: - author diff --git a/src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html b/src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html index c0ce55feb27..9f3b503415e 100644 --- a/src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html +++ b/src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html @@ -1,19 +1,20 @@ + Active mixed content example - + - + @@ -38,42 +39,46 @@ -

- Active mixed content! -

-

- 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. -

-
- Insecure style loaded -
-
- Loading insecure background here... -
+
+

+ Active mixed content! +

+

+ 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. +

+
+ Insecure style loaded +
+
+ Loading insecure background here... +
-

Loading insecure iframe...

- - - - - +

Loading insecure iframe...

+ + + + + + - - -
Waiting for insecure script to run...
+ + +
Waiting for insecure script to run...
+
+ - \ No newline at end of file + diff --git a/src/content/en/fundamentals/security/avoid-mixed-content/_code/image-gallery-example.html b/src/content/en/fundamentals/security/avoid-mixed-content/_code/image-gallery-example.html index efd271f0d6d..dfcb2e57287 100644 --- a/src/content/en/fundamentals/security/avoid-mixed-content/_code/image-gallery-example.html +++ b/src/content/en/fundamentals/security/avoid-mixed-content/_code/image-gallery-example.html @@ -1,6 +1,7 @@ + Image gallery mixed content example - +
+

+ Simple mixed content example! +

+

+ View page over: HTTP - HTTPS +

+

+ 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. +

+
Waiting for insecure script to run...
+ + + +
+ diff --git a/src/content/en/fundamentals/security/avoid-mixed-content/_code/xmlhttprequest-example.html b/src/content/en/fundamentals/security/avoid-mixed-content/_code/xmlhttprequest-example.html index 1f1bfe96ccb..6650c6b389b 100644 --- a/src/content/en/fundamentals/security/avoid-mixed-content/_code/xmlhttprequest-example.html +++ b/src/content/en/fundamentals/security/avoid-mixed-content/_code/xmlhttprequest-example.html @@ -1,33 +1,37 @@ + XMLHttpRequest mixed content example -

- XMLHttpRequest mixed content example! -

-

- View page over: HTTP - HTTPS -

-

- 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. -

-
Waiting for data...
- - - +
+

+ XMLHttpRequest mixed content example! +

+

+ View page over: HTTP - HTTPS +

+

+ 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. +

+
Waiting for data...
+ + + +
+ diff --git a/src/content/en/fundamentals/security/avoid-mixed-content/fixing-mixed-content.markdown b/src/content/en/fundamentals/security/avoid-mixed-content/fixing-mixed-content.markdown index 06c586ca346..a66d682cb8d 100644 --- a/src/content/en/fundamentals/security/avoid-mixed-content/fixing-mixed-content.markdown +++ b/src/content/en/fundamentals/security/avoid-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." +written_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](what-is-mixed-content) on this topic. {% include shared/toc.liquid %} @@ -48,34 +48,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 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 %} +{% include shared/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, @@ -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,19 +110,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: @@ -146,7 +157,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 +171,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,14 +186,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 shared/remember.liquid list=page.notes.csp %} +{% include shared/remember.liquid title="Note" list=page.notes.csp %} ### Finding mixed content with content security policy @@ -192,13 +205,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 @@ -213,7 +226,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 @@ -222,18 +235,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 @@ -261,7 +274,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 `