1. TrueLoyal
  2. UGC
  3. Technical Setup

Whitelisting and Content Security Policy

Avatar
Nicky P
Follow

In this article, we will cover:

Securing Your Tint Embeds: Whitelisting and CSP Best Practices

Integrating Tint’s powerful UGC and community display tools, like the embed script, into your website allows you to showcase engaging content effortlessly. However, with this flexibility comes the need to ensure your implementation is secure against potential threats such as unauthorized access, cross-site scripting (XSS), or malicious resource injections.

Two effective strategies for fortifying your TINT URLs or embeds are whitelisting and Content Security Policy (CSP). These methods work together to ensure that only trusted domains and resources interact with your Tint embed while protecting your website and users from vulnerabilities. Let’s explore how to apply these security practices to keep your Tint integration secure and reliable.

What is Whitelisting?

Whitelisting allows access to only pre-approved entities—such as IP addresses, domains, or users—preventing unauthorized interactions. For *.tintup.com, this means ensuring only trusted resources or users can interact with the embed or backend services.

How to Implement Whitelisting for the Embed Script or URLs:

Restrict the embed script to trusted domains, ensuring it can only be loaded where authorized. TINT's embed scripts are typically served from the following URLs:

      • https://app.tintup.com/dist/embedded.js
      • Legacy URLs:
        • https://www.tintup.com/app/dist/embedded.js
        • https://cdn.hypemarks.com/pages/a5b5e5.js
        • https://cdn.hypemarks.com/dist/embedded.js

How It’s Done: Ask your web team to configure your server or CDN (where the script is stored) to allow it to work only on trusted websites and services.

Example: Only allow scripts to load from *.tintup.comif your embed is https://app.tintup.com/dist/embedded.js or https://www.tintup.com/app/dist/embedded.js

Ifhttps://cdn.hypemarks.com/pages/a5b5e5.js or https://cdn.hypemarks.com/dist/embedded.js is the embed script, only allows scripts to load from https://*.hypemarks.com;

As the Hypemarks script is no longer actively used, we suggested that you make sure that you whitelist both https://*.hypemarks.com; and *.tintup.comto future-proof your web embeds.

What is CSP?

Content Security Policy (CSP) is a browser-level security mechanism that controls which resources (scripts, styles, images, etc.) can be loaded on a web page. It prevents malicious code execution and resource injection attacks.

You can use a CSP header to specify where scripts are allowed to load from.

How It’s Done: Ask your web team to add the following Content Security Policy header to your website’s configuration.

Example: Only allow scripts to load from *.tintup.comif your embed is https://app.tintup.com/dist/embedded.js or https://www.tintup.com/app/dist/embedded.js

Ifhttps://cdn.hypemarks.com/pages/a5b5e5.js or https://cdn.hypemarks.com/dist/embedded.js is the embed script, only allows scripts to load from https://*.hypemarks.com;

How to Implement CSP for Tint Embeds (New Version):

Add a CSP header to your website’s HTTP responses. For example:

Content-Security-Policy:
script-src 'self' https://*.tintup.com;
frame-src 'self' https://*.tintup.com;
connect-src 'self' https://*.tintup.com https://*.amazonaws.com;
This CSP does the following:
  • script-src: Allows JavaScript to be loaded only from your own domain
  • ('self') and https://*.tintup.com
  • frame-src: Ensures only https://*.tintup.com can be embedded in frames (e.g., for the embed widget)
  • connect-src: Allows data fetching or API calls to https://*.tintup.com and https://*.amazonaws.com for TINT's analytics 

How to Implement CSP for Tint Embeds (Old Version):

As the Hypemarks script is no longer actively used, we suggested that you make sure that you whitelist both https://*.hypemarks.com; and *.tintup.comto future-proof your web embeds.

Add a CSP header to your website’s HTTP responses. For example:

Content-Security-Policy:
script-src 'self' https://*.tintup.com https://*.hypemarks.com;
frame-src 'self' https://*.tintup.com https://*.hypemarks.com;
connect-src 'self' https://*.tintup.com https://*.hypemarks.com https://*.amazonaws.com;

This CSP does the following:
  • script-src: Allows JavaScript to be loaded only from your own domain ('self') and any subdomain of https://*.tintup.com https://*.hypemarks.com 
  • frame-src: Ensures only https://*.tintup.com https://*.hypemarks.comcan be embedded in frames (e.g., for the embed widget)
  • connect-src: Allows data fetching or API calls to https://*.tintup.com https://*.hypemarks.com and https://*.amazonaws.com for TINT's analytics 

Other potential connected whitelist options that are used by TINT:

  • Instagram

    • https://*.instagram.com
    • https://*.cdninstagram.com

  • X / Twitter

    • https://api.twitter.com
    • https://twitter.com
    • https://pbs.twimg.com
    • https://*.x.com

  • Facebook

    • https://*.facebook.com
    • https://scontent.xx.fbcdn.net
    • https://www.facebook.net
  • TikTok
    • https://*.tiktok.com
    • https://sf16-ies-music-va.tiktok.com
    • https://www.tiktokcdn.com
  • Pinterest
    • https://www.pinterest.com
    • https://www.pinterest.com/api/
    • https://pinimg.com

If you have any questions regarding whitelist and CSP, don't hesitate to contact Technical Support at support-advocacy@trueloyal.com.

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Related articles