add Sub-Resource Integrity attributes on external sources

public/_layout.ejs

@@ -53,7 +53,7 @@
   <link rel="dns-prefetch" href="https://gist.github.com">
 
   <link rel="dns-prefetch" href="https://use.typekit.net">
-  <script src="https://use.typekit.net/tcm1whv.js"></script>
+  <script src="https://use.typekit.net/tcm1whv.js" integrity="Cajpx1SH5pZw/OSd5LTP9EBy6XLNv0Ti69o0b2bzYF6Zb8/P/Qy3BSbZpYZiUg0Q" crossorigin="anonymous"></script>
   <script>try{Typekit.load({ async: true });}catch(e){}</script>
 
   <script>

public/posts/2010/01/basics-of-the-mach-o-file-format.md

@@ -61,7 +61,7 @@ Mac).</p>
 <a href="/posts/2010/01/working-with-c-style-structs-in-ruby">
 CStruct</a> we define the Mach header like so:</p>
 
-<script src="https://gist.github.com/280635.js"></script>
+<script src="https://gist.github.com/280635.js" integrity="mDxjhIjSzfTrTGCoJEal7X5EowTQWcPyyE9xuDaRH4Al5wWVemvfjJr3WT0QCOGA" crossorigin="anonymous"></script>
 
 
 <h2>Segments</h2>
@@ -82,7 +82,7 @@ e.g. \_\_DATA or \_\_TEXT </p>
 <p>The code exposes some more details about segment commands, but should
 be easy enough to follow.</p>
 
-<script src="https://gist.github.com/280642.js"></script>
+<script src="https://gist.github.com/280642.js" integrity="eY3t12vnVg5AdETSbfxWASVlAMXw8Ti7m7V2siEe9AmPncn5rckLDlh5jWBGYBbJ" crossorigin="anonymous"></script>
 
 
 <h2>Sections</h2>
@@ -105,7 +105,7 @@ two underscores, e.g. \_\_bss or \_\_text</p>
 
 <p>Finally, the Ruby code describing section structs:</p>
 
-<script src="https://gist.github.com/280643.js"></script>
+<script src="https://gist.github.com/280643.js" integrity="TTawOAzAxNuDvbcDU7DXvkoK6vBygkHd1Web2mk2sKx9iCK1ZOnWUPU9tZUDFzig" crossorigin="anonymous"></script>
 
 
 <h2>macho.rb</h2>

public/posts/2010/01/working-with-c-style-structs-in-ruby.md

@@ -28,11 +28,11 @@ supported by Array#pack is fairly easy to add though.
 First a quick example and then we'll get into the CStruct class itself. In
 C you may write the following to have one struct "inherit" from another:
 
-<script src="https://gist.github.com/279790.js"></script>
+<script src="https://gist.github.com/279790.js" integrity="YxFzbbrt2TOJJW0q8lfvUTM8cYYau3pFyLY6rO2lTP88bfioQJmTcboCd+i2QHCZ" crossorigin="anonymous"></script>
 
 With CStruct in Ruby that translates to:
 
-<script src="https://gist.github.com/279794.js"></script>
+<script src="https://gist.github.com/279794.js" integrity="FlnBwix8W7tFGWzEAMuLWxw5n7mYpeIQ1ka50tSODtlveSO/pwsl79nJvSTjx1dE" crossorigin="anonymous"></script>
 
 CStructs act like Ruby's built-in Struct to a certain extent. They are
 instantiated the same way, by passing values to #new in the same order they

public/posts/2010/11/37signals-chalk-dissected.md

@@ -27,7 +27,7 @@
 
 <p>2k, 61 lines. 10 of which are Google Analytics JavaScript. Let's glance at some of it.<p>
 
-<script src="https://gist.github.com/663655.js?file=chalk.html"></script>
+<script src="https://gist.github.com/663655.js?file=chalk.html" integrity="ehqYRqyTpCUg6YjDKot9ExDBzsGQeG/z5zA/AGwARk+bIRry5GWtM0GrPSNBSZ8v" crossorigin="anonymous"></script>
 
 <p>Standard html5 doctype, and a manifest for <a href="http://diveintohtml5.org/offline.html">application caching</a>.</p>
 
@@ -35,7 +35,7 @@
 
 <p>The interesting thing about the HTML is that without any JavaScript or CSS the document would be a completely blank white page (except for a strange looking share button w/ no title). Talk about progressive enhancement. Here's a look at the HTML:</p>
 
