Commit cb790a73 authored by Jamie Tanna's avatar Jamie Tanna

Block Twitter JavaScript from being pushed to the site

To ensure that I'm no longer allowing Twitter's third-party JavaScript
on the site, block the build using HTMLProofer if it spots the script on
a page.

Related to #193, but does not strip the scripts.

Closes #807.
parent 14dbfebb
Pipeline #98564157 passed with stages
in 8 minutes and 45 seconds
......@@ -124,7 +124,6 @@ In response to the [Dear GitHub][dear-github] letter, [GitLab responded][dear-gi
This transparency was also shown when they recently [did an oops and deleted their production database][techcrunch-gitlab-backup] while finding that their backup procedures were actually silently failing. They were incredibly open with what actually went wrong, sharing the internal Google Doc that they had been updating live, such that the world could see exactly what the internal GitLab team could:
<blockquote class="twitter-tweet" data-lang="en-gb"><p lang="en" dir="ltr">We accidentally deleted production data and might have to restore from backup. Google Doc with live notes https://t.co/EVRbHzYlk8</p>&mdash; GitLab.com Status (@gitlabstatus) <a href="https://twitter.com/gitlabstatus/status/826591961444384768">1 February 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
They even set up a live stream so the public could hop in on their conversations about what to do, and to follow the restore process copying files back to the production server! They also released [a very detailed postmortem][gitlab-database-postmortem], that explained exactly what happened, and what issues they encountered. Normally, such a postmortem would be only internally available, and therefore the service consumers would have missed out on the real context for what caused the outage. However, GitLab's incredibly open way of working prevailed, and as Sid had explained to me, it was so everyone could learn from their mistakes, and understand why it happened.
......
......@@ -30,7 +30,7 @@ On the Swift side, according to Static Gen there is [Spelt](https://github.com/n
Next, it's important to know whether the person wants to build the theme themselves, or adapt someone else's:
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Ideally I’d like a pre-made theme, I have an aversion to CSS and have no design skill. But it would have to be accessible to a high standard, so happy to tweak.</p>&mdash; Rob Whitaker (@RobRWAPP) <a href="https://twitter.com/RobRWAPP/status/1194696499055206401?ref_src=twsrc%5Etfw">November 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Ideally I’d like a pre-made theme, I have an aversion to CSS and have no design skill. But it would have to be accessible to a high standard, so happy to tweak.</p>&mdash; Rob Whitaker (@RobRWAPP) <a href="https://twitter.com/RobRWAPP/status/1194696499055206401?ref_src=twsrc%5Etfw">November 13, 2019</a></blockquote>
In this case, Rob was happy picking up someone else's which is why I'd recommend Hugo as the [Hugo Themes site](https://themes.gohugo.io/) is huge and includes so much, and it's possible to take any HTML template that may be produced elsewhere and tweak it for Hugo (this is true for any static site generator, mind).
......
---
title: "Blocking Twitter Widgets from This Site"
description: "Enforcing a privacy-aware removal of Twitter's JavaScript widget from this site."
tags:
- nablopomo
- privacy
- www.jvt.me
license_code: Apache-2.0
license_prose: CC-BY-NC-SA-4.0
date: 2019-11-26T07:58:39+0000
slug: "remove-twitter-widget"
series: nablopomo-2019
---
For quite some time, I've made an active effort to strip [Twitter's third-party JavaScript for tweet embedding](https://help.twitter.com/en/using-twitter/how-to-embed-a-tweet) when embedding a tweet into any of my posts.
I'm not particularly a fan of allowing Twitter to gain more information about folks' browsing habits and _don't really fancy_ their ability to run arbitrary JavaScript on my site. It also doesn't really provide that much extra benefit to a user, from my point of view, so I'm happy leaving it as just a `<blockquote>`.
However, <span class="h-card"><a class="u-url" href="https://annadodson.co.uk">Anna</a></span> and <span class="h-card"><a class="u-url" href="https://carolgilabert.me/">Carol</a></span> noticed that on [_Reader Mail: What Static Site Generator Would I Recommend?_]({{< ref "2019-11-13-reader-mail-what-static-site-generator" >}}) there were some issues with rendering the page, but I couldn't see it with my Firefox install.
It turns out that it was due to my various privacy-aware extensions that remove things like Twitter's widgets, so I never saw the issue on my own machines, but I had actually missed a couple of instances of the widgets on that post and one from a few years ago - woops!
I've since removed them, and to help prevent this issue in the future, I've decided to finally implement a check within my pipeline to enforce this using [HTML-Proofer](https://github.com/gjtorikian/html-proofer) to ensure that I can flag up cases where I've accidentally added them and block the build if I push any posts that include the Twitter sharing widget, ensuring I can't push anything to production that includes these scripts!
......@@ -7,5 +7,6 @@ require_relative 'checks/home_page_has_microsub_settings'
require_relative 'checks/home_page_has_valid_hcard'
require_relative 'checks/home_page_has_valid_webmention_endpoint'
require_relative 'checks/mf2_has_valid_hentry'
require_relative 'checks/no_twitter_widgets'
require_relative 'checks/posts_pages_have_syndication_link'
require_relative 'checks/posts_pages_have_valid_hentry'
require 'html-proofer'
class NoTwitterWidgets < ::HTMLProofer::Check
def run
twitter_scripts = @html.css('script').select do |script|
!script.attr(:src).nil? && script.attr(:src).include?('/platform.twitter.com/widgets.js')
end
add_issue('Twitter widget found on the site - please remove it for privacy concerns') unless twitter_scripts.length.zero?
end
end
---
posts:
- https://www.jvt.me/posts/2019/11/26/remove-twitter-widget/
- https://www.jvt.me/posts/2019/11/25/neurodiversity-blogumentation/
- https://www.jvt.me/posts/2019/11/24/pipe-data-sudo/
- https://www.jvt.me/posts/2019/11/23/minify-json-python/
......
<html>
<script charset="utf-8">
</script>
</html>
<!DOCTYPE html>
<html>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
</head>
<body>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
require 'spec_helper'
describe 'NoTwitterWidgets' do
context 'when Twitter widget is found' do
it 'errors' do
html = Nokogiri::HTML(File.read('spec/fixtures/twitter-widget/widget.html'))
sut = NoTwitterWidgets.new('', './public/index.html', html, {})
expect(sut).to receive(:add_issue)
.with('Twitter widget found on the site - please remove it for privacy concerns')
.and_call_original
sut.run
expect(sut.issues.length).to eq 1
end
end
context 'when Twitter widget is not found' do
it 'does not error' do
html = Nokogiri::HTML(File.read('spec/fixtures/twitter-widget/no-widget.html'))
sut = NoTwitterWidgets.new('', './public/index.html', html, {})
expect(sut).to_not receive(:add_issue)
sut.run
expect(sut.issues.length).to eq 0
end
end
context 'when <script> does not have a src tag' do
it 'does not error' do
html = Nokogiri::HTML(File.read('spec/fixtures/twitter-widget/no-src.html'))
sut = NoTwitterWidgets.new('', './public/index.html', html, {})
expect(sut).to_not receive(:add_issue)
sut.run
expect(sut.issues.length).to eq 0
end
end
end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment