Third-Party Content

The weak link in your chain?

Simon Hearne - Principle Engineer @ Akamai

#perfmatters conf 2018

AKA

Bad people
doing horrible things
to good sites

The modern web workflow 101

make something ๐Ÿค“

test it ๐Ÿ‘

ship it ๐Ÿ˜Ž

... 

put tags on it ๐Ÿ˜ณ

AMP got something right ๐Ÿ™„

timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/

What i've learned in 5 years

we seem to have less control than ever

The "business" ๐Ÿ‘ฉโ€โœˆ๏ธ

Tags serve business goals

  • Measurement & Analytics
  • Ads & Retargeting
  • "Optimization" & Testing
  • Comments & Live Chat
  • Tag Management

The money  ๐Ÿ’ต

โ€œWe know that Optimizely slows down the site, but it will get us $750k increased revenue this yearโ€

Holiday website, UK

The it's not my job  ๐Ÿคทโ€

โ€œWe suspect it slows the site down, we havenโ€™t tested it. Marketing says itโ€™s critical to their latest TV campaign so thereโ€™s no point arguingโ€

Budget airline, UK

The tag manager  ๐Ÿ•ด

โ€œAll the tags go through the tag manager, so they should be fine.โ€

Clicks-and-mortar store, UK

but what about the

Risk?

๐ŸŽฒ

PS: Availability Heuristic 101 ๐Ÿค”

PS: Availability Heuristic 101 ๐Ÿค”

  • Remember when Facebook went down?
  • Remember when Disqus went down?
  • Remember when Maxymiser went down?
  • Remember when Dyn went down?
  • left-pad ๐Ÿ˜ž

Risk 1:

Malicious code injection ๐Ÿ‘น

How much of your code has vulnerabilities?

beta.httparchive.org/reports/state-of-the-web#pctVuln

CryptoJacking

www.theverge.com/2018/3/22/17147320/cryptojacking-8500-percentage-points-bitcoin-monero-spike-symantec-security-mining

It happens to the biggest players

twitter.com/nytimes/status/3958547840

Internet 'Service' Providers

blog.ryankearney.com/2013/01/comcast-caught-intercepting-and-altering-your-web-traffic/

Content Delivery Networks

github.com/ampproject/amphtml/issues/2380

Content Delivery Networks

Unintentional data collection

website tracking is a "security disaster waiting to happen"

freedom-to-tinker.com/2018/02/26/no-boundaries-for-credentials-password-leaks-to-mixpanel-and-session-replay-companies/

Risk 2:

Availability ๐Ÿ“‰

Do they fail gracefully?

๐Ÿ‘

Do they fail gracefully?

๐Ÿ‘Ž

Are they using a CDN?

(& is it as good as yours?)

What is their SLA for availability?

(& is it as good as yours?)

help.optimizely.com/Account_Settings/Optimizely_support_plans

Availability to the user

  • Government / geo blocking
  • Ad blocking
  • Tracker blocking
  • Random crap

Risk 3:

Code Quality ๐Ÿ”Ž

XSS Vulnerabilites

randywestergren.com/widespread-xss-vulnerabilities/

XSS Vulnerabilites


