Skip to content
This repository has been archived by the owner on Aug 10, 2022. It is now read-only.

Updated material-branch to changes from master https://github.com/google/WebFundamentals/pull/1875 #1876

Closed
wants to merge 3 commits into from
+228 −193
Closed

Updated material-branch to changes from master https://github.com/google/WebFundamentals/pull/1875 #1876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0c3557
Update Jo-el van Bergen author profile
johyphenel Sep 25, 2015
4488af3
Updated branch to changes from master https://github.com/google/WebFu…
johyphenel Sep 27, 2015
6d1a2b0
Merge pull request #1 from johyphenel/origin/material-branch
johyphenel Sep 27, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/content/_contributors.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
83 changes: 44 additions & 39 deletions src/content/en/fundamentals/security/avoid-mixed-content/_code/active-mixed-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<!-- // [TEMPLATE header_full] -->
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@petele - should I be removing this markup from master?

<title>Active mixed content example</title>
<!-- // [START snippet1] -->
<!-- An insecure script file loaded on a secure page -->
<script src="http://localhost:8888/simple-example.js"></script>
<script src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.js"></script>

<!-- An insecure stylesheet loaded on a secure page -->
<link href="http://localhost:8888/style.css" rel="stylesheet">
<link href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/style.css" rel="stylesheet">

<style>
.insecure-background {
/* An insecure resources loaded from a style property on a secure page, this can
happen in many places including, @font-face, cursor, background-image, and so on. */
background: url('http://localhost:8888/petelepage-thumb.jpg') no-repeat;
background: url('http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy-thumb.jpg') no-repeat;
}
</style>
<!-- // [END snippet1] -->
Expand All @@ -38,42 +39,46 @@

</head>
<body>
<h1>
Active mixed content!
</h1>
<p>
View page over: <a href="http://localhost:8888/active-mixed-content.html">HTTP</a> - <a href="https://localhost:4443/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.
</p>
<div class="insecure-style-holder">
<span style="ba">Insecure style loaded</span>
</div>
<div class="insecure-background">
Loading insecure background here...
</div>
<div role="main">
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@petele ditto?

<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>
</p>
<p>
Several examples of active mixed content. When viewed over HTTPS most browsers block this content and display errors in the JavaScript console.
</p>
<div class="insecure-style-holder">
<span style="ba">Insecure style loaded</span>
</div>
<div class="insecure-background">
Loading insecure background here...
</div>

<p>Loading insecure iframe...</p>
<!-- // [START snippet2] -->
<!-- An insecure iframed page loaded on a secure page -->
<iframe src="http://localhost:8888/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. -->
<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>

