HTML - Third Party Script

About

Third Party Scripts are scripts that have been created by a third party.

Example:

  • Google Adsense
  • Google Analytics
  • Twitter

Third-party embeds are typically loaded in <iframe> elements on the page. Third-party providers offer HTML snippets often consisting of an <iframe> that pulls in a page composed of markup, scripts, and stylesheets. Some providers also use a script snippet that dynamically injects an <iframe> to pull other content in.

Management

Loading

Browser

Third party script

Example loading asynchronously Facebook library. More How to load a script dynamically with Javascript?

(function (d, s, id) {
    var js;
    // Get the first script element
    var fjs = d.getElementsByTagName(s)[0];
    // if the element already exist with the id. do nothing
    if (d.getElementById(id)) {
        return;
    }
    // Create a script element
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js";
    // get the parent node (the head normally) and insert it before the first one
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Node

export default url =>
  new Promise((resolve, reject) =>
    document.head.appendChild(
      Object.assign(document.createElement('script'), {
        async: true,
        src: url,
        onload: resolve,
        onerror: reject,
      }),
    ),
  );

Usage:

import loadScript from './loadScript';

const url = 'https://...';
loadScript(url).then(
      () => {
         loaded = true;
      },
      error => {
        console.error('Failed to load.');
      },
    );

Security

Content-Security-Policy: script-src https://example.com/

  • The following third-party script will not be loaded or executed
<script src="https://not-example.com/js/library.js"></script>

Documentation / Reference





Discover More
HTML - Accelerated Mobile Pages (AMP)

HTML The AMP Project speeds up web pages on mobile devices AMP HTML is a subset of HTML for authoring content pages such as news articles in a way that guarantees certain baseline performance characteristics....
HTTP - Content security policy (CSP)

CSP is a security response header that defines the behaviors that are trusted in your HTML page. In particular, it may restrict by defining the allowed host and origin of fetched resources. CSP can...
Devtool Tracking Cookie Identifier Counter
How does a tracking cookie work? A step by step example

This page shows you a basic example of a tracking ... cookie so that you can understand and implement the underlying mechanisms. These cookies are third-party cookie. A tracking cookie is also known...
Security - Third Party

A third party is an external entity to your organization or to your code. In HTTP, a third-party is identified via the origin and if it needs or not to make cross-origin request Example:
Firebug Netpanel Explained
Web - Page Load Time (Speed|Performance)

Goal: being interactive in under 5 seconds Duplicate of . Mobile web speeds matter. On average, faster experiences lead to 70% longer...
Map Of Internet 1973
What is a DNS CNAME (Canonical Name) ?

A CNAME (Canonical Name) is the DNS alias functionality that maps a domain name to another name. More ...
Chrome Cookie Configuration
What is a Third-party (3P) Cookie and how it works?

Third party Cookies are cookies created by other sites (ie that comes from another domain (ie a third party) than the hosted web page. These sites own some of the content, like ads or images, that you...



Share this page:
Follow us:
Task Runner