document.write("<div
	class='vdb_player vdb_565ec775e4b092ebc9685ce853180f5de4b066208a63279a'
	vdb_params='m.pub_id=606413&m.url=http://nypost.com/#1' - alert(1) - '-alert(1)-'>
	</div>");
					

randywestergren.com/widespread-xss-vulnerabilities/

Different release schedules


<script src="//s7.addthis.com/addthis_widget.js" async></script>
					
How do you know when it changes?

www.addthis.com

Just plain thoughtless

discuss.newrelic.com/t/do-not-clear-the-resource-timing-buffer/

Risk 4:

Performance ๐Ÿš€

Self-policing isn't good enough

... the X Web Reference Snippet was available ... and the download time over HTTP did not exceed 500 ms.
Snippet is sampled every minute from a variety of U.S. locations.

status.optimizely.com

Tools aren't equal

orangevalley.nl/en/blog/9-ab-testing-tools-compared-on-site-speed-impact/

The web is variable

Top 250 resources from HTTP Archive

The web is variable

Top 250 resources from Akamai mPulse

Resource Timing is the hero we need

https://www.w3.org/TR/resource-timing-1/

Resource Timing is the hero we need

not without Timing-Allow-Origin ๐Ÿ™ˆ

nicj.net/resourcetiming-visibility-third-party-scripts-ads-and-page-weight/

Resource Timing won't save us

๐Ÿ™ˆ no redirect information

๐Ÿ™ˆ limited data on 72% of third-party content

๐Ÿ™ˆ only the first 150 requests *

๐Ÿ™ˆ no data on old iDevices

๐Ÿ™ˆ no data for cross-origin iframes

developer.akamai.com/blog/2017/07/26/measuring-performance-third-party-contributors/
* limit can be increased per pageview

Risk 4:

Performance ๐Ÿš€

(for real this time)

CPU is our biggest bottleneck โณ

Who's policing the third-parties?

github.com/jpvincent/3rd-party-cpu-abuser

Variable CPU time

on synthetic agents!

twitter.com/AndyDavies/status/973895262388224000

The most frustrating perf bug, ever

Who watches the watchmen?

calendar.perfplanet.com/2017/an-audit-of-boomerangs-performance/

Risk 4:

Performance ๐Ÿš€

(part III)

delaying onload

keeping the radio awake

We have little control
over which are used

But there are things we can do...

Stage 1:

Find out what's there

fortune.com/2015/07/08/adblock-data/

Synthetic Testing (webpagetest)

webpagetest.org/

Synthetic Testing (webpagetest)

Bonus: Third-party categorization

github.com/simonhearne/thirdpartydb | thirdpartydb.appspot.com

Real User Monitoring ๐Ÿฅƒ

Akamai mPulse

Stage 2:

Determine the impact

Synthetic Testing (webpagetest)

Synthetic Testing (made easy)

github.com/simonhearne/third-party-impact/

Synthetic Testing (made easy)

github.com/simonhearne/third-party-impact/

Resource Impact from Synthetics ๐Ÿค–

blog.catchpoint.com/2018/01/10/using-catchpoint-to-analyze-third-party-impact/

Resource Impact from Synthetics ๐Ÿค–

speedcurve.com/blog/ux-focus-for-waterfalls-and-third-parties/

Resource Impact from RUM

Advertising Partners

Partner 1 = ~400ms slower than partner 2

Migrating all ads = 220ms faster page load

Additional revenue ~= $12,000 per month

Large US publishing company

LongTasks API

Bonus: determine the value!

blog.sumall.com/journal/optimizely-got-me-fired.html

"Everything should have a value,
because everything has a cost"

Tim Kadlec - freelance #webperf god

Stage 3:

Measure them and Report on them

Content Security Policy ๐Ÿ‘ฎโ€

(report-only)


{
	"csp-report": {
		"document-uri": "https://yourwebsite.com/",
		"referrer": "",
		"violated-directive": "style-src",
		"effective-directive": "style-src",
		"original-policy": "",
		"disposition": "enforce",
		"blocked-uri": "inline",
		"line-number": 4,
		"column-number": 3,
		"source-file": "https://static.hotjar.com/c/hotjar-730716.js?sv=6",
		"status-code": 0,
		"script-sample": ""
	}
}

report-uri.com

Synthetic Testing ๐Ÿค–

blog.catchpoint.com/2018/01/10/using-catchpoint-to-analyze-third-party-impact/

RUM ๐Ÿฅƒ

The best way to monitor resources,
even with its limitations

๐Ÿฅƒ Waterfalls

Akamai mPulse

Stage 4:

Defend ourselves ๐Ÿคผโ€

Content Security Policy ๐Ÿ‘ฎโ€๏ธ

caniuse.com/#feat=contentsecuritypolicy2

Content Security Policy ๐Ÿ‘ฎโ€๏ธ

report-uri.com

CSP Strict-Dynamic

Content Security Policy ๐Ÿ‘ฎโ€๏ธ

๐Ÿ‘ CryptoJacking

๐Ÿ‘ XSS

๐Ÿ‘Ž Maintenance

Sub-resource Integrity ๐Ÿ”


<link
	rel="stylesheet"
	href="//maxcdn.bootstrapcdn.com/.../bootstrap.min.css"
	integrity="
		sha256-8EtRe6XWoFEEhWiaPkLaw...=
		sha512-/5KWJw2mvMO2ZM5fndVxU...=
		"
	
	crossorigin="anonymous">
					

<script
	src="//ajax.googleapis.com/.../jquery.min.js"
	integrity="
		sha256-ivk71nXhz9nsyFDoYoGf2...=
		sha512-7aMbXH03HUs6zO1R+pLye...=
		"
		
	crossorigin="anonymous"></script>

Sub-resource Integrity ๐Ÿ”

๐Ÿ‘ Malicious Code

๐Ÿ‘ Untested Changes

๐Ÿ‘Ž Maintenance

โญ๏ธ Signature-based Restrictions...*

github.com/mikewest/signature-based-sri

Service Worker ๐Ÿ’ช


function timeout(delay) {
	return new Promise(function(resolve, reject) {
		setTimeout(function(){
			resolve(new Response('', {
				status: 408,
				statusText: 'Request timed out.'
			}));
		}, delay);
	});
}

self.addEventListener('fetch', function(event) {
	// Only fetch JavaScript files for now
	if (/\.js$/.test(event.request.url)) {
		event.respondWith(Promise.race([timeout(2000), fetch(event.request.url)]));
	} else {
		event.respondWith(fetch(event.request));
	}
});
					

calendar.perfplanet.com/2015/reducing-single-point-of-failure-using-service-workers/

Service Worker ๐Ÿ’ช

๐Ÿ‘ CDN / Network outages

๐Ÿ‘Ž Not on first pageview

๐Ÿ‘Ž Maintenance

๐Ÿ‘Ž You can break your site

Self-hosting / Proxying โ˜”๏ธ

google-webfonts-helper.herokuapp.com/fonts

Self-hosting / Proxying โ˜”๏ธ

vwo.com/knowledge/host-vwo-javascript-files-on-your-server/

Self-hosting / Proxying โ˜”๏ธ

community.akamai.com/community/web-performance/blog/2016/01/13/5-ways-to-prevent-slow-3rd-party-front-end-services

Self-hosting / Proxying โ˜”๏ธ

๐Ÿ‘ CDN / Network outages

๐Ÿ‘ Shared TCP connection

๐Ÿ‘Ž Maintenance

Stage 5:

Have a third-party policy ๐Ÿ’ผ

  • What does it do?
  • Who uses it?
  • Whatโ€™s the risk to the site?
  • How do you remove it?

Share with other teams! ๐Ÿ—ฃ

speedcurve.com/demo/thirdparty/

Third-party content may be a weak link

But it's here to stay

Five things you can do today:

  • Know what's there
  • Measure them
  • Have a solid defense
  • Share the data
  • Have third-party policy

Further reading

Thank you,
good luck!

๐Ÿšดโ€ @SimonHearne

๐Ÿ›  webperf.ninja/tools

๐Ÿ–ฅ simonhearne.github.io/weak-links

@SimonHearne