-<script src="https://gist.github.com/663642.js?file=chalk.html"></script>
+<script src="https://gist.github.com/663642.js?file=chalk.html" integrity="/2zaq6161iZrVdj2vMWk9UJh1tn1P5AYcu1wDu+Sae/hZPRRSkPoeSxCFilQY0OK" crossorigin="anonymous"></script>
 
 <p>Onward.</p>
 
@@ -59,16 +59,14 @@ background.jpg 1024x946px</div>
 
 <p>The background is the blackboard itself, and is almost square at 1024x946. The cork border and light switch are there too. This is set as the background-image of the html element and is positioned at a negative x or y in order to centre it properly. <a href="https://developer.mozilla.org/En/CSS/Media_queries">CSS media queries</a> are used to detect the screen's orientation. This way the same image is used for both orientations, clever.</p>
 
-<script src="https://gist.github.com/663656.js?file=chalk-01.css">
-</script>
+<script src="https://gist.github.com/663656.js?file=chalk-01.css" integrity="pppzC38xO2zCUDo3i8TDUOJE+xJVOQICKUrf/WwJ0WQ46YaoAH67MY5Jx+4l1T/+" crossorigin="anonymous"></script>
 
 <p>&nbsp;</p>
 <h3>Chalkboard</h3>
 
 <p>Just a canvas element positioned over the chalkboard using media queries. There's also an image element called "output" used to render an image for sharing.</p>
 
-<script src="https://gist.github.com/663675.js?file=chalk-chalkboard.css">
-</script>
+<script src="https://gist.github.com/663675.js?file=chalk-chalkboard.css" integrity="BX9UFBSGXL1TncyiwyJMw79vWvRL/06rRBRpiSWckzpPhtXIg3JPP0nHTGVrDDOw" crossorigin="anonymous"></script>
 
 <p>&nbsp;</p>
 <h3>Sprites</h3>
@@ -87,8 +85,7 @@ chalk-sprites.png </div>
 
 <p>The dimmers background color is black at 67% opacity. The shade element fades in using -webkit-transition: on its visibility property while the dimmers use CSS3 transitions on their background. The dimmers are positioned using media queries as well, one on each side of the board. Interestingly their parent shade has a height and width of 0. Rather than each having a unique id they just have the class "dim" and the :nth-child pseudo-class selector is used to position them independently.</p>
 
-<script src="https://gist.github.com/663664.js?file=chalk-02.css">
-</script>
+<script src="https://gist.github.com/663664.js?file=chalk-02.css" integrity="DYm5GZcNahZ2E6wvgVdRPEoEckwcaXSGC5WkJ7a9n+sgKfqPXSCrK7oeg1Jkj44m" crossorigin="anonymous"></script>
 
 <p>If you took a look at the HTML before you'll have noticed there's no shade class defined on the body element. Looks like they're using JavaScript to add the shade class to body, triggering the transitions to the visible shades and setting the dimmers backgrounds to black at the same time, causing the fading effect. The shade fades in while the ledge and share button fade out.</p>
 
@@ -99,8 +96,7 @@ chalk-sprites.png </div>
 
 <p>There are 2 layers to the tools on the ledge. There are the images of the tools and their indicators, but also an anchor element for each tool that acts as targets to select them. When tools are select the indicators fade in and out using CSS3 transitions on opacity by adding and removing the class "active" on the tool.</p>
 
-<script src="https://gist.github.com/663693.js?file=chalk-indicators.css">
-</script>
+<script src="https://gist.github.com/663693.js?file=chalk-indicators.css" integrity="lFgXKJuvG2xQO0l7Vl21bkmZb944FpW2qPxrPnIgKvhr0ODCdnLQB6lKF6uI98EU" crossorigin="anonymous"></script>
 
 <p>There are pattern images for each colour of chalk, and one for the the eraser. The eraser "pattern" is the entire blackboard so erasing it doesn't look ugly. I love that kind of attention to detail.<p>
 
@@ -126,7 +122,7 @@ chalk-sprites.png </div>
 <h3>Initialization</h3>
 
 <p>&nbsp;</p>
-<script src="https://gist.github.com/664206.js?file=chalk-init.js"></script>
+<script src="https://gist.github.com/664206.js?file=chalk-init.js" integrity="tbSAEZ/VTMgIt18Rbpfrg+CHEwiF6ycYO+zvaVGvvd1Agot0A6ADUv8OYUrxzDC8" crossorigin="anonymous"></script>
 
 <p>First we get a handle on all the elements and the canvas' 2d drawing context. I almost want to say views and controls as it really feels just like hooking up a controller and view in a desktop GUI app. Sometimes the line between dynamic web page and web app are blurred, not so here. Chalk is 100% app.</p>
 
@@ -138,7 +134,7 @@ chalk-sprites.png </div>
 <h3>Tools</h3>
 
 <p>&nbsp;</p>
