There’s no party like 3rd party!

How to handle dependencies securely

Frederic Hemberger
GDG DevFest 2016

Third party code

Know the sources
Limit the sources


Keep dependencies up to date

2014: On Alexaʼs Top 100,000 websites,
75% use a jQuery version older than 2½ years.
On 35% itʼs even older than 5 years.

2016: Scanning the domains of the Fortune 500 companies,
83% contained vulnerable libraries.

What can we do about it?

Discover vulnerabilities

Third party code in the browser

Third party code in the browser =
»Allowed« Cross Site Scripting (XSS)

- manipulate the siteʼs appearance
- manipulate cookies, localStorage, etc.
- steal session credentials, tokens, etc.
- load malicious code via XMLHttpRequest
- do whatever the heck you want

Limit sources for third party content

Content Security Policy

Content Security Policy:
A HTTP response header

Cache-Control: public
Content-Encoding: gzip
Content-Length: 2373
Content-Security-Policy: …
Content-Type:text/html; charset=utf-8
Date: Wed, 19 Oct 2016 11:22:05 GMT

Content Security Policy example

# .htaccess

Header set Content-Security-Policy: ↩
  "script-src 'self'"

Content Security Policy example

<!DOCTYPE html>
    <script src=""></script>
    <!-- this got injected somehow -->
    <script src=""></script>

Content Security Policy example

Loading/executing the script from is suppressed:

CSP warining message in Chrome Developer Tools

CSP Directives

  • child-src
  • connect-src
  • default-src
  • font-src
  • form-action
  • frame-ancestors
  • img-src
  • media-src
  • object-src
  • plugin-types
  • report-uri
  • sandbox
  • script-src
  • style-src

A more complex example

jQuery CDN, Google web fonts, embedded YouTube videos

Header set Content-Security-Policy: " \
  default-src 'none'; \
  script-src 'self'; \
  style-src 'self'; \
  font-src; \
  img-src 'self' data:; \

CSP Sources

You can specify sources by scheme (data:, https:), hostname (, fully qualified URI ( or wildcard (*://**)

  • 'none': Forbids a source type entirely
  • 'self': matches the current origin (but not subdomains)
  • 'unsafe-inline': allows inline JavaScript and CSS
  • 'unsafe-eval': allows JavaScript parsing with eval(), etc.

Warning: 'unsafe-inline' / 'unsafe-eval' will execute all
inline scripts, including possible XSS vectors.

If you can't get around inline scripts, use 'nonce'

<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">

Header set Content-Security-Policy: ↩
  "script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'"

Testing your CSP rules

Content-Security-Policy-Report-Only: [policy]
CSP warining message in Chrome Developer Tools

Collect reports on what gets blocked

Header set Content-Security-Policy: …↩
  report-uri /my/reporting/endpoint

You can also use for CSP data collection

Collect reports on what gets blocked

  "csp-report": {
    "document-uri": "",
    "referrer": "",
    "blocked-uri": "",
    "violated-directive": "style-src",
    "original-policy": "…"


HTML5 Rocks: An Introduction to Content Security Policy

Browser support for Content Security Policy

Google Chrome Mozilla Firefox Internet Explorer Opera Safari (macOS/iOS) Android Stock Browser
25 4 10 15 6.1 4.4

IE < Edge, some Android and/or older browsers may use
»X-Content-Security-Policy« or »X-Webkit-CSP«

Verify third party content:

Subresource Integrity

<script src=""></script>
  1. Download the file from a trusted source
  2. Verify its content
  3. Create a hash:
    $ cat jquery.min.js | openssl dgst -sha256 | openssl base64
  4. Do the same for the file from the CDN server
  5. The hashes should match


Browser support for Subresource Integrity

Google Chrome Mozilla Firefox Internet Explorer Opera Safari
Android Stock Browser
45 43 * 32 11 ** 5

* MS Edge status: Windows Insider Preview Build
** WebKit status: Supported In Preview
(as of September 2017)


During development/build:

  • Take a close look at third party code you plan to use
  • Use reliable sources, keep your dependencies up to date
  • Have your dependencies checked for vulnerabilities

In the browser:

  • Be aware of content injection attacks (XSS)
  • Limit third party sources with Content Security Policy
  • Verify the content of external scripts with Subresource Integrity

Thank you!

Frederic Hemberger