<!-- 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
var request = new XMLHttpRequest();
request.addEventListener('load', function() {
var jsonData = JSON.parse(request.responseText);
document.getElementById('output').innerHTML += '<br>' + jsonData.data;
});
request.open("GET", "http://localhost:8888/xmlhttprequest-data.js", true);
request.send();
</script>
<!-- // [END snippet2] -->
<div id="output">Waiting for insecure script to run...</div>
<script>
// An insecure resource loaded using XMLHttpRequest
var request = new XMLHttpRequest();
request.addEventListener('load', function() {
var jsonData = JSON.parse(request.responseText);
document.getElementById('output').innerHTML += '<br>' + jsonData.data;
});
request.open("GET", "http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/xmlhttprequest-data.js", true);
request.send();
</script>
<!-- // [END snippet2] -->
<div id="output">Waiting for insecure script to run...</div>
</div>
<!-- // [TEMPLATE footer] -->
</body>
</html>
</html>
38 changes: 21 additions & 17 deletions src/content/en/fundamentals/security/avoid-mixed-content/_code/image-gallery-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- // [TEMPLATE header_full] -->
<title>Image gallery mixed content example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
Expand Down Expand Up @@ -39,22 +40,25 @@
</style>
</head>
<body>
<h1>
Image gallery mixed content!
</h1>
<p>
View page over: <a href="http://localhost:8888/image-gallery-example.html">HTTP</a> - <a href="https://localhost:4443/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.
</p>
CLICK ME! -->
<!-- // [START snippet1] -->
<a class="gallery" href="http://localhost:8888/petelepage.jpg">
<img src="https://localhost:4443/petelepage-thumb.jpg">
</a>
<!-- // [END snippet1] -->
<div class="overlay overlay-background" style="display: none;"></div>
<div class="overlay overlay-foreground" style="display: none;"></div>
<div role="main">
<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>
</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.
</p>
CLICK ME! -->
<!-- // [START snippet1] -->
<a class="gallery" href="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy.jpg">
<img src="https://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy-thumb.jpg">
</a>
<!-- // [END snippet1] -->
<div class="overlay overlay-background" style="display: none;"></div>
<div class="overlay overlay-foreground" style="display: none;"></div>
</div>
<!-- // [TEMPLATE footer] -->
</body>
</html>
38 changes: 21 additions & 17 deletions src/content/en/fundamentals/security/avoid-mixed-content/_code/passive-mixed-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- // [TEMPLATE header_full] -->
<title>Passive mixed content example</title>
<style>
audio, img, video {
Expand All @@ -10,25 +11,28 @@
</style>
</head>
<body>
<h1>
Passive mixed content!
</h1>
<p>
View page over: <a href="http://localhost:8888/passive-mixed-content.html">HTTP</a> - <a href="https://localhost:4443/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>
<div role="main">
<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>
</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://localhost:8888/symphony-5-beethoven.mp3" type="audio/mp3" controls></audio>
<!-- // [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>

<!-- An insecure image loaded on a secure page -->
<img src="http://localhost:8888/petelepage-thumb.jpg">
<!-- An insecure image loaded on a secure page -->
<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>
<!-- // [END snippet1] -->
<!-- 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>
<!-- // [END snippet1] -->
</div>
<!-- // [TEMPLATE footer] -->
</body>
</html>
Binary file removed src/content/en/fundamentals/security/avoid-mixed-content/_code/petelepage.jpg
View file
Open in desktop
Binary file not shown.
Binary file renamed ...-mixed-content/_code/petelepage-thumb.jpg → ...avoid-mixed-content/_code/puppy-thumb.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/content/en/fundamentals/security/avoid-mixed-content/_code/puppy.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 17 additions & 13 deletions src/content/en/fundamentals/security/avoid-mixed-content/_code/simple-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<!-- // [TEMPLATE header_full] -->
<title>Simple mixed content example</title>
</head>
<body>
<h1>
Simple mixed content example!
</h1>
<p>
View page over: <a href="http://localhost:8888/simple-example.html">HTTP</a> - <a href="https://localhost:4443/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.
</p>
<div id="output">Waiting for insecure script to run...</div>
<!-- // [START snippet1] -->
<script src="http://localhost:8888/simple-example.js"></script>
<!-- // [END snippet1] -->
<div role="main">
<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>
</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.
</p>
<div id="output">Waiting for insecure script to run...</div>
<!-- // [START snippet1] -->
<script src="http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/simple-example.js"></script>
<!-- // [END snippet1] -->
</div>
<!-- // [TEMPLATE footer] -->
</body>
</html>
54 changes: 29 additions & 25 deletions src/content/en/fundamentals/security/avoid-mixed-content/_code/xmlhttprequest-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<!-- // [TEMPLATE header_full] -->
<title>XMLHttpRequest mixed content example</title>
</head>
<body>
<h1>
XMLHttpRequest mixed content example!
</h1>
<p>
View page over: <a href="http://localhost:8888/xmlhttprequest-example.html">HTTP</a> - <a href="https://localhost:4443/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.
</p>
<div id="output">Waiting for data...</div>
<!-- // [START snippet1] -->
<script>
var rootUrl = 'http://localhost:8888';
var resources = {
jsonData: '/xmlhttprequest-data.js'
};
var request = new XMLHttpRequest();
request.addEventListener('load', function() {
var jsonData = JSON.parse(request.responseText);
document.getElementById('output').innerHTML += '<br>' + jsonData.data;
});
request.open('GET', rootUrl + resources.jsonData);
request.send();
</script>
<!-- // [END snippet1] -->
<div role="main">
<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>
</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.
</p>
<div id="output">Waiting for data...</div>
<!-- // [START snippet1] -->
<script>
var rootUrl = 'http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content';
var resources = {
jsonData: '/xmlhttprequest-data.js'
};
var request = new XMLHttpRequest();
request.addEventListener('load', function() {
var jsonData = JSON.parse(request.responseText);
document.getElementById('output').innerHTML += '<br>' + jsonData.data;
});
request.open('GET', rootUrl + resources.jsonData, true);
request.send();
</script>
<!-- // [END snippet1] -->
</div>
<!-- // [TEMPLATE footer] -->
</body>
</html>
Loading