-<script src="https://gist.github.com/664214.js?file=chalk-tools.js"></script>
+<script src="https://gist.github.com/664214.js?file=chalk-tools.js" integrity="Sohq8Y7ObQwXkvxCgVQbL1LmL3jNCRWcbmK1CxWPfapBaznfs6riRw+P16tA0Q2I" crossorigin="anonymous"></script>
 
 <p><code>createPattern(name, callback)</code> loads one of the pattern images, chalk-tile-*, and then creates a pattern in the drawing context and passes it to the given callback.</p>
 
@@ -152,7 +148,7 @@ chalk-sprites.png </div>
 <h3>Drawing</h3>
 
 <p>&nbsp;</p>
-<script src="https://gist.github.com/664235.js?file=chalk-drawing.js"></script>
+<script src="https://gist.github.com/664235.js?file=chalk-drawing.js" integrity="26RRKEGNAmNefZzu2YRq57uk5kkUgHjyXINmZW4QN2cPjeUfTZ9CNmcGHxwNpe9c" crossorigin="anonymous"></script>
 
 <p>Drawing is done by listening for touch events on the canvas element. An array of points to draw is initialized to a 1-element array containing <code>null</code>. Null values make the draw function break up the line being drawn by skipping the next point in the array. x and y coords are initialized in touchstart, points are appended to the points array in touchmove, and the touchend handler appends two points and null to the points array to end the line. I'm not sure why <code>[x, y]</code> is used as the points in the touchend handler rather than coords from the event. Please leave a comment if you know why!</p>
 
@@ -164,7 +160,8 @@ chalk-sprites.png </div>
 <h3>Light Switch &amp; Shade</h3>
 
 <p>&nbsp;</p>
-<script src="https://gist.github.com/664260.js?file=chalk-shade.js"></script>
+<script src="https://gist.github.com/664260.js?file=chalk-shade.js" integrity="mJqbDt7at8NZ71dB7ItvDOdAKnEzyfVHTRcz0l10vbA0ts1noJ7p9vms8nY4XmZ1" crossorigin="anonymous"></script>
+
 
 <p>When the light switch is touched (or clicked) the shade class on the body element is toggled. Nothing to it.</p>
 
@@ -172,7 +169,7 @@ chalk-sprites.png </div>
 <h3>Sharing</h3>
 
 <p>&nbsp;</p>
-<script src="https://gist.github.com/664263.js?file=chalk-share.js"></script>
+<script src="https://gist.github.com/664263.js?file=chalk-share.js" integrity="dZjSHFCC1c/tNiNkCbgoA4HRWLhU6Jp6o/Y01moDS475DhFc0P6IKqv/Whv2F67z" crossorigin="anonymous"></script>
 
 <p>The share window is opened after a 10ms delay, just enough time for any drawing to be completed before rendering the image. The image is created by assigning the result of canvas' <code>toDataURL()</code> method to the output image element's src attribute.</p>
 
@@ -187,7 +184,8 @@ chalk-sprites.png </div>
 
 <p>Have fun drawing. Thanks to 37signals for a beautiful (and useful) example of a few modern web technologies.</p>
 
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" integrity="FCH+BDvbbRK+EjZ1g42eTND9RNJ4HoVNhmJoGkn0lU4Q/0SGQvjt5yQGJKL8B74e" crossorigin="anonymous"></script>
+
 <script>function addLineNumbersToAllGists() {
   $('.gist').each( function() {
       _addLineNumbersToGist('#' + $(this).attr('id'));

public/posts/2011/12/static-url-shortener-using-htaccess.md

@@ -4,7 +4,7 @@ I try to strike a reasonable balance between writing everything for this site my
 
 The result is about two dozen additional lines of Ruby in my static generator, and a command added to a Makefile. The Ruby code generates a short URL for each of my blog posts and then creates a [RewriteRule][RewriteRule] directive to redirect that short codes to each corresponding blog post. Then the directives are dumped into a .htaccess file which is [scp][scp]'d to s42.ca when I run `make publish_blog`.
 
-<script src="https://gist.github.com/1458844.js"></script>
+<script src="https://gist.github.com/1458844.js" integrity="iNDnkp2oj64ircMerEnfkbzlYeoUammDd8nZRZfUl5KVhbXEdNDaIR3Gj71L/x2Y" crossorigin="anonymous"></script>
 
 I think this is a pretty neat hack and have not seen this technique anywhere else so I thought I'd share it. Maybe someone else will find it interesting or useful for their blog. How far it scales won't be a concern until I have thousands of posts. That sounds like a good problem for future Sami to solve should it arise.